Flutter开发——动画原理及核心类

动画的原理

实际上动画是一段连续的画面，也叫做"动起来的画面"，这些画面是由一连串静态的图片组成的，而一个动画画面又叫做"动画帧"。
帧又被分为关键帧和过渡帧，在Android开发中补间动画就是关键帧与过渡帧的结合。关键帧可以理解为一个动画的起始和结束状态，而过渡帧则是系统自动插在关键帧之间的部分，那么系统是如何计算出过渡帧的呢，这里就涉及到了插值器。
插值器有线性插值器如匀速、加速、减速等，还有非线性插值器。其实插值器实际上就是动画运动轨迹的数学函数，也就是起始值到终止值之间的变化规律。在Flutter开发中，可以使用Curves类自定义插值器。

Flutter动画核心类

Flutter开发中，涉及动画的核心类有Animation、Animatable和AnimationController.

1.Animation

Animation是个抽象类，通过它可以了解当前动画的插值与状态：completed或dismissed。可以通过Animation对象知道当前动画状态是完成还是停止的。但是，通过Animation是无法知道屏幕上绘制的是什么内容的，因为Animation只提供了一个值，便是当前需要展示的动画。下面是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.value代表动画当前的值，addListener()和removeListener()可以添加和移除监听者，当value变化后，会通知监听者值得变化。
2.status代表动画的状态，有初始状态dismissed,正向动画状态forward,反向动画状态reverse和动画已完成状态completed四种，addStatusListener()和removeStatusListener()可以添加和移除监听者，当status变化后，会通知监听者状态的变化。

2.Animatable

Animatable是控制动画类型的类，比如在一个位移动画中，可以通过Animatable控制坐标（x,y）变化，或者在颜色动画中，可以通过Animatable控制颜色值得变化。
Animatable是一个抽象类，我可以使用它的实现类Tween。代码示例：

    _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是动画控制器，可以再给定时间内以线性的方式生成默认区间为(0.0,1.0)的值。代码示例:

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');
  }
}