This paper analyzes the realization process of Flutter Animation through the code level, and introduces the Animation library and Physics library of Flutter.

1. Introduction

This article will introduce Flutter animation at the code level, so it will not cover the specific use of Flutter animation.

1.1 Animation library

Flutter’s Animation library relies on only two libraries, the Dart library and the Physics library. Animation is written in Dart, so it is normal to rely on the Dart library. What is a Physics library?

Simple one-dimensional physics simulations, such as springs, friction, and gravity, for use in user interface animations.

The Physics library is a library of simple physics simulations, including springs, damping, gravity, and other physical effects. The previous article introduced Flutter animation. One of the two categories of Flutter animation is physics-based animation. So we can guess that part of the code in the animation library is to realize another kind of animation — Tween Animation.

From this division of the library, it can also be roughly guessed that the library based on physical animation was added later. So what does that tell us?

  • Tween animation is a relatively basic type of animation on modern mobile terminals, which is a must;
  • Physics-based animation is added to improve the experience, which can be roughly guessed as iOS experience optimization;

1.2 Physics library

Flutter’s physics-based animation is actually quite simple. At present, the realization of spring, damping, gravity three physical effects, the whole library of code is not much. The detailed code is described in the following section. Here, we first talk about the principle of the physics-based animation library.

Physics-based animation gives us a more realistic feeling because it is more in line with People’s Daily life. For example, if you make an animation of a sphere falling at a uniform speed, it will not be realistic. Actual life experience tells us that a sphere falling freely should be slow at first and then fast. If we had to implement such an animation effect ourselves, how would we handle it?

In high school physics, we learned the concepts related to free fall, and the displacement calculation formula is as follows:

s = 1/2 * g * t * t

We know from this formula that the displacement of a free-falling body is not linear with time. We can use this formula to calculate the displacement in real time.

If it’s friction damping or a spring, there are also related physical formulas, and what we call physics-based animation libraries, which are based on such formulas, are essentially tween animations, but the process is more complicated to follow the laws of physics.

2. The Animation library

In explaining this part, I have also considered introducing the animation principle of Flutter. On second thought, the previous article introduced these universal principles of Flutter animation. Flutter is just the implementation of a specific platform, but the means of implementation are different. Therefore, the author found it easier to understand the explanation of Flutter animation principle in the last section of this article based on the code.

2.1 animation. The dart

Animation.dart defines four states of animation, as well as the core abstract class Animation.

2.1.1 Four states of animation

This file defines four states of the Animation:

  • Dismissed: The initial state of the animation
  • Forward: Plays the animation from beginning to end
  • Reverse: Plays the animation from end to end
  • Completed: Indicates the completed state of the animation

2.1.2 Animation class

The Animation class is the core abstract class of Flutter Animation. It contains the current value and state of the Animation. Defines a series of callbacks for an animation,

  • Callbacks to value changes during animation:
void addListener(VoidCallback listener);
void removeListener(VoidCallback listener);
Copy the code
  • State callback functions:
void addStatusListener(AnimationStatusListener listener);
void removeStatusListener(AnimationStatusListener listener);
Copy the code

2.2 the curve. The dart

A curve must map t=0.0 to 0.0 and t=1.0 to 1.0.

What comes to mind when you see this passage? That’s right, interpolators. Curve is also an abstract class that defines an interface between time and value.

double transform(double t);
Copy the code

For example, a linear interpolator, the implementation code is as follows.

class _Linear extends Curve {
  const _Linear._();

  @override
  double transform(double t) => t;
}
Copy the code

There are many types of interpolators defined below, and the implementation varies. Flutter defines a series of interpolators, encapsulated in Curves, that have the following 13 effects.

  • linear
  • decelerate
  • ease
  • easeIn
  • easeOut
  • easeInOut
  • fastOutSlowIn
  • bounceIn
  • bounceOut
  • bounceInOut
  • elasticIn
  • elasticOut
  • elasticInOut

If the 13 above do not satisfy the requirements, Cubic classes can also be used for custom constructs. You can see that this part of the implementation references related implementations on the Web.

2.3 tween. Dart

This file defines a set of estimators that Flutter implements through the abstract class Animatable. For Animatable, we can first look at its definition.

An object that can produce a value of type T given an [Animation] as input.

Different values can be produced based on different inputs. Generate different estimators by overloading the following functions.

T transform(double t);
Copy the code

The main subclass is Tween, a linear estimator, which is implemented as follows, very simply, as a linear function.

T lerp(double t) { assert(begin ! = null); assert(end ! = null);return begin + (end - begin) * t;
}
  
@override
T transform(double t) {
  if(t = = 0.0)return begin;
  if(t = = 1.0)return end;
  return lerp(t);
}
Copy the code

Different types of estimators are implemented on the basis of Tween.

  • ReverseTween
  • ColorTween
  • SizeTween
  • RectTween
  • IntTween
  • StepTween
  • ConstantTween

Estimators can also be implemented through custom interpolators, such as the estimator CurveTween implemented by Curve.

2.4 animation_controller. Dart

Control of the Animation is implemented below this file, the most important part of which is the AnimationController, which is derived from the Animation class.

The AnimationController has the following functions:

  • Play an animation (forwaed or reverse), or stop an animation;
  • Set the value of the animation
  • Set the boundary value of the animation.
  • Create physics-based animation effects.

By default, the AnimationController is linear and produces values between 0.0 and 1.0, one value per refresh frame. Dispose AnimationController should be disposed when it is not in use, otherwise it will leak resources.

Against 2.4.1 TickerProvider

The AnimationController cannot be mentioned without mentioning TickerProvider.

An interface implemented by classes that can vend Ticker objects.

TickerProvider defines the interface for sending Ticker objects.

Ticker createTicker(TickerCallback onTick);
Copy the code

What can a Ticker do?

Tickers can be used by any object that wants to be notified whenever a frame triggers.

Its main function is to get notification of each frame refresh, which is obvious, adding a motor to the animation.

2.4.2 AnimationController

Now back to the AnimationController again. The TickerProvider argument is required in the AnimationController constructor.

Combined with the interpolators, estimators, and Ticker callbacks described above, the general workflow of the AnimationController, I’m sure many people can figure it out.

As time goes by, the interpolator feeds the valuer the value generated by the time as input, generates the actual effect value of the animation, and, combined with the Ticker’s callback, renders an image of the current animation value. This is how tween animation works.

The AnimationController animation implementation of Flutter is quite primitive. The AnimationController requires a callback that triggers a refresh and changes the output value, unlike the mature platforms that animate the View.

3. Physics library

The Physics library is basically the implementation part of the interpolator, and that’s the easy part

Simulation defines interfaces based on physical animation, including position, speed, completion, and Tolerance.

double x(double time);
double dx(double time);
Copy the code

GravitySimulation is implemented as follows, where _A acceleration, _x is the initial distance, and _v is the initial velocity:

@override
double x(double time) => _x + _v * time + 0.5 * _a * time * time;

@override
double dx(double time) => _v + time * _a;
Copy the code

I believe that those who have studied high school physics will be familiar with this formula. Several other implementations are not expanded here. If you expand the physics animation library, it is also very good to expand, master some physics formulas, you can copy the implementation.

4. Ticker

As for the animation driver, briefly, the Ticker is driven by SchedulerBinding. The SchedulerBinding listens for the window. onBeginFrame callback.

The function of the Window. OnBeginFrame is to tell the application to provide a scene, which is driven by the hardware’s VSync signal.

Dart is implemented in sky_engine.

5. Section

This article gives a brief look at the animation of Flutter at the code level, and a more in-depth look at the Ticker section, which relates to the code under Sky_engine, for those interested.

In this article, I’m still trying to get around the code to explain something general, but the code for Flutter is actually quite simple to implement. The problem with Flutter is that it’s hard to call.

Physics-based animation, we need to know the deep level of the physical formula, with this basis, we can make the animation effect in line with the sense. This is essentially a tween animation, and the process can be calculated.

It can be said broadly that most of the general animations are tween animations. If we design a set of animation system by ourselves, the interpolator, estimator, driver part and animation management part coordinate with each other to output the animation cutscenes frame by frame. Most of the platform animation design, also can not escape these factors, but the implementation of different ways.

If there are any mistakes in the article, please correct them. The author is of limited level. Thank you again.

6. 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.

Reference 7.

  1. Animations in Flutter
  2. Tutorial: Animations in Flutter
  3. TickerProvider class
  4. Ticker class
  5. SchedulerBinding class
  6. onBeginFrame property