Implicit Flutter Animations

Let’s take a look at this animation: If you notice, the slide animation animates linearly. Which means it increases at a steady rate and does not really mimic a real world movement.

Now, imagine if this was a car we were animating, cars don’t just stop abruptly. Thats against the laws of physics and remember, our goal is to always create believably animations.

To create visually appealing and believable animations you have to try to follow by some principles or guides. Most animations try to reflect real world effects and many on these depends on physics. With that in mind, Disney created the “12 Principles of Animation:”

1. Squash and stretch
2. Anticipation
3. Staging
4. Straight ahead action and pose to pose
5. Follow through and overlapping action
6. Slow in and slow out
7. Arc
8. Secondary action
9. Timing
10. Exaggeration
11. Solid drawing
12. Appeal

The principles were mainly created for cartoons but can be applied to apps for better UX. Some of these principles require that we have full control over the animation and Implicit animations doesnt give us full control over the animation. Explicit animations would be a great candidate to fulfil the entire list.

But like i mentioned earlier, it all depends on the type of animation you want to create. As you’ll see in this course, visually appealing animations can be created with implicit animation. For this episode, we’ll focus on the Arc principle. This principle if implemented well, can help us achieve some of the other principles.

It simply states that all natural movements travels in an arc. For example, when you throw a ball into the sky, it doesnt travel at constant speed. It starts fast, then at some point in the air, the it decelerate and finally, it speed up on its journey back to the ground.

The rate at which it travels is not constant and as a result it creates an arc in its speed distribution. Every natural object travels in an arc except the movement is mechanical.

To control the rate of change of a motion, we use curves. A Curve control how fast or slow an animation progresses during its journey. This helps us create more realistic animations by changing the speed of the animation at various points.

Normally, animations goes from 0.0 to 1.0. so curve must start at 0.0 and end at 1.0 of the animation. This means that no matter how much the curves affects our animation, it must never be below or above the specified target at the start and end of the animation. Flutter provides for us many readily available curves via the Curves class.

Back in VSCode, the widget to used to create the slide animation is the AnimatedPositioned which is simply the animation version of Positioned widget. In here, we use the button property to trigger the animation and we offset it with the bottom via setState. Now, let’s go ahead and set some curves:

AnimatedPositioned(
    ...
    curve: Curves.bounceOut
    ...
)

In here, I changed the curve from the default linear curve to the bounceout curve. If we trigger the animation, we can see that the box bounces out. We can also use easeIn curve:

AnimatedPositioned(
    ...
    curve: Curves.easeIn
    ...
)

And I’ll do a hot restart. And if we play it, the animation slow at the beginning and speeds it up towards the end. Now the next curve, I’ll use would be simulating a moving car:

AnimatedPositioned(
    ...
    curve: Curves.easeInOutQuint
    ...
)

The easeInOutQuint curve stars slow, speeds up at the middle, and also end slow. This could be used to simulate a moving car. So, if I play the animation we can see that in effect. We could also apply the curve to the previous animation we created earlier:

...
bool _showBox = false;
...
body: Center(
    child: AnimatedContainer(
        duration: const Duration(milliseconds: 1000),
        curve: Curves.bounceOut,
        width: _showBox ? 200 : 100,
        height: _showBox ? 200 : 100,
        color: _showBox ? Colors.orange : Colors.green,
    ),
)

This time around we’re using a bounceOut curve. And when we play the animation, the box bounces out. And it always returns to the final stopping point which is 1.0, which maps to the end value of the animation. So, a curve simply simply contols the “rate” at which the animation progresses over the duration of the animation. To get a visual feel of how the Curves class affect the animation, let’s head over to its documentation.

[Browser Window] Curves Page

Here you have different curves. Playing them shows how the animation progresses from 0.0 to 1.0 lifespan of an animation. By the side, you have a visual feel of how each curve affects different animation effects.

Some curves extend beyond its bounds during the course of the animation. This is common with elastic curves.(search and scroll to them).

They can be used to create exaggerated effects but must always start at 0.0 and end at 1.0 As you can see, using the right curve for an animation can make our motions more realistic and when these curves don’t get the job done, you can always create custom curves by extending the Curve class. I’ll leave you to try out different curves to see how they affect the journey of your animations.