DEV Community: heyhey1028💙🔥

【Flutter】Mastering Animation ~4. The confusing parts of animations~

heyhey1028💙🔥 — Sat, 12 Nov 2022 13:41:10 +0000

The confusing part of animations

Adding animations is not always necessary to create an app, but there are still plenty of opportunities to write them.

I have implemented animations quite some time. And still, every time I write, I am baffled by how to implement animations.

In this article, I'll try to sort out some of the areas that personally confuse me.

1. there are AnimatedXXX and XXXTransition

If you look for articles on animation, you will often see classes called AnimatedXXX and XXXTransition. These classes are used to simplify the handling of certain animations.

However, these classes have always baffled me.

For example, if I want a widget to fade in, I can use either AnimatedOpacity or FadeTransition to achieve a fade-in animation.

So what's the difference? And when should you use which?

ImplicitlyAnimatedWidget and AnimatedWidget

AnimatedXXX and XXXTransition classes support a variety of animations other than fade-in animations, and each of them has a corresponding class in both classes.

These two groups of classes inherit from separate parent classes, ImplicitlyAnimatedWidget and AnimatedWidget.

ImplicitlyAnimatedWidget is inherited by the AnimatedXXX class group. And AnimatedWidget is inherited by the XXXTransition class group.

Since "classes that inherits ImplicitlyAnimatedWidget" and "classes that inherits AnimatedWidget" are too long, we call them Implicit widgets and Transition widgets, respectively.

(Google's engineers also called them this way, so it should be reasonable.

Please keep in mind that these are not the actual class names.

How are they different?

Difference between the two groups is simply whether or not they contain an AnimatedController.

Implicit widgets holds AnimationController within, while Transition widgets requires AnimationController to be passed as an argument.

Let's write a widget that changes scale in both class

Implicit widgets

// define variable for Implicit widget
  double implicitScale = 1;

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
        ...
        // Implicit widget
        AnimatedScale(
          scale: implicitScale, // <<< passing variable
          duration: const Duration(seconds: 1),
          child: const Text("Hi, I'm Implicit"),
        ),
        ...
          // change the variable passed to Implicit widget
          onPressed: () {
            if (implicitScale == 1) {
              setState(() => implicitScale = 3);
              return;
            }
            setState(() => implicitScale = 1);
          },
          ...

In Implicit widgets, you pass the variable you want to change (scale in the above example) and duration.

When you change the value of the variable to other value, the widget will animate the widget from starting value to changed value with defined duration.

It's that simple.

Transition widgets

  // define Animation which will be binded to Transition widget
  late AnimationController explicitController;
  late Tween<double> explicitTween;
  late Animation<double> explicitAnimation;

  @override
  void initState() {
    // create Animation for Transition widget
    controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this);
    explicitTween = Tween(begin: 1, end: 3);
    explicitAnimation = explicitTween.animate(controller);
    super.initState();
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:
        ...
        // Transition widget 
          ScaleTransition(
            scale: explicitAnimation, // <<< bind Animation created
            child: const Text("Hi, I'm Explicit"),
          ),
        ...
          // controller Animation class binded to Transition widget
          onPressed: () {
            if (!controller.isCompleted) {
              controller.forward();
              return;
            }
            controller.reverse();
          },
          ...

In Transition widgets, Animation is created from AnimationController and Tween just as previous examples. It is passed as an argument.

Similarly, AnimationController is manipulated to fire the animation.

When to use which?

Now that you know the various classes involved in animation, how do you know which one to use?

It all depends on how complex you want to make your animation.

The following diagram, which is from two years ago, was created by an engineer at Google.

reference：https://www.youtube.com/watch?v=PFKg_woOJmI

The more you go from left to right, the customization freedom and complexity rises.

Explicit widgets in the diagram represents a use case where defining your own AnimationController, Tween, Curve and Animation and wrap them in an AnimationBuilder.

Use Implicit widgets

1.You want to animate to multiple values

Implicit widgets will do a nice job of animating from the current value to the new value you pass in.

You can change the value as many times as you want, as long as you change the value.

This is more flexible than using a Tween where you have to define the end value in advance.

2. For animations that only forwards

Implicit widgets are simpler because you do not need to manipulate the AnimationController. But that means they do not allow for complex operations that can be performed with the AnimationController.

Therefore, it is not possible to "forward and reverse" or repeat animation with a single trigger.

Having said that, Implicit widgets is more suitable to animation that animates from the start value to the end value only once.

Use Transition widgets

1.You want to create complex animations using TweenSequence or Interval

Transition widgets allow you to define your own Animation, so you can freely define a sequential animation using TweenSequence or a chain of animations using Interval.

You cannot define such complex animations with Implicit widgets.

2.You want to do complex animation operations such as repeat

As mentioned above, Implicit widgets can only perform forward operation, so you need to use Transition widgets if you want to perform repeat or forward and reverse animation operations.

Explicit widgets

For more complex animations
In addition to the above, if you want to add multiple animation effects to a widget, it is better to implement in Explicit ways, preparing AnimationController, Tween, Curve and Animation by yourself.
Otherwise you will need to wrap it with multiple Transition widgets, which will reduce readability.

2. You can generate Animation with both drive() and animate()

In my article, I have used the drive method of AnimationController to generate Animation, but you can also generate Animation by passing AnimationController to the animate method of Tween.

In other words, you can generate Animation from both the AnimationController side and the Tween side.

// create with AnimationController.drive
Animation = AnimationController.drive(Tween);

// create with Tween.animate
Animation = Tween.animate(AnimationController);

This was very confusing when learning animations for the first time.

When to use which?

Two methods returns exactly the same result (Animation), so honestly, it doesn't matter whichever you use.

When considering, it should focus on "How many AnimationController and Tween are needed to achieve the desired animation?"

For example, the following code applies multiple animation effects to a single widget

final controller = AnimationController(duration: Duration(seconds: 1),vsync:this);

final alignTween = Tween(begin: Alignment.topCenter,end: Alignment.bottomCenter);

final rotateTween = Tween(begin:0, end: pi *8);

final alignAnimation = alignTween.animate(controller);

final rotateAnimation = rotateTween.animate(controller);

 ...
 AnimationBuilder(
  animation:controller,
  builder: (context, _){
    return Align(
      alignment: alignAnimation.value,
      child: Transform.rotate(
        angle: rotateAnimation.value,
        child: Container(),
      ),
    );
  }
 ),
 ...

In such a case, since there are multiple Tweens for one AnimationController,
using animate method will make it easier to see from which tween, Animation is generated from.

On the other hand, if you want to apply same animation effect to two separate widgets, I would use the drive method of the AnimationController which make it easier to see from which AnimationController, Animation is generated from.

final controllerA = AnimationController(duration: Duration(seconds: 1),vsync:this);

final controllerB = AnimationController(duration: Duration(milliseconds: 500),vsync:this);

final offsetTween = Tween(begin: Offset(0,1), end:Offset.zero);

final animationA = controllerA.drive(offsetTween);

final animationB = controllerB.drive(offsetTween);

 ...
 AnimationBuilder(
  animation:Listenable.merge([
    animationA, 
    animationB,
  ]),
  builder: (context,_){
    return Column(
      children: [
        Transform.translate(
          offset: animationA.value,
          child: WidgetA(),
        ),
        Transform.translate(
          offset: animationB.value,
          child: WidgetB(),
        )
      ]
    );
  }
 ),
 ...

On the other hand, when AnimationController and Tween are one-to-one, you can use either one.

However, the above is just my personal opinion, so you can decide which one to use according to your preference.

3. Similar classes

The existence of similar classes are another reason why animation can be confusing.

For example

AnimationBuilder
TweenAnimationBuilder
Curves
Animation
Tween
CurvedAnimation
CurveTween

As you can see from the names, classes seems to be a combination of one of the main animation players such as Animation, Curve, Tween, etc.

It can easily get confusing understanding the difference and how and when to use which class.

For example, the following codes are written in different ways, but they all achieve the same animation.

Example using CurvedAnimation

final controller = AnimationController(duration: Duration(seconds: 1),vsync:this);

final animation = CurvedAnimation(
  parent: controller,
  curve: const Curve.ease,
);

 ...
 AnimationBuilder(
  animation:animation,
  builder:(context,_){
    return Opacity(
      opacity: animation.value,
      child: Container(),
    );
  } 
 ),
 ...

Example using CurveTween

final controller = AnimationController(duration: Duration(seconds: 1),vsync:this);

final animation = controller.drive(CurveTween(curve:Curves.ease));

 ...
 AnimationBuilder(
  animation:animation,
  builder:(context,_){
    return Opacity(
        opacity: animation.value,
        child: Container(),
    );
  } 
 ),
 ...

Example using TweenAnimationBuilder


 ...
 TweenAnimationBuilder<double>(
  tween: CurveTween(curve: Curve.ease),
  duration: Duration(seconds: 1),
  builder:(context,opacity,_){
    return Opacity(
      opacity: opacity,
      child: Container(),
    );
  } 
 ),
 ...

You would also find some examples which passes AnimationController directly, instead of passing Animation.

final controller = AnimationController(duration: Duration(seconds: 1),vsync:this);

 ...
 AnimationBuilder(
  animation:controller,
  builder: (context,_){
    return Opacity(
      opacity: controller.value,
      child: Container(),
    );
  }
 ),
 ...

Looking at all these different ways of writing animations, it is easy to get confused about how the classes are related to each other.

In such a case, it is recommended to classify each class by what parent class it inherits from.

By looking at the diagram, you would understand that AnimationController sometimes is passed directly as an animation because it inherits Animation. Also, you might understand why CurveTween can be passed as a tween, and why TweenAnimationBuilder doesn't need to be passed when using AnimationController.

Also, since AnimationController has a value that changes from 0 to 1 by default, it can be used as an Animation of Tween(begin:0,end:1), so you can pass it as an animation parameter without having to tie a tween to it. can be used as Animation of (begin:0,end:1).

Sample Repository

https://github.com/heyhey1028/flutter_samples/tree/main/samples/master_animation

That's it!!

Because there are so many different classes, Animations can be overwhelming at first. But if you understanding the things described in this article, I think you will get much familiar with animations.

I hope these series of articles will help you understand animation a little better.

Happy dev life with Animation!!!!

Reference

【Flutter】Mastering Animation ~2. multiple effects and TweenSequence~

heyhey1028💙🔥 — Sat, 12 Nov 2022 13:40:33 +0000

This article is the second in a series of articles on animation.

In vol. 1, we've gone through on some of the basics of animation.

For next step, let us look into more complex animations.

Complex animations can include the following

Multiple animation effects on a single widget at the same time
Sequenced animation on a single widget
A single widget with different animations at different times
Staggered animation for multiple widgets
Animate multiple Widgets separately

Let's look at them one by one

Applying multiple animations on a single widget

In previous article, I have applied only an alignment animation on a single widget, but what if I want to change the alignment while rotating at the same time?

Conclusion: Generate multiple animations from a single AnimationController, and bind them to a Widget

I know I'm jumping to conclusions, but this use case is simple!

Prepare a Tween for each animation effect (position, rotation, color, size, etc.) you want to add, and generate an Animation using that Tween and the AnimationController.

In the following example, a widget has animating position (alignment) and rotation (rotation).

Sample code

class _MultipleEffectState extends State<MultipleEffect>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Tween<Alignment> alignmentTween; // <<< Tween for first animation
  late Tween<double> rotateTween; // <<< Tween for second animation
  late Animation<Alignment> alignmentAnimation; // <<< first animation
  late Animation<double> rotateAnimation; // <<< second animation

  @override
  void initState() {
    controller =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);
    alignmentTween = Tween(
        begin: Alignment.topCenter,
        end: Alignment
            .bottomCenter); // <<< define start and end value of alignment animation
    rotateTween = Tween(
        begin: 0,
        end: 8 * pi); // <<< define start and end value of rotation animation
    alignmentAnimation =
        controller.drive(alignmentTween); // <<< create align animation
    rotateAnimation =
        controller.drive(rotateTween); // <<< create rotation animation
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[300],
        title: const Text('Multiple Effect'),
      ),
      drawer: const MainDrawer(),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, _) {
          return Align(
            alignment: alignmentAnimation.value, // <<< bind align animation
            child: Transform.rotate(
              angle: rotateAnimation.value, // <<< bind rotation animation
              child: const Text('Hello world!'),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward();
        },
        backgroundColor: Colors.yellow[700],
        child: const Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

Sequenced animation on a single widget

In the following use case, the same animation effect is applied to a Widget multiple times while changing its position

For example, if we want a Widget to move in the shape of a rectangle, we need to apply the animation to change position multiple times, first to the right, then to the bottom, then to the left, then to the top, and so on.

We can use TweenSequence class in such cases

TweenSequece class

TweenSequence is a Tween that defines a sequence of changes.

TweenSequence allows you to specify multiple changes by passing an array of TweenSequenceItem, a class that defines how long and what kind of changes you want to make.

tweenSequnece = TweenSequence<T>([
    TweenSequenceItem(tween: Tween(),weight:1),
    TweenSequenceITem(tween: Tween(),weight:1),
    TweenSequenceITem(tween: Tween(),weight:1),
]);

TweenSequence inherits Animatable class, which is the same super class as Tween, meaning it can be handled in the same way as Tween.

So you can generate an Animation using the defined TweenSequence and AnimationController. By binding this Animation to a widget, you can make a widget have an animation that changes multiple times.

animation = controller.drive(TweenSequence([]))

TweenSequenceItem class

TweenSequenceItem is a class that can be passed to TweenSequences. Each classes are defined with what kind of change you want to tween parameter and how long to weight parameter.

TweenSequenceItem(
    tween: Tween(
    begin: const Alignment(-1, 3),
    end: Alignment.topLeft,
    ),
    weight: 2,
)

weight is a ratio of time. It determines how much of the time (Duration) defined in the AnimationController will be allocated for that specific tween.

Like flex in the Flexible class, the Duration divided by the total of the weight is the amount of time that each TweenSequenceItem has.

Sample code

class _SequenceAnimationState extends State<SequenceAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late TweenSequence<Alignment>
      tweenSequence; // <<< define as TweenSequence, not Tween
  late Animation<Alignment> animation;

  @override
  void initState() {
    controller =
        AnimationController(duration: const Duration(seconds: 4), vsync: this);
    tweenSequence = TweenSequence<Alignment>([
      // <<< can take in multiple TweenSequenceItem classes
      TweenSequenceItem(
          tween: Tween(begin: Alignment.topLeft, end: Alignment.topRight),
          weight:
              1 // <<< in this example, duration is 4 seconds, so weight:1 means this Tween will be applied for 1 second
          ),
      TweenSequenceItem(
          tween: Tween(begin: Alignment.topRight, end: Alignment.bottomRight),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: Alignment.bottomRight, end: Alignment.bottomLeft),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: Alignment.bottomLeft, end: Alignment.topLeft),
          weight: 1),
    ]);
    animation = controller
        .drive(tweenSequence); // <<< create Animation just like using a Tween
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green[300],
        title: const Text('Sequence Animation'),
      ),
      drawer: const MainDrawer(),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, _) {
          return Align(
              alignment: animation.value, // <<< simply bind the animation
              child: const Text('Hello world!'));
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward();
        },
        backgroundColor: Colors.yellow[700],
        child: const Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

Sample Repository

https://github.com/heyhey1028/flutter_samples/tree/main/samples/master_animation

what's next?

The remaining three use cases will be described in the following article

A single widget with different animations at different times
Staggered animation for multiple widgets
Animate multiple Widgets separately

https://dev.to/heyhey1028/flutter-mastering-animation-3-interval-and-multiple-tickerproviders-1okf

Reference

【Flutter】Mastering Animation ~1. Basic~

heyhey1028💙🔥 — Sat, 12 Nov 2022 13:38:25 +0000

This article is the first in a series of articles on animation.

In the development of an application, although UI is a must, priority of animation are often kept lower and left out until all other developments are finished. If time and budget is short, it will likely not be implemented.

However, by adding effective animations, the impression of the app will increase dramatically even with the same functionality. And sometimes contributes greatly on the user engagement for the app.

In this article, we will discuss the basics and applications of animation in multiple articles.

Basics of Animation

There are four main players (classes and widgets) in the animation

AnimationController
tween
Curve
animation

In addition to these classes, many other classes are involved, but these four classes are the ones that must be implemented when implementing animation.

You can not go without them when implementing animations.

AnimationController

Manage animation progression with a double type from 0.0 to 1.0.
Responsible for operations such as play, stop and reverse play within this value
brake and accelerator for animation

_controller = AnimationController(
     vsync: this,
     duration: const Duration(milliseconds: 1000),
   )

Tween

Define start and end point types and values
Convert the value corresponding to the current progression to value other than double, such as Offset, Color, etc., depending on the animation you want
Converter for current value that correspond with current progression.

   _tween = Tween<Offset>(
     begin: const Offset(0, -1000),
     end: Offset.zero,
   );

Curve

Tween-transformed values change linearly by default
Curve adds a transformation on the changing curves
Is Applied to Tween
You do not need to use Curve if you prefer linear changes.

   _tween = Tween<Alignment>(
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
   ).chain(
     CurveTween(
       curve: Curves.fastLinearToSlowEaseIn,
     ),
   );

Animation

The animation itself which will be binded to the widget you want to animate.
Created by chaining AnimationController, Tween and Curve.

   _animation = AnimationController(
     vsync: this,
     duration: const    
       Duration(milliseconds: 1000),
   ).drive(
     Tween<Alignment>(
       begin: Alignment.topLeft,
       end: Alignment.bottomRight,
     ).chain(
       CurveTween(
         curve:         
       Curves.fastLinearToSlowEaseIn,
       ),
     ),
   );

in short,

`AnimationController` x `Tween` (x `Curve`) = `Animation`!!!

implementing Animation

Animation is implemented through following steps

mixin StatefulWidget with SingleTickerProvider.
pass the class itself to AnimationController
create a Tween to decide what value to convert to
If you want to change the curve of change, apply Curve.
Create Animation from AnimationController and Tween
bind it to a widget
forward it at any timing

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { // <<< 1. mixin SingleTickerProviderStateMixin to StatefulWidget
  late AnimationController controller;
  late Tween<Alignment> tween;
  final Curve curve = Curves.ease;
  late Animation<Alignment> animation;

  @override
  void initState() {
    controller = AnimationController(duration: Duration(seconds: 3),vsync: this); // <<< 2. Pass this class to AnimationController
    tween = Tween(begin: Alignment.topCenter,end: Alignment.bottomCenter); // <<< 3. Decide animate what value and it's start and end values.
    tween.chain(CurveTween(curve:curve)); // <<< 4. Apply curve effect to Tween
    animation = controller.drive(tween); // <<< 5. Create Animation by AnimationController x Tween
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter app'),
      ),
      body: AnimatedBuilder( 
        animation: animation,
        builder: (context, _){
          return Align(
            alignment: animation.value, // <<< 6. Apply Animation to Widget
            child: Text('Hello world!'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.forward(); // <<< 7. Start Animating by forward!!
        },
        backgroundColor: Colors.yellow[700],
        child: Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

A little explanation

What is `SingleTickerProvider`?

It passes a Ticker class to the Widget that tells the device-specific frame rate.
Ticker tells you how often to redraw the Widget in a given Duration

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  _controller = AnimationController(
     vsync: this,
     duration: const Duration(milliseconds: 500),
   );

Binding an Animation to a Widget

There are two ways to bind an Animation to a Widget.
1) Wrap the Widget in an AnimatedBuilder.
2) Cut it out into custom widget that inherits AnimatedWidget.

AnimatedBuilder

Since AnimatedBuilder inherits from AnimatedWidget behind the scenes, what it actually does is the same, but by wrapping the widget, you can animate widgets without cutting it out as a widget.

animation parameter defines the class that will notify when to redraw the widget, and can be either an Animation or the AnimationController used to create it.

This is because AnimationController receives the redraw timing from TickerProvider via vsync:this.

AnimatedBuilder( 
        animation: animation, // <<< can be AnimationController as well
        builder: (context, _){
          return Align(
            alignment: animation.value, // <<< 6. bind Animation to the widget you want to animate
            child: Text('Hello world!'),
          );
        },
      )

AnimatedWidget

On the other hand, by preparing a customi widget that inherits AnimatedWidget, widget can be cut out. If you want to use an animated widget repeatedly, you can use this method.

As with the animation parameter of the AnimatedBuilder, the listenable parameter is provided to notify when to redraw the widget.

With AnimatedWidget, you have to pass Animation to listenable parameter and not AnimationController because you can only access the argument through getter.

class AnimatingText extends AnimatedWidget {
  const AnimatingText({
    super.key,
    required Animation<Alignment> animation,
  }) : super(listenable: animation);

  Animation<Alignment> get _alignment => listenable as Animation<Alignment>; // <<< arguments can only be accessed through getter after passing it to listenable parameter

  @override
  Widget build(BuildContext context) {
    return Align(
        alignment: _aligment.value, // <<< arguments can't be passed directly
        child: Text('Hello world!'),
    );
  }
}

With either approach, Animation.value tells the Widget the current value.

By wrapping or cutting out the widget you want to animate in either of these ways, you can tell widgets to redraw at the timing of the Animation you passed.

Sample Repository

https://github.com/heyhey1028/flutter_samples/tree/main/samples/master_animation

What's next?

This is the basics of animation. Next, let's try a more complex animation.

https://dev.to/heyhey1028/flutter-mastering-animation-2-multiple-effects-and-tweensequence-3okn

Reference

【Flutter】Mastering Animation ~3. Interval and multiple TickerProviders~

heyhey1028💙🔥 — Wed, 09 Nov 2022 01:19:59 +0000

This article is vol 3 of a series of articles on animation.

`Interval` and multiple `TickerProviders`

In vol 2, we looked at two use cases, and here we will look at the remaining use cases

~~Multiple animation effects on a single widget at the same time~~
~~Sequenced animation on a single widget~~
A single widget with different animations at different times
Staggered animation for multiple widgets
Animate multiple Widgets separately

A single widget with different animations at different times -`Interval`-.

In the vol2 article, I used a TweenSequence to apply sequenced animation of single animation effect to a widget.

Then how can we apply different animations multiple times instead of the same animation effect?

You can use Interval in this case.

`Interval` class

Normally, when an Animation is generated using an AnimationController and tween, value will change by its start value to the end value defined in the Tween, using up entire AnimationController's Duration time.

By using Interval, you can cut out the specified time within the AnimationController's progress (0 to 1) and apply the animation within that time.

How to use it

1. define the start timing (`begin`) and end timing (`end`)

In Interval, the first and second arguments specifies the start and end timing of AnimationController's progress that you want to cut out.

Since the progress of AnimationController is double from 0 to 1.0, the start and end timing is also specified in double value.

For example, if Duration is 4 seconds, Interval with 0 and 0.5 will apply it's Animation from 0 to 2 seconds.

Interval(
    0, // begin
    0.5, // end
    curve: Curves.ease,
)

It also accepts a curve as its third argument, so you can add effects to the changes.

2. bind to `CurvedAnimation`.

When using Interval class, use a class called CurvedAnimation to bind it to AnimationController.

CurvedAnimation is a class that can add curve to animation, but it is mainly used to add curve to AnimationController.

By passing Interval, it creates an Animation that is only applied between its start and end timing.

CurvedAnimation(
    parent: controller,
    curve: Interval(
        0,
        0.5,
        curve: Curves.ease,
    ),
)

3. generate `Animation` using `AnimationController.drive` method

Generate Animation using drive method from AnimationController and bind it with Tween.

Animation = CurvedAnimation(
        parent: controller,
        curve: Interval(
            0,
            0.5,
            curve: Curves.ease,
        ),
    ).drive(Tween);

4. Bind the Animation to the Widget

All that is left to do is to attach the animation to the Widget, just like previous examples.

The Animation class generated with Interval will apply the animation to the Widget only during the defined start and end times.

Which means?

You can use Interval to specify the timing for multiple animations to move at different timing.

class _ChainedAnimationState extends State<ChainedAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Tween<Alignment> alignTween;
  late Tween<double> rotateTween;
  late Tween<double> opacityTween;
  late Animation<Alignment> alignAnimation;
  late Animation<double> rotateAnimation;
  late Animation<double> opacityAnimation;
  bool animateCompleted = false;

  @override
  void initState() {
    controller =
        AnimationController(duration: const Duration(seconds: 4), vsync: this);

    // will apply align、rotation, opacity animation to single widget
    alignTween = Tween(begin: Alignment.topCenter, end: Alignment.center);
    rotateTween = Tween(begin: 0, end: pi * 8);
    opacityTween = Tween(begin: 1, end: 0);
    alignAnimation = CurvedAnimation(
      parent: controller,
      // 1. define start and end timing for Interval
      curve: const Interval(0, 0.5, curve: Curves.ease),
    ).drive(alignTween);

    // 2. bind Interval to AnimationController using CurvedAnimation
    rotateAnimation = CurvedAnimation(
      parent: controller,
      curve: const Interval(0.5, 0.7, curve: Curves.ease),
    ).drive(rotateTween);

    // 3. create Animation by AnimationController x Tween
    opacityAnimation = CurvedAnimation(
      parent: controller,
      curve: const Interval(0.7, 1, curve: Curves.ease),
    ).drive(opacityTween);

    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red[300],
        title: const Text('Chained Animation'),
      ),
      drawer: const MainDrawer(),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, _) {
          return Opacity(
            opacity: opacityAnimation
                .value, // <<< 4. bind animation created using Interval
            child: Align(
              alignment: alignAnimation.value, // <<< 4.
              child: Transform.rotate(
                angle: rotateAnimation.value, // <<< 4.
                child: const Text('Hello world!'),
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (!animateCompleted) {
            controller.forward().whenComplete(() {
              setState(() => animateCompleted = true);
            });
            return;
          }
          controller.reverse().whenComplete(
            () {
              setState(() => animateCompleted = false);
            },
          );
        },
        backgroundColor: Colors.yellow[700],
        child: const Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

Staggered animation of multiple widgets

Animations which animate in staggered manner is called staggered animation

This staggered Animation can also be implemented using Interval!

In conclusion, all you have to do is, create an Interval that defines the timing of each widget's movement, and attach the generated Animation class to each widget.

The only difference with the previous use case is that you are binding Animation to different widgets.

class _StaggeredAnimationState extends State<StaggeredAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Tween<Offset> offsetTween;
  late Animation<Offset> offsetAnimation1;
  late Animation<Offset> offsetAnimation2;
  late Animation<Offset> offsetAnimation3;
  bool animateCompleted = false;

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 1500), vsync: this);

    // prepare single Tween that would be applied to all of the Animations
    offsetTween = Tween(begin: const Offset(-1000, 0), end: Offset.zero);

    offsetAnimation1 = CurvedAnimation(
      parent: controller,
      // 1. define start and end time for each Intervals
      curve: const Interval(0, 0.3, curve: Curves.ease),
    ).drive(offsetTween);

    // 2. bind Interval to AnimationController using CurvedAnimation
    offsetAnimation2 = CurvedAnimation(
      parent: controller,
      curve: const Interval(0.3, 0.7, curve: Curves.ease),
    ).drive(offsetTween);

    // 3. create Animation from AnimationController and Tween
    offsetAnimation3 = CurvedAnimation(
      parent: controller,
      curve: const Interval(0.7, 1, curve: Curves.ease),
    ).drive(offsetTween);

    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple[300],
        title: const Text('Staggered Animation'),
      ),
      drawer: const MainDrawer(),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, _) {
          return Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(vertical: 200, horizontal: 60),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Transform.translate(
                  offset: offsetAnimation1
                      .value, // 4.  bind Animation created with each Interval
                  child: const Text('Hello world!'),
                ),
                Transform.translate(
                  offset: offsetAnimation2.value, // 4.
                  child: const Text('My name is ...'),
                ),
                Transform.translate(
                  offset: offsetAnimation3.value, // 4.
                  child: const Text('heyhey1028!!'),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (!animateCompleted) {
            controller.forward().whenComplete(() {
              setState(() => animateCompleted = true);
            });
            return;
          }
          controller.reverse().whenComplete(
            () {
              setState(() => animateCompleted = false);
            },
          );
        },
        backgroundColor: Colors.yellow[700],
        child: const Icon(
          Icons.bolt,
          color: Colors.black,
        ),
      ),
    );
  }
}

You can adjust the start and end timing defined in Interval to control how far apart the chain moves.

Animate multiple Widgets separately

In the previous examples, a single AnimationController handled multiple widgets or animation effects

So by forwarding that AnimationController, all animations moved at the same time. But what if you want to move multiple animations separately?

Using TickerProviderStateMixin

In these cases, you need to prepare multiple AnimationControllers

However, SingleTickerProviderStateMixin we have been using until now do not allow us to generate multiple AnimationControllers.

In these cases, you can mixin TickerProviderStateMixin, which can supply multiple TickerProviders, to State class.

Use `Listenable.merge`

Another point is to use Listenable.merge on the animation property of the AnimatedBuilder.

When there are multiple AnimationControllers like this one, the AnimatedBuilder needs to monitor the state of all of them and redraw the child widgets, so use Listenable.merge to make the AnimationController into a single class

//  mixin TickerProviderStateMixin that could provide multiple tickers
class _MultipleTickerProviderState extends State<MultipleTickerProvider>
    with TickerProviderStateMixin {
  // to animate separately, prepare a multiple AnimationControllers
  late AnimationController alignController;
  late AnimationController rotateController;
  late TweenSequence<Alignment> alignTween;
  late Tween<double> rotateTween;
  late Animation<Alignment> alignmAnimation;
  late Animation<double> rotateAnimation;
  bool animatingAlign = false;
  bool animatingRotation = false;

  @override
  void initState() {
    // define duration and vsync for each AnimationController separately
    rotateController = AnimationController(
        duration: const Duration(milliseconds: 1500), vsync: this);

    alignController =
        AnimationController(duration: const Duration(seconds: 3), vsync: this);

    // define Tween for each Animation
    rotateTween = Tween(begin: 0, end: 8 * pi);
    alignTween = TweenSequence<Alignment>(
      [
        TweenSequenceItem(
          tween: Tween(
            begin: Alignment.center,
            end: Alignment.topCenter,
          ),
          weight: 0.3,
        ),
        TweenSequenceItem(
          tween: Tween(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          weight: 0.4,
        ),
        TweenSequenceItem(
          tween: Tween(
            begin: Alignment.bottomCenter,
            end: Alignment.center,
          ),
          weight: 0.3,
        ),
      ],
    );

    // create Animation using each AnimationController
    alignmAnimation = alignController.drive(alignTween);
    rotateAnimation = rotateController.drive(rotateTween);

    super.initState();
  }

  @override
  void dispose() {
    rotateController.dispose();
    alignController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.brown[300],
        title: const Text('Multiple Ticker Provider'),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: const MainDrawer(),
      body: AnimatedBuilder(
        // wrap Animations with Listenable.merge to listen to multiple animation
        animation: Listenable.merge([
          rotateController,
          alignController,
        ]),
        builder: (context, _) {
          return Stack(
            fit: StackFit.expand,
            children: [
              Align(
                alignment: alignmAnimation.value, // bind animation to widget
                child: Transform.rotate(
                  angle: rotateAnimation.value,
                  child: const Text('Hello world!!'),
                ),
              )
            ],
          );
        },
      ),
      // trigger multiple AnimationControllers separately
      floatingActionButton: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: () {
                if (!animatingAlign) {
                  alignController.repeat();
                  setState(() => animatingAlign = true);
                  return;
                }
                alignController.stop();
                setState(() => animatingAlign = false);
              },
              heroTag: 'align',
              backgroundColor: Colors.yellow[700],
              child: const Icon(
                Icons.double_arrow,
                color: Colors.black,
              ),
            ),
            const SizedBox(width: 20),
            FloatingActionButton(
              onPressed: () {
                if (!animatingRotation) {
                  rotateController.repeat();
                  setState(() => animatingRotation = true);
                  return;
                }
                rotateController.stop();
                setState(() => animatingRotation = false);
              },
              heroTag: 'rotate',
              backgroundColor: Colors.yellow[700],
              child: const Icon(
                Icons.cyclone,
                color: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Sample Repository

https://github.com/heyhey1028/flutter_samples/tree/main/samples/master_animation

That's it!!

I have explained five use cases for complex animations. I believe that many complex animations can be implemented by combining these use cases as a basis.

After going through examples, you might have understood that animation is quite straight forward.

What's next?

However, when you actually start implementing animations, often times, you feel overwhelmed.

In the next article, we will discuss why animation can get overwhelming easily.

https://dev.to/heyhey1028/flutter-mastering-animation-4-the-confusing-parts-of-animations-3cp3

DEV Community: heyhey1028💙🔥

【Flutter】Mastering Animation ~4. The confusing parts of animations~

The confusing part of animations

1. there are AnimatedXXX and XXXTransition

ImplicitlyAnimatedWidget and AnimatedWidget

How are they different?

When to use which?

Use Implicit widgets

Use Transition widgets

Explicit widgets

2. You can generate Animation with both drive() and animate()

When to use which?

3. Similar classes

Sample Repository

That's it!!

Reference

【Flutter】Mastering Animation ~2. multiple effects and TweenSequence~

Applying multiple animations on a single widget

Sample code

Sequenced animation on a single widget

TweenSequece class

TweenSequenceItem class

Sample code

Sample Repository

what's next?

Reference

【Flutter】Mastering Animation ~1. Basic~

Basics of Animation

AnimationController

Tween

Curve

Animation

AnimationController x Tween (x Curve) = Animation!!!

implementing Animation

A little explanation

What is SingleTickerProvider?

Binding an Animation to a Widget

AnimatedBuilder

AnimatedWidget

Sample Repository

What's next?

Reference

【Flutter】Mastering Animation ~3. Interval and multiple TickerProviders~

Interval and multiple TickerProviders

A single widget with different animations at different times -Interval-.

Interval class

How to use it

1. define the start timing (begin) and end timing (end)

2. bind to CurvedAnimation.

3. generate Animation using AnimationController.drive method

4. Bind the Animation to the Widget

Which means?

Staggered animation of multiple widgets

Animate multiple Widgets separately

Using TickerProviderStateMixin

Use Listenable.merge

Sample Repository

That's it!!

What's next?

Reference

`AnimationController` x `Tween` (x `Curve`) = `Animation`!!!

What is `SingleTickerProvider`?

`Interval` and multiple `TickerProviders`

A single widget with different animations at different times -`Interval`-.

`Interval` class

1. define the start timing (`begin`) and end timing (`end`)

2. bind to `CurvedAnimation`.

3. generate `Animation` using `AnimationController.drive` method

Use `Listenable.merge`