Introduction: The Flutter animation series is divided into three parts: basic principles and core concepts, system animation components, 8 custom animation cases, a total of 17 articles.

Core concepts of Animation

In the process of App development, custom animation is essential. To customize Flutter animation, one must first understand the basic principles and related concepts of Flutter animation implementation.

Chapters 1-4 introduce the three most important concepts of Flutter animation and the relationship among them:

  • AnimationController: AnimationController that controls animation playback, stopping, etc. Animation< double > is a special Animation object. By default, it will generate a linear value from 0.0 to 1.0. The type can only be double, and the minimum and maximum output can be set without setting the Animation curve.
  • Interpolator: Animation Curve. Similar to the Android Interpolator, it controls the rate at which an animation changes. Generally speaking, the effect of an animation changes at a constant speed, acceleration, deceleration, parabola, etc.
  • Tween: map the value [0,1] generated by the AnimationController to the values of other properties, such as color, style, etc.

Part 5 looked at the animation sequence TweenSequence, which associates multiple Tween or Curve to an AnimationController.

Article links:

  • Animation core – AnimationController:laomengit.com/guide/anima…
  • Animation core – Tween:laomengit.com/guide/anima…
  • Animation core – Curve:laomengit.com/guide/anima…
  • Animation core – summary: laomengit.com/guide/anima…
  • The animation sequence TweenSequence: laomengit.com/guide/anima…

System animation component

The sixth chapter introduces the usage of more than 20 kinds of system animation components and how to choose which kind of component to use. At first glance, it seems that more than 20 kinds of system animation components are very many, but they are only divided into implicit animation components and explicit animation components, and the usage is basically the same. The article addresses: laomengit.com/guide/anima…

Article 7 on AnimatedList list to add/delete animation component: laomengit.com/guide/anima…

Article 8 on Hero sharing the animation component: laomengit.com/guide/anima…

Material Motion is a new Animations package released by the Flutter team at the Flutter 1.17 conference. The package provides the implementation of new Material motion specification of pre-built animation: laomengit.com/guide/anima…

Custom animation

Article 10 cases – custom routing animation: laomengit.com/guide/anima…

Article 11 case – “the peacock” animation effects: laomengit.com/guide/anima…

Article 12 cases – custom gradient progress bar: laomengit.com/guide/anima…

Article 13 cases – custom painting roses: laomengit.com/guide/anima…

Article 14 cases – copy the nuggets thumb up: laomengit.com/guide/anima…

Article 15 in case – cool 3 d effect: laomengit.com/guide/anima…

Article 16 cases – ripple effect: laomengit.com/guide/anima…

Article 17 cases – radar scanning effect: laomengit.com/guide/anima…

At the end

Many people feel that the Flutter animation is difficult to get started. Many readers also give feedback on how to customize the animation. Here are some of my ways to learn Flutter animation:

  • The first step: detailed reading 1-5, which is the basic concept part, of course for beginners, after reading will still be confused, do not understand, it doesn’t matter, remember can.
  • Step 2: use the system animation components to complete some simple animation effects, do not feel that the use of system components is useless, when you write more than 20 system animation components of the usage, you must have a great improvement of animation cognition.
  • Step 3: Go back and really read passages 1-5. Trust me, you will feel different.
  • Step 4: There are 8 articles in the animation series for custom animation cases. It is suggested to complete them independently according to the animation effect first. If there is no idea, then refer to the article.

I feel that only by writing more to understand more profound, the paper come zhongjue shallow, must know this to practice.

The Flutter animation series has been completed, please feel free to post your likes and retweets if they will help you.

communication

Old Meng Flutter blog address (330 controls usage) : laomengit.com

Welcome to join the Flutter Communication Group (wechat: Laomengit), follow the public account [LaomengIt] :