This article allows you to say a few words on the Flutter animation

This article is translated from Introduction to animations, mainly to get a general understanding of Flutter animations.

Good animation makes the UI more intuitive, makes the app look smoother and more polished, and improves the user experience. Flutter’s animation support makes it easy to implement various animation types. All types of animation can be easily implemented in Flutter. Many widgets, especially Material Widgets, come with standard animation effects defined by the design specification, but developers can also customize the animation effects.

Choose an implementation

There are different approaches you can take when creating animations in Flutter. Which approach is right for you? To help you decide, check out the video, How to choose which Flutter Animation Widget is right for you? (Also published as a companion article.)

In Flutter, developers have several ways to create animations. Which approach is appropriate for the developer scenario? To help developers make choices, we published this video 👉 How to choose the right animation implementation? And the accompanying article, which I will translate later.

The above animation and article describe the process of selecting an animation implementation:

To see if implicit animations that Flutter provides meet your needs, check out 👉Animation Basics with Implicit animations. Implicit animations are the simplest way to implement animations.

For the creation of custom implicit animations, see 👉 Creating your own custom Implicit Animations with TweenAnimationBuilder.

Display animations can be created here 👉 [Making your first Directional animations with built-in explicit Animations]. Display animations are self-controlled animations, rather than wrapped with frames.

If you want to create a display animation from scratch, you can look at 👉 Creating Custom Explicit Animations with AnimatedBuilder and AnimatedWidget.

For a more in-depth look at how Animation works, check out 👉 Animation Deep Dive.

Codelabs, tutorials, and articles

Learn some great information about Flutter frame animation below. Each document tells us how to develop Flutter animation.

• Implicit Animations Codelab shows you how to use Implicit animations step by step and provides some intuitive little examples.

• The Animations tutorial explains the most basic classes that support the Flutter animation framework, such as controllers, Animatable, curves, Listeners, builders, and more. It explains the use of some of the animation apis and shows developers how to build their own custom display animations.

• Zero to One with Flutter, Part 1 and Part 2 explain how to develop a tween animation through an animation icon example

• Write your first Flutter app on the Web

• Building Beautiful UIs with Flutter demonstrates how to create a simple chat App with Flutter. Step 7 (Animate your App) New Message – Slide it from the input field to the message list.

Animation types

Generally speaking, there are two types of animation: tween animation and physics animation. This section introduces the meaning of the concepts and the learning resources for each type.

Filling between animation

The short answer is transition. In a tween animation, the beginning, end, timeline, and animation curves are defined. The framework calculates how to transition from starting point to end point.

Physical simulation animation

Physics-based simulation animation, the trajectory of movement to simulate real world behavior. For example, when you throw a ball, what time and where you land depends on how fast you throw the ball and how far it is from the ground. Also, a ball tied to a spring is not the same as a ball tied to your body.

• Animate a widget using a physics simulation

• The Grid of a Flutter Gallery is under the Material Components directory. A fling animation is displayed.

• AnimationController animateWith and SpringSimulation

Animation provided by Flutter

To use Material style styles, developers can check out the 👉 animation package, which provides many common animation effects: Container transform, coordinate transform, fade in and out, shift, and so on.

Common animation effects

Most UX and motion designers use certain animation effects over and over again when designing uIs. This section lists some commonly used animation effects and shows you where you can continue to learn.

Mesh and list animation

The most common is the animation of adding and removing elements.

• AnimatedList example

Examples from the Sample App Catalog show how to add and remove elements as animations.

Shared Element animation

The user selects an element, usually a picture, and animates the selected element to a new detail page. This cross-route animation can be achieved with the Hero widget in Flutter.

• Hero Animations how to create two styles of Hero animations:

  • Slide from page to page while changing position and size
  • Change shape as you slide from page to page

• Flutter Gallery displays the effects of Flutter

• See the Hero, Navigator, and PageRoute class documentation.

Staggered animation

The animation is broken down into smaller actions, and some of those actions are delayed. Smaller movements may be continuous or may overlap partially or completely.

• Staggered Animations

conclusion

The above official animation document introduction, this one is mainly introduced, the details will be leaked out later. ✌ ️