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,)