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

动画的原理

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

Flutter动画核心类

Flutter开发中,涉及动画的核心类有AnimationAnimatableAnimationController.

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;

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

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

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

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

  
  AnimationStatus get status => AnimationStatus.forward;

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

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

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

  
  Ticker createTicker(onTick) {
    return Ticker(onTick, debugLabel: 'created by $this');
  }
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值