Flutter is known for its number of widgets, so the animation API for Flutter is quite a lot. I thought it would be useful to comb through this to make it more comfortable. This article is not a detailed introduction to THE API, but to help you smooth the following context, to classify you, there are specific API, DETAILED I have a special article to introduce, we click the link to see my article on the line

So far transitions, shared elements, SVG animations have not been looked at, but everything else is pretty much in order

Review the history of Android animation

What animation is there in Android, and Flutter almost has to have any animation, except maybe Flutter has a late-mover advantage, lean merge and part

Android animation process is as follows:

  • API 1– View Animations. Tween Animations. To be honest, I have no idea why they’re called something with an irrelevant name. The feature is that the animation works in the DRAW stage, and the position of the view after the animation is still the position of the layout, resulting in the classic view animation can not click the corresponding event
  • API 11View Animations, Object Animator, and IEW Property Animator are all Property Animations that operate directly on View properties, which can be used during the Layout phase
  • API 19– Transitions animation, which can be used to insert default animations when view properties change
  • API 21– Animated Vector Drawable (Animated Vector Drawable) – Animated Vector Drawable (Animated Vector Drawable) – Animated Vector Drawable (Animated Vector Drawable) – Animated Vector Drawable (Animated Vector Drawable
  • Android X– Physics Animations and MotionLayout ConstraintLayout animations

Flutter also has a tween animation, which has the same features as Android. I hate it. I don’t know why Flutter has to wear it, the official documentation says it is for Windows

The rest of Flutter animation is mainly property animation and transformation animation, especially transformation animation, which combines the characteristics of Transitions, Physics and MotionLayout. Physics in Flutter I see more in the form and configuration of interpolators

Flutter is the basis of all animation

All of the Flutter animations are based on the AnimatedWidget. The AnimatedWidget is a compilation of the core Flutter animation apis. These apis are as follows:

  • Animation– The foundation of the Animation API. All animations are ultimately hosted by the Animation type. The main function of Animation is to save the value of each frame of Animation
  • Curve– Animation interpolator, used to calculate the value of each frame of animation, this is familiar to everyone
  • AnimationController– Animation controller, animation control, monitor are written here
  • Tween– Numeric range, which is mainly used to process data of different data types, such as double and color, which are commonly used in widget animation
  • Ticker– Responsible for the distribution of async, trigger page rebuild, detailed study to see the source code, code generally do not use this

This is the core of Flutter animation. Our own animation API is also based on the AnimatedWidget, so make sure you understand this

For details, see:

  • Flutter – Animation basics

Flutter tween animation

  • Transform.rotate
  • Transform.translate
  • Transform.scale

These are just a few, so Flutter doesn’t care much about him either, does he

Flutter properties animation

The idea behind Flutter is the same as the android property animation, which is called the built-in animation in Flutter

  • SlideTransition– Displacement animation based on its own multiples
  • AlignTransition– Alignment animation, the core is also shifted, just because the alignment changes
  • PositionedTransition– Zoom animation, limiting the parent layout to stack only
  • FadeTransition– Transparency animation
  • ScaleTransition– Zoom animation, this is the android zoom animation, you can specify the center point
  • SizeTransition– Width and height animation, the limitation is that only one dimension can be executed at a time, width and height can not be used together, that is the zoom animation
  • RotationTransition– Rotation animation, characterized by its value between 0 and 1, rotation 90 degrees = 0.25

For details, see:

  • Flutter – Built-in animation API

Flutter transformation animation

The transform animation of Flutter is a fusion of the animation concept that later appeared in Android, including LayoutAnimator layout animation

  • AnimatedSwitcher– The widget can play its own animation when the content changes
  • AnimatedContainer– The Container is used like a Container. When the color, width, height, and rounded corners of the Container change, the animation can not be controlled. It is similar to the animation of path
  • AnimatedCrossFade– Animation can be displayed when switching between different layouts, but you can’t set your own animation, the default is to fade in and out, and the display is not good when switching between different sizes
  • DecoratedBoxTransition– Border animation, the core is to change the shape by changing the rounded Angle, this change is natural transition, this is the same as path animation
  • AnimatedDefaultTextStyle– The switching animation when the text style is changed, mainly presents the animation about the size transformation, the color gradient is not obvious, but the experience is not good, the change of font thickness when the size word is changed is really a little bit irritating, a little bit slow
  • AnimatedModalBarrier– The color change animation must be placed in the child of the widget. It has a specific application scenario, such as changing the background color when the dialog pops up
  • AnimatedOpacity– Opacity change animation
  • AnimatedPhysicalModel– Shadow transform animation, the setup is a bit complicated
  • AnimatedPositioned– Stack widget position and size change animation
  • AnimatedSize– Widget size change animation

For details, see:

  • Flutter – Transform animation

The last

Finally, thanks to my habit of writing technical blogs, who can remember these details clearly? So, if you can write a blog, it doesn’t matter how much you write, the important thing is to write. The future you will thank your present self

Sometimes I will come back to look at their own articles, ah 1, so surprised ah, originally I wrote so NB, so deep ah, originally I wrote hundreds of thousands of words, many novels are not I write doha ~