Flutter开发基础之动画专题
Flutter开发基础之动画专题
动画设计的作用是让UI界面更流畅、直观，能够有效的提升用户体验。
在Flutter开发中，动画分为多个方面：
基础动画、页面交互动画、绘图动画、矩阵变换等。
基本动画
常用的基本动画有透明度动画、缩放动画、旋转动画、平移动画等。
- 透明度动画
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的驱动，锁屏后会停止刷新，可以避免资源浪费。
- 缩放动画
ScaleTransition可以和AnimationController配合构建缩放动画效果，此缩放是等比例的。
ScaleTransition(scale: scale,alignment: alignment,child: child,filterQuality: filterQuality,)
- 旋转动画
RotationTransition配合AnimationController实现旋转效果。
RotationTransition(turns: turns,alignment: alignment,filterQuality: filterQuality,child: child,)
- 平移动画
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,)