This paper mainly introduces the principles and concepts of Flutter animation, makes a brief review of animation on other platforms, and briefly introduces some knowledge of Flutter animation.

1. Animation introduction

Animation is very important for App. A lot of apps, it is because of animation, so they feel cool. There are many animation libraries on mobile, such as Pop on iOS, Animate. CSS on web, AndroidViewAnimations on Android, Lottie on cross-platform, etc. Thanks to these packaged animation libraries, it’s much easier to create cool effects. Of course, these libraries are based on the platform of the basic animation API implementation, the author today is going to talk about, that is, the basic animation and behind the principle.

1.1 The nature of animation

Animation, as the name suggests, is a moving picture. Why did the picture move? Before we answer that question, let’s introduce a concept.

When the human eye is observing the scene, the light signal is transmitted into the brain nerve, which needs to pass through a short period of time. After the effect of light, the visual image does not disappear immediately. This residual vision is called “afterimage”, and the phenomenon of vision is called “visual persistence”.

Visual retention is regarded as one of the most important theoretical foundations of film. The animation we see is actually composed of a series of pictures, but it is played at a very fast speed. Before the next picture comes out, the human eye still retains the vision of the last picture, which looks like it is playing this series of pictures without interval, which is also called animation.

1.2 Related Concepts

Animation will have many related concepts, understanding these concepts, will be more helpful in practical use.

1.2.1 frame

Just now, when introducing the nature of animation, I used the word picture, just for the convenience of readers to understand. This picture is called frame in academic terms.

A frame is a single image picture with the smallest unit in the image animation, and a frame is a still picture.

Frames are divided into key frames and transition frames. These two concepts are the basis for understanding some animations, such as tween animation in Android. In some scenarios, we may not show all the frames of an animation, so split the frames into keyframes and transition frames. The key frame can be understood as the initial state of an animation, while the transition frame is the part inserted between the key frames automatically completed by the system.

As we know, there are four basic types of tween animation in Android: pan, zoom, rotate and transparency. When we set the animation, we usually only set the initial state, that is, the key frame. In fact, we do not need to consider the intermediate process. If we pay attention to the animation speed, we can add a differentiator to control it, but we do not provide the intermediate generated frame.

Why can the system complete the transition frames? If we look at the four basic types of animation, given the initial state, the intermediate state we can actually compute, and that’s why the system is able to complement.

Are these the only four types that can fill transition frames through the system? Obviously not. For example, if an animation jumps forward, add some constraints and you can deduce the intermediate state. The system provides only four common ones, not only these four, but most of the animation can be achieved through these four combinations. Of course, there are certainly some things that cannot be achieved. In this case, one way is to draw them on canvas.

In addition, the Android system provides four kinds of animation operations, which is also the reason why the transformation matrix is four dimensional, but I won’t go into the details, the previous article has also introduced.

In the last sentence, I explain the concept of frames here, taking a lot of Knowledge related to Android to explain, just hope that readers can understand some unknown through some known concepts. The principle of animation is the same, specific to a platform, may be implemented or called differently.

1.2.2 Frames and FPS

A lot of people used to play book corner animation when they were kids. In the corner of the book or book, draw a picture on each page, and then dial the corner of the book, different speed dial, the animation experience is different, the faster the animation is smooth. Why is that? This comes down to frames and FPS.

Frames, the number of frames. Frame per Second (FPS) refers to the number of frames displayed per Second.

What do these two concepts, primarily the FPS, do? This is because of the physiology of the human eye. The residual mirror image of the human eye is limited time, if after this time, the next frame has not changed, it will feel not smooth. But bigger frames aren’t always better, because the human eye has its limits.

1.2.3 interpolator

If animation continues at this constant speed all the time, the presentation will be too monotonous. How to achieve non-linear animation effects, this time you need to use interpolators.

An interpolator is not really complicated, just a mathematical function that sets the behavior of a property value from an initial value to an end value. Each platform has its own set of interpolators that developers can choose from, as well as a custom interface that is essentially a Bessel function.

A uniform interpolator is as follows:

Attribute value percentage = Time percentageCopy the code

1.3 How To Implement it

The basic principles of animation and some basic concepts have been introduced, now to talk about the implementation of animation.

Put aside the various rendering optimizations at the system level first, and just take the tween animation as an example. Assuming that a simple animation framework is implemented based on the existing mobile platform, how to achieve it?

Take Android as an example, to achieve the four basic tween animations of pan, scale, rotation and transparency, it can be seen that these animations are based on a certain attribute, pan is based on point, scale is based on scale, rotation is based on Angle and transparency is based on alpha.

Combined with the interpolator, a general animation class is extracted. The function of this class is to get the state of the property change at a certain point in time according to the interpolator.

Now that the states at each point in time are in place, all that remains is for the states to render. The underlying mechanics are not discussed here, but a timer is needed to render the material to the screen at regular intervals.

At this point, a simple animation framework comes out. If you’re familiar with each platform, you know I’m talking about view animation. Real animation engines are not that simple, and the technology involved is more complex, but the general idea is not wrong. No matter what kind of animation, it’s a sequence of frames related to time, just implemented differently.

This is why the author spends so much time to introduce the concepts related to animation. After knowing some underlying principles, no matter what platform or how to implement it, the underlying ideas must be the same, but the implementation is different.

2. Animations for other platforms

Flutter animation, compared to other platforms like Android and iOS, is nothing special in itself. The basic principles are the same, but the types of offerings and implementation are different.

2.1 the Android animation

Android animation, there are two major categories:

  • View Animation
  • Property Animation

View animations fall into two categories:

  • Tween Animation
  • Frame Animation

What’s the difference? They differ only in implementation

  • Tween animation is based on the initial state, the system automatically supplemented the intermediate state;
  • Frame-by-frame animation requires us to provide each frame;
  • View animation only works on the view and does not change the properties of the control.
  • Property animation actually changes the properties of the control.

You can see that Android animation classification is relatively clear.

IOS 2.2 animation

IOS has not been done for a long time. Here, it is also said simply. If it is wrong, please correct it.

  • An implicit animation
  • Explicit animation

Explicit animation can be divided into two categories:

  • Based on the animation
  • Keyframe animation

What are the differences between these animation categories?

  • Implicit Animation, as the name implies, does not specify the type of Animation, but changes a property. Core Animation decides how and when to animate.
  • Basic animation, according to the starting value to do animation;
  • Key frame animation, is to define a series of key frames, the system automatically complete the intermediate transition frame.

From the animation section, we can see that the iOS classification is relatively vague and has some historical baggage.

2.3 CSS animations

There are two general types of CSS animations:

  • Transition
  • Animation

Animation classification on the Web is much simpler

  • Transition animation, given the starting value, can be combined with the interpolator animation;
  • Animation defines a series of key frames, and the system complements the intermediate transition frames.

Section 2.4

Through the above platform animation rough introduction, animation in different platforms although called by different names, are essentially the same, change to change are these several ways, either according to the property or according to the key frame, or change the drawing layer, or change the control itself properties. Some game engines, although I haven’t looked at them, I think the principles are similar.

3. The Flutter animation

With so much foreshadowing above, here comes the Flutter animation. Flutter is a relatively new technology, and the historical baggage should be minimal.

3.1 Classification of Flutter animation

Flutter animations fall into two categories:

  • Tween Animation
  • Physics-based Animation

Tween animation is easy to understand, physics-based animation is this what the hell.

Physics-based animation is a form of animation that follows the laws of physics

For example, let’s say you slide an image. Instead of moving at a constant speed, you start at a high speed and then slowly slow down, like a book moving on the ground. What are its features?

  • Obey the laws of physics;
  • Able to calculate and update animation values for each frame based on acceleration and speed;
  • When the force is balanced, the animation is in a constant motion or rest state.

Haha, that last point sounds familiar. What are the benefits of this? With the great improvement of people’s living standard, mobile terminal hardware has been catching up with Britain and The United States in recent years, people are no longer satisfied with simple animation, so some people have (Xian) knowledge (de) (Dan) (Teng), and realize animation based on the laws of physics.

Does this animation exist on iOS or Android? Yes, it does, but it’s not provided as a basic animation API. Why don’t other platforms incorporate this into basic animation?

  • Historical reasons. IOS and Android came out years ago, when hardware resources were extremely limited and the environment wasn’t strong enough to support this kind of animation. That’s not to say there aren’t, some game engines have them, but as an operating system, it’s not practical to integrate them.
  • Cognitive processes. With the development of computers and mobile devices over the years, we were content to view the simplest text and then all kinds of pictures and videos. With the increasing popularity of the Internet, people have more and more demands. As a result, animation based on the laws of physics, which is only seen in some games, has entered the home of ordinary people. On the other hand, there are a lot of “grievances” now. For example, it is not reasonable for human beings to see things through human eyes for thousands of years, but now they are confined to a small screen. So AR, VR, as well as some animated science fiction remote sensing technology, will emerge in an endless stream, of course, this is a bit far.

Physics-based animation is so good, what good is that? It’s more natural, it’s more cognitive.

3.2 Reasons for classification

The platform animation described above, whether based on a property or a frame animation, is essentially from one state to another, and the intermediate process can be inferred, so Flutter provides tween animation.

Physics-based animation, I guess, for some effect on other platforms, such as springs, damping effects, etc. So Flutter provides this kind of animation API, which comes with no baggage.

3.3 Animation Mode

Flutter abstracts three animation modes, which are not so much abstracted as unified.

  • Animated List or Grid A scenario is an item addition or deletion operation;
  • Shared Element Transition. A scene is a transition animation from one page to another;
  • Staggered animation. Scenes are animations that require partial or complete interlacing.

3.4 complexity

The principles of Flutter implementation and this phase are bound to be very cumbersome to animate. Cross-platform technology to do animation are difficult, this seems to be universal, for cross-platform assimilation of some things, to the alienation part, it becomes painful, animation is just such existence.

What is the complexity of Flutter animation?

  • There are fewer animations implemented, this is early, there is nothing to say;
  • The animation is implemented in a complex way, which is determined by the design idea of Flutter.

4. The section

The detailed implementation of the animation, some of the underlying code logic and how to use it will be covered in the next article. This article is more about general introduction of Flutter animation, but very little about Flutter animation. We hope readers can understand some principles of Flutter animation and the general implementation of animation on each platform, so that they can better understand the design idea of Flutter animation. If there is any mistake in the article, I would like to point it out. Thank you very much.

5. The latter

The author has set up a project about Flutter learning. The Github address contains some articles about Flutter learning written by the author. They will be updated regularly and some learning demos will also be uploaded.

6. Reference

  1. Principle of film
  2. Persistence of vision
  3. iOS-Core-Animation-Advanced-Techniques
  4. Introduction to CSS Animation
  5. Animations in Flutter
  6. Introduction to physics-based animation in Android