• Staggered Animation In Flutter
• By Shaiq Khan
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: Hoarfroster
• Proofread by: LSvih

Interweaving animation in Flutter

Interlacing animation consists of an animation sequence or overlapping animation, and to create interlacing animation, we need to use multiple or groups of animation objects. We should use the same AnimationController to control all animations, each animation object should specify the movement of a point or anchor over a period of time, and we should create a Tween for each property of the animation to be executed.

The so-called interlacing animation is simply: not all visual changes happen at the same time, but let them happen gradually as the task progresses. The animation may be purely a sequential animation, with visual changes occurring one after the other; Some of the animations may overlap, or even overlap completely. Of course, there may also be moments in the interlacing animation where there are gaps in which no animation takes place.

Here is a sample video on interlacing animation

In this video, you can see the animation that takes place on a control, starting with the appearance of a blue rectangle with a border and slightly rounded corners. The rectangle changes in the following order:

• Fade in
• It widens horizontally
• It’s going up and it’s going to be higher vertically
• Turn it into a circle with a border
• It turns orange

After the animation is played sequentially, the animation will be played in reverse.

Interlacing animation infrastructure

• All animations are made of the sameAnimationControllerControl.
• Regardless of how long the animation plays in real time, the controller must be between 0.0 and 1.0, including 0.0 and 1.0.
• Each animation has oneIntervalThe value must be between 0.0 and 1.0, including 0.0 and 1.0.
• Create one for each of the properties that animate in each intervalTween.TweenSpecifies the start and end values for this property.
• TweenGenerates one managed by the animation controllerAnimationObject.

To set up an animation like this

• To create aAnimationControllerManage allAnimations.
• Create one for each animated propertyTween.
• forTweenSet different values.
• Tween 的 animate()The method needs oneAnimationControllerTo generate an animation with these properties.
• By modifying theAnimationConstructorcurveProperty specifies the interval between animations

How to use interleaved animation in Flutter:

The following code defines a tween animation for the avatarSize property. It constructs a CurvedAnimation class and specifies the animation curve as an elasticOut curve. To see more preset animation Curves, visit the Curves web page.

avatarSize = Tween<double>(
  begin: 50.0,
  end: 150.0,
).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0.125.0.250,
      curve: Curves.elasticOut,
    ),
  ),
),
Copy the code

AnimationController and Animation define instances of the AnimationController class. Here are the AnimateController and five instances of the Animation that control the progress of the Animation. Where

is used to get a number that defines the animation process, which must be between 0 and 1.

final AnimationController controller;
final Animation<double> barHeight;
final Animation<double> avatarSize;
final Animation<double> titleOpacity;
final Animation<double> textOpacity;
final Animation<double> imageOpacity;
Copy the code

We should override the initState method in the definition of the control to initialize the AnimationController. In the definition statement, we are actually setting the parameters of the animation. In the following example we set the animation duration to 3 seconds.

/ / that the code from the Flutter interception in the library, path/lib/SRC/animation/animation_controller dart: 150
@override
void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this./ / to SingleTickerProviderStateMixin references
        duration: widget.duration,
    );
}
Copy the code

How to do this in code:

You need to implement the following in your code:

• Add aStatefulWidgetControl with state
• Then combine the control withSingleTickerProviderStateMixinMixins, in order to makeAnimationControllerMake sure it has an animation time of 3500 milliseconds.

The controller will play an animation and then create an unanimated section in the Widget tree. When a click event is detected on the screen, the animation begins. The animations are played sequentially at first, then in reverse order.

import 'package:flutter/material.dart';
import 'package:stag_animation/trekking/staggered_trekking.dart';

class StaggeredTrekkingAnimation extends StatefulWidget {
  @override
  _StaggeredTrekkingAnimationState createState() =>
      _StaggeredTrekkingAnimationState();
}

class _StaggeredTrekkingAnimationState extends State<StaggeredTrekkingAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 3500),
      vsync: this,); _controller.forward(); } Future<void> _playAnimation() async {
    try {
      await _controller.forward().orCancel;
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // The animation was paused, possibly because the control was disposed.}}@override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    returnGestureDetector( behavior: HitTestBehavior.opaque, onTap: () { _playAnimation(); }, child: StaggeredTrekking( controller: _controller, ), ); }}Copy the code

In Staggered Trekking Enter animations, we used tween to determine how the animation progressed.

Next, you will complete a Staggered Trekking animation of stateless controls. We will use the build() function to define an AnimatedBuilder for the control’s animation initialization. At the same time, we need to create a function called _buildAnimation() that updates the user interface and assigns it to the Builder property.

import 'package:flutter/material.dart';

class StaggeredTrekkingEnterAnimation {
  StaggeredTrekkingEnterAnimation(this.controller)
      : barHeight = Tween<double>(begin: 0, end: 150).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.0.3, curve: Curves.easeIn),
          ),
        ),
        avatarSize = Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.3.0.6, curve: Curves.elasticOut),
          ),
        ),
        titleOpacity = Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.6.0.65, curve: Curves.easeIn),
          ),
        ),
        textOpacity = Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.65.0.8, curve: Curves.easeIn),
          ),
        ),
        imageOpacity = Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(0.8.0.99, curve: Curves.easeIn),
          ),
        );

  final AnimationController controller;
  final Animation<double> barHeight;
  final Animation<double> avatarSize;
  final Animation<double> titleOpacity;
  final Animation<double> textOpacity;
  final Animation<double> imageOpacity;
}
Copy the code

The AnimatedBuilder listens for notifications from the animation controller, and then flags changes to the value of the control. For each frame of the animation, these values are updated by calling _buildAnimation().

In the video posted below, you’ll see how interlacing animations work. When you tap anywhere on the screen, it will start the animation and automatically play the animation backwards after playing it forward. In this code, you can also control the speed at which the animation plays.

This is a basic example of interlacing animation. Here we have made a simple example that you can try to learn.

Click the GitHub link below to find the source code for the interlacing animation:

flutter-devs/Flutter-StaggeredAnimation

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.