Flutter 动画

59 阅读2分钟

Ticker(每帧都会执行一个函数的对象)

页面每帧刷新回调,通过继承TicjerProvider来实现createTicker。

当组件混入SingleTickerProviderStateMixin之后,自身的类就具备了创建createTicker的能力。

通过创建AnimationController来传入vsync参数,继而通过传入的vsync参数来创建

Ticker。

AnimationController 核心就是通过value变量来驱动动画

当每帧改变一个double类型的值,并改变动画状态,通知监听者。

AnimationController继承自Animation类

Animation 监听动画的值,状态,并提供回调的一个抽象类

其drive方法通过绑定一个具有animatable类型的对象来进行动画值的类型转换

AnimationController和CurvedAnimation继承自Animation

Tween(Animatable)

用一下两种方式来和controler关联,返回的是Animation类型

Controller.drive(tween)

Tween. animate(controller)

Ticker逐帧给我们提供了回调,AnimationController给我们默认提供了从0到1的值改变,可以用来进行动画控制

,基于此初始值,我们可以使用Tween对初始值进行改变,使用Curve对动画速度进行控制。

动画的值被包装成Animation类型,为我们提供了值和状态的监听。

隐式动画和显示动画

对比命名控制器值类型父类自定义难易程度
显式动画FooTransition显式创建AnimationController,完整的控制权Animation value大多数继承自AnimatedWidget使用AnimatedBuilder或继承自AnimatedWidget中等
隐式动画AnimatedFoo隐式创建Controller,只能控制duration、curveT value大多数继承自ImplicitlyAnimatedWidget使用TweenAnimationBuilder简单

自定义隐式动画

TweenAnimationBuilder

  • Tween的值可以动态改变,谨记TweenAnimationBuilder永远是从当前值运动到新的终值

  • builder即是用户自定义想要实现的内容

  • child参数放置不需要变的元素,比如自定义Widget中的icon,它会在builder构造中被当成参数传递进去,这块是系统为了优化性能所做的设计。

自定义显式动画

使用AnimationBuilder自定义显式动画,AnimationBuilder继承自AnimatedWidget,因此我们也可以直接继承自AnimatedWidget,自定义显示动画关注点和自定义隐式动画类似,同样只需要关注animation、builder、child,其中animation即为自己创建的controller,builder为自定义Widget,child作用和上面一样用来优化性能。