Flutter开发基础之动画专题

Flutter开发基础之动画专题

动画设计的作用是让UI界面更流畅、直观，能够有效的提升用户体验。
在Flutter开发中，动画分为多个方面：
基础动画、页面交互动画、绘图动画、矩阵变换等。

基本动画

常用的基本动画有透明度动画、缩放动画、旋转动画、平移动画等。

1. 透明度动画
   AnimatedOpacity可以实现基本的透明度变化动画，适用于简单的过渡场景。

    AnimatedOpacity(opacity: opacity,duration: duration,curve: curve,onEnd: onEnd,child: child,)

可以通过设置目标opacity，将child初始opacity修改为目标opacity。
FadeTransition可以和AnimationController配合实现子Widget的透明度变换，绑定的AnimationController控制动画的开始与结束。

    FadeTransition(opacity: opacity,child: child,)

在这里对应的State需要绑定SingleTickerProviderStateMixin，如果有多个AnimationController需要绑定TickerProviderStateMixin，SingleTickerProviderStateMixin和TickerProviderStateMixin都实现于TickerProvider，TickerProvider用来发送Ticker对象，Ticker对象的作用是获取每一帧刷新的通知；
Ticker受到SchedulerBinding的驱动，锁屏后会停止刷新，可以避免资源浪费。

2. 缩放动画
   ScaleTransition可以和AnimationController配合构建缩放动画效果，此缩放是等比例的。

    ScaleTransition(scale: scale,alignment: alignment,child: child,filterQuality: filterQuality,)

3. 旋转动画
   RotationTransition配合AnimationController实现旋转效果。

    RotationTransition(turns: turns,alignment: alignment,filterQuality: filterQuality,child: child,)

4. 平移动画
   SlideTransition配合AnimationController和Animation<Offset>实现对子Widget的平移变换。

    SlideTransition(position: position,transformHitTests: transformHitTests,textDirection: textDirection,child: child,)

Widget还可以直接配合Tween和AnimationController实现动画效果，这里的Tween就是Animation，Tween有一下几种：

ColorTween	Color切换动画
DecorationTween	Container的Decoration变化
BoxConstraintsTween	针对ConstrainedBox使用
EdgeInsetsTween	一般用于padding或margin变化
BorderTween	边框变换动画
BorderRadiusTween	边框圆角变换动画
Matrix4Tween	矩阵变换动画
TextStyleTween	文本样式过渡动画
TweenSequence	串行动画，是动画序列的组合动画
ConstantTween	常量值动画，一般与TweenSequence配合组合动画
SizeTween	size变换动画
RectTween	rect变换动画
StepTween	与TweenAnimationBuilder配合使用，可显著提高动画效率

Widget动画还可以通过AnimatedWidget实现，AnimatedWidget会封装好setState状态更新，通过Listenable监听Widget动画；
AnimatedBuilder继承自AnimatedWidget，对AnimatedWidget做了优化。
AnimatedModalBarrier继承自AnimatedWidget，可以防止用户与身后的子Widget交互。
SpringSimulation可以和SpringDescription配合AnimationController实现阻尼效果。

页面交互动画

Flutter中可以通过Hero组件来组合不同路由页面的过渡元素，通过使用相同的tag绑定不同的Widget，确保不同的Widget完成过渡。

    Hero(tag: tag,createRectTween: createRectTween,flightShuttleBuilder: flightShuttleBuilder,placeholderBuilder: placeholderBuilder,transitionOnUserGestures: transitionOnUserGestures,child: child,)

若过渡效果不满意，可以配合PageRouteBuilder实现自定义Hero动画效果。
当需要对相邻或有关联的Widget进行切换过渡时可以使用AnimatedSwitcher实现。

    AnimatedSwitcher(duration: duration,reverseDuration: reverseDuration,switchInCurve: switchInCurve,switchOutCurve: switchOutCurve,transitionBuilder: transitionBuilder,layoutBuilder: layoutBuilder,child: child,)

绘图动画

绘图动画是Canvas结合Path绘制自定义图形，对于完整的Path可以通过PathMetric分解获得任一截数据，形成新的Path。
在一定时间内逐步绘制一部分Path实现画线效果，我们可以同过自定义一个CustomPainter配合AnimationController实现动画效果。

    CustomPaint(painter: painter,foregroundPainter: foregroundPainter,size: size,isComplex: isComplex,willChange: willChange,child: child,)