Add opacity animation to ZoomIn and ZoomOut

Klerith · Feb 29, 2024 · 9238c96 · 9238c96
1 parent e8728e0
commit 9238c96
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/lib/src/animations/animate_do_zooms.dart b/lib/src/animations/animate_do_zooms.dart
@@ -51,6 +51,7 @@ class ZoomIn extends StatefulWidget {
 class ZoomInState extends State<ZoomIn>
     with SingleTickerProviderStateMixin, AnimateDoState {
   late Animation<double> zoom;
+  late Animation<double> opacity;
 
   @override
   void dispose() {
@@ -68,6 +69,9 @@ class ZoomInState extends State<ZoomIn>
     zoom = Tween(begin: 0.0, end: widget.from)
         .animate(CurvedAnimation(curve: widget.curve, parent: controller));
 
+    opacity = Tween<double>(begin: 0, end: 1).animate(
+        CurvedAnimation(parent: controller, curve: const Interval(0, 0.25)));
+
     /// Provided by the mixing [AnimateDoState] class
     configAnimation(
       delay: widget.delay,
@@ -96,7 +100,10 @@ class ZoomInState extends State<ZoomIn>
         builder: (BuildContext context, Widget? child) {
           return Transform.scale(
             scale: zoom.value,
-            child: widget.child,
+            child: AnimatedOpacity(
+                duration: const Duration(milliseconds: 100),
+                opacity: opacity.value,
+                child: widget.child),
           );
         });
   }
@@ -150,6 +157,7 @@ class ZoomOut extends StatefulWidget {
 class ZoomOutState extends State<ZoomOut>
     with SingleTickerProviderStateMixin, AnimateDoState {
   late Animation<double> zoom;
+  late Animation<double> opacity;
 
   @override
   void dispose() {
@@ -167,6 +175,9 @@ class ZoomOutState extends State<ZoomOut>
     zoom = Tween(begin: 1.0, end: widget.from)
         .animate(CurvedAnimation(curve: widget.curve, parent: controller));
 
+    opacity = Tween<double>(begin: 1, end: 0).animate(
+        CurvedAnimation(parent: controller, curve: const Interval(0, 0.85)));
+
     /// Provided by the mixing [AnimateDoState] class
     configAnimation(
       delay: widget.delay,
@@ -193,7 +204,12 @@ class ZoomOutState extends State<ZoomOut>
     return AnimatedBuilder(
         animation: controller,
         builder: (BuildContext context, Widget? child) {
-          return Transform.scale(scale: zoom.value, child: widget.child);
+          return Transform.scale(
+              scale: zoom.value,
+              child: AnimatedOpacity(
+                  duration: const Duration(milliseconds: 100),
+                  opacity: opacity.value,
+                  child: widget.child));
         });
   }
 }
diff --git a/lib/src/types/animate_do_mixins.dart b/lib/src/types/animate_do_mixins.dart
@@ -56,19 +56,19 @@ mixin AnimateDoState {
     if (animate && !manualTrigger) {
       Future.delayed(delay, () {
         if (disposed) return;
-        if (infinite){ 
+        if (infinite) {
           controller.repeat();
           return;
         }
 
-        (animate) ? controller.forward() : controller.animateBack(0);
+        (animate) ? controller.forward() : controller.reverse();
       });
     }
 
     /// If the animation already happen, we can animate it back
     if (!animate) {
       if (disposed) return;
-      if ( infinite ) {
+      if (infinite) {
         controller.stop();
         return;
       }

diff --git a/test/types/animate_do_mixins_test.dart b/test/types/animate_do_mixins_test.dart
@@ -2,8 +2,6 @@ import 'package:animate_do/src/types/animate_do_mixins.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 
-
-
 class MockAnimatedState extends Mock with AnimateDoState {}
 
 void main() {
@@ -24,9 +22,6 @@ void main() {
         onFinish: () {},
         controllerCallback: (controller) {},
       );
-
-
-
     });
   });
 }