Lao Meng's guide: Flutter animation series articles are divided into three parts: basic principles and core concepts, system animation components, 8 custom animation cases, a total of 17 articles.
Animation core concepts
In the process of developing App, custom animation is essential. If you want to customize animation in Flutter, you must first understand the basic principles and related concepts of Flutter animation implementation.
Part 1-4 introduces the three most important concepts in Flutter animation and the relationship between the three:
- AnimationController: Animation controller, which controls the playing and stopping of animation. Inherited from Animation<double>, it is a special Animation object. By default, it will linearly generate a value from 0.0 to 1.0. The type can only be double. If the animation curve is not set, the minimum value of the output can be set And the maximum value.
- Curve: The animation curve is similar to the Interpolator in Android. It is responsible for controlling the rate of animation change. In layman's terms, it is to make the effect of animation change at various rates such as uniform speed, acceleration, deceleration, and parabola.
- Tween: Map the [0,1] value generated by AnimationController to the value of other attributes, such as color, style, etc.
The fifth part explains the animation sequence TweenSequence , which associates multiple Tweens or Curves to an AnimationController.
Article link:
- Animation core-AnimationController: http://laomengit.com/guide/animation/AnimationController.html
- Animation core-Tween: http://laomengit.com/guide/animation/Tween.html
- Animation core-Curve: http://laomengit.com/guide/animation/Curve.html
- Animation Core-Summary: http://laomengit.com/guide/animation/AnimationSummary.html
- Animation sequence TweenSequence: http://laomengit.com/guide/animation/TweenSequence.html
System animation components
The first 6 describes the use of 20 kinds of animation system components and how to select which components to use, at first glance more than 20 animation system components is very large, but only into the implicit animation components and explicit animation component two kinds , The usage is basically the same. Article address: http://laomengit.com/guide/animation/AnimatedWidget.html
Chapter 7 explains the addition/deletion of animation components in the AnimatedList list: http://laomengit.com/guide/animation/AnimatedList.html
Chapter 8 explains Hero shared animation components: http://laomengit.com/guide/animation/Hero.html
The ninth chapter explains Material motion animation. Material motion is a new Animation software package released by the Flutter team at the Flutter 1.17 conference. This software package provides pre-built animations that implement the new Material motion specification: http://laomengit.com/guide /animation/TranslationAnimations.html
Custom animation
Case 10 -Custom routing animation : http://laomengit.com/guide/animation/NavigatorAnimation.html
The 11th case-"Peacock on the screen" animation effect : http://laomengit.com/guide/animation/Peacock.html
The 12th case-custom gradient progress bar : http://laomengit.com/guide/animation/CircleProgress.html
Case 13 -Self-painted roses : http://laomengit.com/guide/animation/Rose.html
Case 14 -Like the Nuggets : http://laomengit.com/guide/animation/JuejinLike.html
Case 15 -Cool 3D effects : http://laomengit.com/guide/animation/3DPerspective.html
The 16th case-ripple effect : http://laomengit.com/guide/animation/WaterRipple.html
The 17th case-radar scanning effect : http://laomengit.com/guide/animation/Radar.html
end
Many people think that Flutter animation is difficult and difficult to get started. Many readers also feedback how to customize animation? Here are some of my methods for learning Flutter animation:
- Step 1: Read Chapter 1-5 in detail, which is the basic concept part. Of course, for beginners, they will still be confused after reading. If you don't understand, it doesn't matter, just remember.
- Step 2: Use the system animation components to complete some simple animation effects. Do not think that using system components is useless. When you finish writing the usage of more than 20 system animation components, you must have a great understanding of animation The promotion.
- Step 3: After looking back, read Part 1-5 seriously, trust me, you must feel different.
- Step 4: There are 8 custom animation cases in the animation series. It is recommended to complete them independently according to the animation effect. If there is no idea, then refer to the article.
Personally, I feel that only by writing more can I understand more deeply. I feel shallow on paper, and I absolutely know that this matter must be practiced .
Flutter animated series has been completed, if helpful to you, please do not begrudge your praise and forwarding .
communicate with
Laomeng Flutter blog address (330 control usage): http://laomengit.com
Welcome to join the Flutter exchange group (WeChat: laomengit) and follow the public account [Lao Meng Flutter]:
 |
 |