Flutter development - animation principles and core classes

Principles of animation

In fact, animation is a continuous picture, also called "moving picture". These pictures are composed of a series of static pictures, and an animation picture is also called "animation frame".
Frames are divided into key frames and transition frames. In Android development, tween animation is the combination of key frames and transition frames. The key frame can be understood as the start and end state of an animation, and the transition frame is the part that the system automatically inserts between key frames, so how does the system calculate the transition frame, which involves an interpolator.
Interpolators include linear interpolators such as constant velocity, acceleration, deceleration, etc., and nonlinear interpolators. In fact, the interpolator is actually the mathematical function of the animation trajectory, that is, the change law between the starting value and the ending value. In Flutter development, you can use Curvesclasses to customize interpolators.

Flutter animation core class

In the development of Flutter, the core classes involved in animation are Animation, Animatableand AnimationController.

1.Animation

Animation is an abstract class through which you can understand the interpolation and state of the current animation: completed or dismissed. You can know whether the current animation state is completed or stopped through the Animation object. However, it is impossible to know what is drawn on the screen through Animation, because Animation only provides one value, which is the animation that needs to be displayed currently. The following is an implementation class of Animation:

class _ValueListenableDelegateAnimation<T> extends Animation<T> {
    
    
  _ValueListenableDelegateAnimation(
    this._listenable, {
    
    
    ValueListenableTransformer<T>? transformer,
  }) : _transformer = transformer;

  final ValueListenable<T> _listenable;
  final ValueListenableTransformer<T>? _transformer;

  @override
  void addListener(VoidCallback listener) {
    
    
    _listenable.addListener(listener);
  }

  @override
  void addStatusListener(AnimationStatusListener listener) {
    
    
    // status will never change.
  }

  @override
  void removeListener(VoidCallback listener) {
    
    
    _listenable.removeListener(listener);
  }

  @override
  void removeStatusListener(AnimationStatusListener listener) {
    
    
    // status will never change.
  }

  @override
  AnimationStatus get status => AnimationStatus.forward;

  @override
  T get value => _transformer?.call(_listenable.value) ?? _listenable.value;
}

1. valueRepresents the current value of the animation, addListener()and removeListener()listeners can be added and removed. When valuethe change occurs, the listener will be notified of the change.
2. statusRepresents the state of the animation, including initial state dismissed, forward animation state forward, reverse animation state reverseand animation completed state completed, addStatusListener()and removeStatusListener()listeners can be added and removed. When statusthe change occurs, the listener will be notified of the state change.

2.Animatable

Animatable is a class that controls the type of animation. For example, in a displacement animation, the coordinate (x, y) change can be controlled through Animatable, or in a color animation, the color value can be controlled through Animatable.
Animatableis an abstract class and I can use its implementation class Tween. Code example:

    _animation = Tween(begin: 0.0, end: 100.0).animate(_animationController)
      ..addStatusListener((status) {
    
    
        if (status == AnimationStatus.completed) {
    
    
          _ainmationController.reverse();
        } else if (status == AnimationStatus.dismissed) {
    
    
          _animationController.forward();
        }
      });

3.AnimationController

AnimationController is an animation controller that can generate a value with a default interval of (0.0,1.0) in a linear manner within a given time. Code example:

class _AnimationPageState extends State<AnimationPage>
    with SingleTickerProviderStateMixin {
    
    
  AnimationController? controller;
  Animation? animation;
  @override
  initState() {
    
    
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    controller!.addListener(() {
    
    
      print("controller=====${
      
      controller!.value}");
      if (controller!.value > 0.5) {
    
    
        controller!.animateBack(0.0);
      }
    });
    controller!.addStatusListener((status) {
    
    
      print("status====$status");
    });
    controller!.forward();
  }

  @override
  void dispose() {
    
    
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
        appBar: AppBar(title: const Text('动画')),
        body: Center(
          child: Container(),
        ));
  }

  @override
  Ticker createTicker(onTick) {
    
    
    return Ticker(onTick, debugLabel: 'created by $this');
  }
}