Titles:
- What are Animation Types?
- The Importance of Animations in Our Application
- About Physics-based Animation
- What Are Tween Animations?
- How Tween Animations Work
- What Are Implicit Animations?
- What is ImplicitlyAnimatedWidget?
- What are Curves? How does it work?
- How to Make Custom Implicit Animation?
- What are Explicit Animations?
- Some Explicit Animation Examples
- What is TickerProvider? (SingleTickerProviderMixin&TickerProviderMixin)
- How Does Animation Controller Work? (Status states etc.
- What is an Animatable class?
- What classes are animable?
- What is ‘evaluate’? What is ‘chain’?
- What is AnimatedWidget and how does it work?
- What is AnimatedBuilder and how does it work?
- How to Make Sequential Animation? (TweenSequence,Interval)
- Explicit Animations Things To Remember
- What is timeDilation?
- Package Suggestions
- References
In this article, we will try to learn the topics that I have kept a wide range of topics above.
At the end of this article, you will know which structure you should use in animation-related structures or challenges you want to do. Let’s start…
The biggest goal of all of us is to be able to produce readable, clean, and beautifully constructed codes. No matter how important these goals are if we do not use any material design patterns in our user interface layer.
If we do not support it with animations, unfortunately, user feedback is not heartwarming. For this reason, we can obtain useful and eye-pleasing applications by applying a material design pattern and supporting it with some animations.
What are the types of animation in a flutter, which is our first topic?
When we say animation in Flutter, two topics should come to mind, these are as follows;
- Tween Animations
- Physics-based Animations
I would like to briefly talk about physics-based animations. You can think of this kind of animations as more real-life simulations. Let’s imagine now.
When you release a ball from above, it starts to fall and accelerate as a result of physics rules. It falls and rises again after its first contact, but rises slightly less than the first dropped height. It then falls off and rises a little higher again. If you want to make this kind of animation, you should think of the title of the physics-based animation in a Flutter.
What are Tween Animations?
If you are not going to make physics-based animation in Flutter, the next topic, Tween Animations, should come to your mind. Tween Animations are animations we can make between two values. How so? Yes. You got it right. We can perform animation with the values presented to us between two values. Animations are just our imagination that we can do between two values.
Tween Animations are divided into two structures. We divide these structures into two according to their customizable and manageable features. These structures are as follows;
- Implicit Animations
- Explicit Animations
What are Implicit Animations?
Implicit animations are very easy to integrate and have limited customization. It is easier to manage than explicit animations. Widgets derived from the ImplicitlyAnimatedWidget abstract class.
These widgets are included in the SDK(Software Development Kit) by the Flutter team. Well.
What is ImplicitlyAnimatedWidget?
This is an abstract class. When we implement from this class, this class creates Animation Controller in its own state. (I’ll talk to the Animation Controller in a moment) The animation controller created by the class is a management mechanism and I will not talk about it now, we will deal with this issue in detail in the future. It takes over its management and allows you to use only classes derived from this class, namely widgets, without ever entering administrative events.
What are the types of widgets derived from ImplicitlyAnimatedWidget? (i.e. implicit animation approaches)
- Align -> AnimatedAlign
- Container -> AnimatedContainer
- Opacity -> AnimatedOpacity
- Padding -> AnimatedPadding
- Positioned -> AnimatedPositioned
- PositionedDirectional -> AnimatedPositionedDirectional
- DefaultTextStyle -> AnimatedDefaultTextStyle
- PhysicalModel -> AnimatedPhysicalModel
I want to point out a situation right away. What you need to pay attention to here is that the prefix ‘Animated’ comes to the beginning of the widgets we always use. What does this mean? Widgets extend from ImplicitlyAnimated Widget are included in a naming case. If you do Implicit Animations in the future, you should pay attention to this issue in naming.
Also, these implicit widgets are just some of them. If you want to access all of them, I added the Implicitly AnimatedWidget API link in the bibliography, you can access them from there.
Above, I created a sample code structure for an implicit widget. What you should note here is that there will be no animation when the page is first opened.
Implicit widgets only reveal animations when the content changes and the screen is refreshed.
When I click on the button named ‘Change Opacity’ that you see in the code sample I added, the _opacity value of 0 will be 1 and it will make the container visible in an animated way as the screen is refreshed and its content changes. Animation transitions are determined by the interpolation value calculated over 2 seconds (because we set a 2-second duration parameter).
Actually, that’s all I’m going to tell you about implicit animations. As I said when I started to introduce Implicit animations, they are animation types that are low to customize and easy to integrate.
What is the Curve, which is another topic?
Curves control the rate of change over time. So what do I mean, let me explain a little more.
I will try to explain the curve from this image I added. The curve name in this image above is called ‘bounceIn’. Dozens of curve types have been included in SDK by the Flutter team. Of course, you can also create your own curve using sine calculations.
First of all, the first parameter required for animation is duration. For example, let’s say we give it as 1 second. Values like 0.1,0.123,0.5… between 0–1 seconds start flowing for an animation to flow towards 0 -> 1. We also use these values by processing them with animatable classes. As a result, we make animations.
These resulting values are called interpolation calculations. We animate animable classes with the resulting interpolation values according to the curve you use and the duration you give.
In the image named ‘curve example’ that I added above, we see the interpolation value calculated towards the top while the time is flowing to the right.
As the time flows to the right, the x value increases slightly and falls back to 0. Then it rises a little higher than the previous one and falls back to 0. A curve that continues like this. Let’s imagine what happens when we create animation with this curve.
Let’s think of a container that goes up in 1 second in an animated way from the bottom of the phone screen to the top. This container normally ascends slowly. What will happen if we use this curve? It will go up in 4 stages.
1- It will go up a little and return to the starting point again.
2- It will go up a little more than the previous one and return to the starting point again.
3- It will go up a little more than before and return to the starting point.
4- From the start point to the endpoint, that is, it will reach the top of the phone animatedly.
This curve example we used turned it into an animation consisting of 4 phases.
Animation video of the image above: https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4
If you want to review all-ready-made curve examples, I added the curve API link in the references.
In this code structure, I included a curve in the implicit widget.
I included the curve named ‘bounceInOut’ in the Curves that the flutter team included in the SDK in the curve parameter of the widget named AnimatedContainer.
What is TweenAnimationBuilder?
As you can see in the image above, when we move to the right from the implicit animations, we see that our customizable possibility increases and its management becomes more difficult. The simplest conclusion we can get from this image is that we should use implicit animation types as much as we can. If implicit animations are not enough, we should not go directly to explicit animation types! Because we can create our own implicit animation with TweenAnimationBuilder, which is a little more manageable but implicit widget.
- As you know, implicit widgets reveal animations when the data inside is changed and the screen is updated, not with the first run. The animations you create in this style work with the opening of the screen, that is, the first trigger of the build method.
- It is important to remove non-animatable widgets from the builder so that there is no performance problem!
- An animation running with TweenAnimationBuilder won’t start over if a new end value is set before it’s finished and the screen is updated. It starts working from the last value to the value it has just assigned.
We should pay attention to the point I mentioned in the comment line above. I want to explain some methods.
- tween: We add an animatable object here, and we can use the return value of this object in the builder method. (I will talk about Animatable objects)
- onEnd: Runs when the animation is finished.
- duration: Here you define how long you want the animation to last.
- child: You should define the widget that you don’t want to be regenerated all the time.
- builder: Animatable (Tween) object we defined is managed inside the class and animation is created. A method that returns the data returned from the animation, the child we defined above, and the context. This method will run whenever the animation value changes.
I tried to explain how you can use TweenAnimationBuilder item by item. As you can see, there are no very complex situations for implicit animations. That’s all I’m going to tell you about Implicit animations.
I also prepared a demo about TweenAnimationBuilder. Click here.
What are Explicit Animations and How Do They Work?
In the image above, we are now closer to the right :)
Explicit animations are animation types that are difficult to integrate and freer to manage than implicit animations. They are managed by the AnimationController (I’ll explain in a moment).
Explicit animations can actually be divided into two. These are widgets called *Name*Transition, which we created from scratch and come included in the SDK.
Examples of preformed explicit animation;
- SizeTransition
- FadeTransition
- AlignTransition
- ScaleTransition
- SlideTransition
- RotationTransition
- DecoratedBoxTransition
- DefaultTextStyleTransition
- RelativePositionedTransition
Let’s make a demo;
I have prepared a DartPad for you to experience, click here.
What is AnimationController? How does it work?
Before explaining the types of Explicit Animation transitions, I would like to briefly talk about AnimationController.
AnimationController controls animation such as total animation time, start/stop/reverse animation, and lets everyone know the state of animation through the listener. The AnimationController class uses a Ticker (I’ll talk about it soon) to scroll through the animation it controls.
If you have decided to use an AnimationController, you should be familiar with some methods and situations. One of these situations is memory management.
I said that every animation controller you create is bound to a ticker. These tickers provide callbacks per frame and allow us to see the animation on the screen.
If you do not release the ticker that this animation controller is connected to when you exit the screen, it will continue to consume. Memory usage explodes your application after a certain point and bad user comments come… We don’t forget to clean every animation controller you create from memory with the dispose method!
Also, if we add a listener, you should even remove it. (It’s troublesome and if you think you’ll forget it, you should try to solve it using implicit widgets :) )
Commonly used AnimationController methods;
- forward -> Starts running the animation forward (towards the end).
- reverse -> Starts to run the animation in reverse (to the starting).
- stop -> It stops running the animation.
- repeat -> It starts running the animation in the forward direction and restarts the animation when it’s complete. (If the reverse parameter is true, it can be looped back and forth.)
- dispose -> It clears the resources it uses (ticker etc.) from memory and the controller becomes unusable.
You can bind the animation controls you created to an animable object, which I will explain shortly. When you bind the object, the animation controller creates a new animation from the animatable object you have connected and becomes ready to generate values.
There is no limit of animable objects you can bind to AnimationController. (Remember that you will be managing them all through a single controller!)
AnimationController status states;
- AnimationStatus.forward -> The animation is running from beginning to end.
- AnimationStatus.completed -> The animation is stopped at the end.
- AnimationStatus.reverse -> The animation is running backward, from end to beginning.
- AnimationStatus.dismissed -> The animation is stopped at the beginning.
What is Ticker? What is TickerProvider?
I just talked about the use of animation controller and one of the first sentences is ‘animation controller binds to a ticker’. What is this ticker?
TickerProvider is actually an abstract class and its purpose is to host interfaces that enable ticker creation. A class derived from this class is responsible for creating a ticker.
Ticker is a class that offers per-frame callbacks managed by SchedulerBinding.
What Are Animatable Classes? When Do We Use?
An object that can produce a value of type T given an Animation<double> as input.
Let me add a dictionary-style comment: Animable classes that offer a linear interpolation between the start and end value. They are managed by the AnimationController.
Let’s look at the classes implemented from the Animatable class;
Since ‘Tween’ implements an animatable class, it becomes an animation class ready to be managed by AnimationController. When we make Tween<double> and animate with animation controller, an animation returns and the value of the animation object starts to flow according to the interpolation value calculated in double. Animatable classes are just that.
Some methods of the Animatable class;
- animate: Returns a new Animation that is driven by the given animation but that takes on values determined by this object
- evaluate: The current value of this object for the given Animation.
- chain: Returns a new Animatable whose value is determined by first evaluating the given parent and then evaluating this object.
- AlignmentGeometryTween
- AlignmentTween
- BorderRadiusTween
- BorderTween
- ColorTween
- IntTween
- SizeTween
You can find these and more from the Tween API link I’ve added to the references.
I mentioned some Transition widgets above. These are explicit widgets and expect animation objects from you. It performs the related animation according to the animation object you provide. If we want to make a more customized animation of our own, some tool widgets are made for us. Let’s get to know them…
- AnimatedWidget : It is a widget that we use when your code gets too complicated due to animations or when we want to make our own transition animations.
- AnimatedBuilder: With AnimatedBuilder, we take on all the management! We can make more performance animations by updating only the widgets that we want to be updated.
Let’s look at a code structure without AnimatedWidget;
As you can see, I created an Animation Controller and made its definitions to the relevant explicit transition widgets. When I clicked on it, I started the animation with the forward method.
I have created dartpad for you to know by experience. Please click.
Let’s see how the sample code I mentioned above is with the animated widget;
As you can see, we are creating a special class for ourselves, and since we do our animations in that class, our codes are more readable and manageable on the screen.
I have created dartpad for you to know by experience. Please click.
Let’s look at the next helpful widget, the Animated Builder widget;
The first thing we need to pay attention to here is that the child inside the builder is imported. The per frame builder can be triggered as the animation continues. In this case, if the container is added directly instead of child, it will be constantly rebuilt. That’s a waste of memory consumption. We don’t want this!
With AnimatedBuilder, we can use it to make much more useful, performant and complex animations. Animated builder offers you the animation you want by constantly renewing the builder method according to the animaton class you define. In this way, you only update the places you want.
I have created dartpad for you to know by experience. Please click.
If you think everything is ok so far, you know a lot of base structures needed to make animations. Now you know 90% of what animation topic or challenge you should use.
Next up is a 10% slice. So what does this slice include?
What are Staggered Animations? How does it work?
When you start making a sequential animation, you will realize that you need to think about it :). I want to add a sequential animation example right away.
The like animation you see above is an example of sequential animation.
There are many packages for sequential animation, but there are 2 native structures you need to know. These are as follows;
- TweenSequence
- It can be done with the interval value of the animatable class CurveAnimations
I have created dartpad for you to know by experience. Please click.
TweenSequence Code Example;
It takes an animatable class called TweenSequence and a list of its contents. It expects a class named TweenSequenceItem that takes a T type parameter inside the list.
One of the things you need to pay attention to here is that you should create items with the list t parameter type you specified. As you can see in the above example, we specified ‘<TweenSequenceItem<double>>’ double t type and every item T Type value in the list must be double.
You need to set the TweenSequenceItem weight value on a percentage basis. For example, if the animation duration is 1 second and you add a weight value of 40 to the item, we add a TweenAnimation that should take 40%, that is, 0.4 seconds.
Animatable objects that you add from top to bottom become animate…
How to make sequential animation with Interval?
Here are some issues that we should pay attention to. The interval value must be between 0 and 1. Your animation progresses within the range of values you add between 0 and 1. For this, I want to place the image below again.
In fact, that’s what sequential animations were. That’s all I’m going to tell you about sequential animations at the beginner level.
I tried to explain with examples as much as possible. As you can see, the most complex parts were explicit animations. But it was fun with Flutter :)
Explicit Animations Things we should not forget;
- We do not forget to clean the animation controller you created from memory! (dispose method) (Pay attention to the image below)
- We don’t forget to remove fixed widgets from the builder to prevent them from being rebuilt! (Pay attention to the image above)
- If an animation controller is to be used, we do not forget to choose SingleTickerProviderMixin!
timeDilation: You can adjust the speed of the animations you create in the development environment. As the TimeDilation value increases, the animation starts to become slow motion.
I would like to suggest some packages that will take care of your development and memory management in the background.
- Hero Animations: This animation comes with the SDK, it allows some items to be transferred in an animated way during page transitions.
- Hooks: With this package, you can simplify memory management. (Not just animation controller, like scroll controller etc.)
- Flutter Sequence: It allows you to make simpler and more useful sequential animations.
- Simple Animations: It has very nice features…
- Entry: I can say it is the easiest way to make widgets visible.
- Spring: A kind of collage package is made from the most used animation types. With this package, you can add animations that we call pre-build, which are very fast and manageable.
That’s it for animations in Flutter. It was a really long article, maybe it would have been better if I made it chapter by chapter. I wanted to explain the whole animation structure in one go, it was an article that I really put more effort than I expected! :)
In general, if you fully understand what I want to say, there is no one really happy with me!
If there is something you don’t understand or I have a wrong word, please send a comment or don’t forget to contact me via linkedin. :)
Note that we could also simply animate using packages. But if we don’t know the background structures, we’re just roteing!
You can find the Github repo where I created examples for this article here: https://github.com/SalihCanBinboga/flutter_festival_demo
If you want to make more acrobatic, complex animations, I recommend this article...
References:
