🔧 Update Pack V1 #13

Author: BirjuVachhani

example/lib/stories/one_shot_animation.dart

@@ -14,11 +14,22 @@ class _OneShotAnimationState extends State<OneShotAnimation> {
     return Center(
       child: Image.asset('assets/pin_ball_256x.png', width: 150, height: 150)
           .fadeIn()
-          .slideInFromBottom()
+          .slideInFromLeft()
           .blurIn()
-          .oneShot(
-            duration: const Duration(milliseconds: 1000),
-          ).then(context).slideOutToLeft().oneShot(),
+          .oneShot() // child
+
+          // Then 1
+          .slideOutToBottom()
+          .animateAfter()
+
+          // // Then 2
+          .slideOutToBottom()
+          .animateAfter()
+
+          // // Then 2
+          .slideOutToBottom()
+          .animateAfter()
+          .resetAll()
     );
   }
 }

lib/src/animated_effect.dart

@@ -1,7 +1,7 @@
-import 'package:flutter/widgets.dart';
-import 'package:hyper_effects/src/apple_curves.dart';
+import 'dart:math';
 
-import 'effect_animation_value.dart';
+import 'package:flutter/widgets.dart';
+import 'package:hyper_effects/hyper_effects.dart';
 
 /// Provides extension methods for [Widget] to animate it's appearance.
 extension AnimatedEffectExt on Widget {
@@ -40,6 +40,30 @@ extension AnimatedEffectExt on Widget {
     );
   }
 
+  Widget animateAfter({
+    Duration duration = const Duration(milliseconds: 350),
+    Curve curve = appleEaseInOut,
+    int repeat = 0,
+    bool reverse = false,
+    Duration delay = Duration.zero,
+    VoidCallback? onEnd,
+  }) {
+    return AnimatedEffect(
+      shouldTriggerAfterLast: true,
+      startImmediately: false,
+      toggle: false,
+      duration: duration,
+      curve: curve,
+      repeat: repeat,
+      reverse: reverse,
+      delay: delay,
+      onEnd: onEnd,
+      child: this,
+    );
+  }
+
+  Widget resetAll() => ResetEffect(child: this);
+
   /// Animate the effects applied to this widget.
   ///
   /// Unlike [animate], this method triggers the animation immediately without
@@ -54,7 +78,7 @@ extension AnimatedEffectExt on Widget {
   ///
   /// The [repeat] parameter is used to determine how the animation should be
   /// repeated.
-  Widget oneShot({
+  AnimatedEffect oneShot({
     Duration duration = const Duration(milliseconds: 350),
     Curve curve = appleEaseInOut,
     int repeat = 0,
@@ -74,40 +98,6 @@ extension AnimatedEffectExt on Widget {
     );
   }
 
-  /// Animates the next effects only after the previous effects have finished.
-  Widget then(
-    BuildContext context, {
-    Duration duration = const Duration(milliseconds: 350),
-    Curve curve = appleEaseInOut,
-    int times = 0,
-    bool reverse = false,
-    Duration delay = Duration.zero,
-  }) {
-    // if (this case AnimatedEffect widget) {
-    //
-    //   return AnimatedEffect(
-    //     toggle: null,
-    //     duration: duration,
-    //     curve: curve,
-    //     startImmediately: true,
-    //     repeat: times,
-    //     reverse: reverse,
-    //     startAfter: state?._controller,
-    //     child: this,
-    //   );
-    // }
-
-    return AnimatedEffect(
-      toggle: null,
-      duration: duration,
-      curve: curve,
-      startImmediately: true,
-      repeat: times,
-      reverse: reverse,
-      child: this,
-    );
-  }
-
   /// Repeats the chain of preceding effects.
   /// [delay] is the delay between each repetition.
   /// [repeat] determines how the animation should be repeated.
@@ -162,7 +152,7 @@ class AnimatedEffect extends StatefulWidget {
   /// A delay before the animation starts.
   final Duration delay;
 
-  final AnimationController? startAfter;
+  final bool shouldTriggerAfterLast;
 
   /// Creates [AnimatedEffect] widget.
   const AnimatedEffect({
@@ -176,7 +166,7 @@ class AnimatedEffect extends StatefulWidget {
     this.repeat = 0,
     this.reverse = false,
     this.delay = Duration.zero,
-    this.startAfter,
+    this.shouldTriggerAfterLast = false,
   });
 
   @override
@@ -206,13 +196,7 @@ class _AnimatedEffectState extends State<AnimatedEffect>
 
     _controller.addStatusListener(onAnimationStatusChanged);
 
-    if (widget.startImmediately && widget.startAfter == null) {
-      forward();
-    }
-
-    if (widget.startAfter != null) {
-      widget.startAfter!.addStatusListener(startAfterListener);
-    }
+    if (widget.startImmediately) forward();
   }
 
   @override
@@ -227,7 +211,6 @@ class _AnimatedEffectState extends State<AnimatedEffect>
 
   @override
   void dispose() {
-    widget.startAfter?.removeStatusListener(startAfterListener);
     _controller.removeStatusListener(onAnimationStatusChanged);
     _controller.dispose();
     super.dispose();
@@ -240,15 +223,29 @@ class _AnimatedEffectState extends State<AnimatedEffect>
   }
 
   void onAnimationStatusChanged(AnimationStatus status) {
+    print('onAnimationStatusChanged: $status | ${this.hashCode}');
     if (status == AnimationStatus.completed ||
         status == AnimationStatus.dismissed) {
       widget.onEnd?.call();
 
       if (_repeatTimes == -1 || _repeatTimes > 0) {
         if (_repeatTimes != -1 && (!widget.reverse || !shouldReverse)) {
-          _repeatTimes--;
+          _repeatTimes = max(0, _repeatTimes - 1);
         }
         forward();
+      } else if (_repeatTimes == 0) {
+        // chaining animations
+        final parentState =
+            context.findAncestorStateOfType<_AnimatedEffectState>();
+        if (parentState?.widget.shouldTriggerAfterLast == true) {
+          parentState?.forward();
+        }
+        if (parentState == null) {
+          print('resetting from state: ${this.hashCode}');
+          final resetState =
+              context.findAncestorStateOfType<_ResetEffectState>();
+          resetState?.reset();
+        }
       }
     }
   }
@@ -259,6 +256,7 @@ class _AnimatedEffectState extends State<AnimatedEffect>
       if (widget.reverse && shouldReverse) {
         _controller.reverse();
       } else {
+        _controller.reset();
         _controller.forward(from: 0);
       }
       shouldReverse = !shouldReverse;
@@ -289,3 +287,40 @@ class _AnimatedEffectState extends State<AnimatedEffect>
     );
   }
 }
+
+class ResetEffect extends StatefulWidget {
+  final Widget child;
+  const ResetEffect({super.key, required this.child});
+
+  @override
+  State<ResetEffect> createState() => _ResetEffectState();
+}
+
+class _ResetEffectState extends State<ResetEffect> {
+  @override
+  Widget build(BuildContext context) => widget.child;
+
+  void reset() {
+    print('reset');
+    final state = findLeafAnimatedEffectState(context);
+    print('found state: ${state.hashCode}');
+    state?.forward();
+  }
+
+  _AnimatedEffectState? findLeafAnimatedEffectState(BuildContext context) {
+    _AnimatedEffectState? result;
+
+    void visitor(Element element) {
+      final Widget widget = element.widget;
+      if (widget is AnimatedEffect) {
+        final StatefulElement editableTextElement = element as StatefulElement;
+
+        result = editableTextElement.state as _AnimatedEffectState;
+      }
+      element.visitChildren(visitor);
+    }
+
+    context.visitChildElements(visitor);
+    return result;
+  }
+}

lib/src/effect_builder.dart

@@ -14,7 +14,7 @@ import 'effects/effect.dart';
 /// If an animation value is found, the [Effect.lerp] method is called to
 /// interpolate between two [Effect]s. The resulting [Effect] is then applied
 /// to the [child] by calling [Effect.apply].
-class AnimatableEffect extends StatefulWidget {
+class EffectWidget extends StatefulWidget {
   /// The effect applied to the [child] to interpolate to.
   final Effect end;
 
@@ -24,19 +24,19 @@ class AnimatableEffect extends StatefulWidget {
   /// The [Widget] to apply the [end] to.
   final Widget child;
 
-  /// Creates an [AnimatableEffect].
-  const AnimatableEffect({
+  /// Creates an [EffectWidget].
+  const EffectWidget({
     super.key,
     this.start,
     required this.end,
     required this.child,
   });
 
   @override
-  State<AnimatableEffect> createState() => _AnimatableEffectState();
+  State<EffectWidget> createState() => _EffectWidgetState();
 }
 
-class _AnimatableEffectState extends State<AnimatableEffect> {
+class _EffectWidgetState extends State<EffectWidget> {
   /// The [Effect] to interpolate to.
   late Effect end = widget.end;
 
@@ -62,7 +62,7 @@ class _AnimatableEffectState extends State<AnimatableEffect> {
   }
 
   @override
-  void didUpdateWidget(covariant AnimatableEffect oldWidget) {
+  void didUpdateWidget(covariant EffectWidget oldWidget) {
     super.didUpdateWidget(oldWidget);
     if (oldWidget.end != widget.end &&
         oldWidget.end.runtimeType == widget.end.runtimeType) {

lib/src/effects/align_effect.dart

@@ -7,23 +7,23 @@ import 'effect.dart';
 extension AlignEffectExt on Widget {
   /// Applies an [AlignEffect] to a [Widget] with the given [alignment].
   Widget align(AlignmentGeometry alignment) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: AlignEffect(alignment: alignment),
       child: this,
     );
   }
 
   /// Applies an [AlignEffect] to a [Widget] only on the x-axis.
   Widget alignX(double x) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: AlignEffect(alignment: Alignment(x, 0)),
       child: this,
     );
   }
 
   /// Applies an [AlignEffect] to a [Widget] only on the y-axis.
   Widget alignY(double y) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: AlignEffect(alignment: Alignment(0, y)),
       child: this,
     );
@@ -32,7 +32,7 @@ extension AlignEffectExt on Widget {
   /// Applies an [AlignEffect] to a [Widget] with the given [x] and [y]
   /// values.
   Widget alignXY(double x, double y) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: AlignEffect(
         alignment: Alignment(x, y),
       ),

lib/src/effects/blur_effect.dart

@@ -9,7 +9,7 @@ import 'effect.dart';
 extension BlurEffectExt on Widget {
   /// Applies a [BlurEffect] to this widget with given [blur] value.
   Widget blur(double? blur) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: BlurEffect(blur: blur),
       child: this,
     );
@@ -18,7 +18,7 @@ extension BlurEffectExt on Widget {
   /// Applies a [BlurEffect] to only the horizontal axis of this widget with
   /// given [blurX] value.
   Widget blurX(double? blurX) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: BlurEffect(blurX: blurX),
       child: this,
     );
@@ -27,7 +27,7 @@ extension BlurEffectExt on Widget {
   /// Applies a [BlurEffect] to only the vertical axis of this widget with
   /// given [blurY] value.
   Widget blurY(double? blurY) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: BlurEffect(blurY: blurY),
       child: this,
     );
@@ -36,15 +36,15 @@ extension BlurEffectExt on Widget {
   /// Applies a [BlurEffect] to this widget with given [blurX] and [blurY]
   /// values.
   Widget blurXY(double? blurX, double? blurY) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: BlurEffect(blurX: blurX, blurY: blurY),
       child: this,
     );
   }
 
   /// Applies a [BlurEffect] to this widget with a default blur in animation.
   Widget blurIn({double blur = 10}) {
-    return AnimatableEffect(
+    return EffectWidget(
       start: BlurEffect(blur: blur),
       end: BlurEffect(blur: 0),
       child: this,
@@ -53,7 +53,7 @@ extension BlurEffectExt on Widget {
 
   /// Applies a [BlurEffect] to this widget with a default blur out animation.
   Widget blurOut({double blur = 10}) {
-    return AnimatableEffect(
+    return EffectWidget(
       start: BlurEffect(blur: 0),
       end: BlurEffect(blur: blur),
       child: this,

lib/src/effects/clip_effect.dart

@@ -8,7 +8,7 @@ extension ClipEffectExtension on Widget {
     double radius = 16,
     Clip? clip,
   ]) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: ClipEffect(
         clip: clip ?? Clip.antiAlias,
         borderRadius: BorderRadius.circular(radius),
@@ -45,7 +45,7 @@ extension ClipEffectExtension on Widget {
       _ => BorderRadius.zero
     };
 
-    return AnimatableEffect(
+    return EffectWidget(
       end: ClipEffect(
         clip: clip ?? Clip.antiAlias,
         borderRadius: borderRadius,
@@ -60,7 +60,7 @@ extension ClipEffectExtension on Widget {
     BorderRadius borderRadius = const BorderRadius.all(Radius.circular(16)),
     Clip? clip,
   ]) {
-    return AnimatableEffect(
+    return EffectWidget(
       end: ClipEffect(
         clip: clip ?? Clip.antiAlias,
         borderRadius: borderRadius,