系列文章

Flutter 旋转动画 — RotationTransitionFlutter 平移动画 — 4种实现方式Flutter 淡入淡出与逐渐出现动画Flutter 尺寸缩放、形状、颜色、阴影变换动画Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出Flutter Hero 实现共享元素转场动画Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

文章目录

系列文章1 淡入淡出&逐渐渐出现动画效果图2 动画基础知识3 淡入淡出动画（透明度变换动画）FadeTransition3.1 代码实现3.2 动画效果图4 逐渐出现动画 SizeTransition4.1 代码实现4.2 动画效果图4.2.1 竖向出现4.2.2 横向出现

1 淡入淡出&逐渐渐出现动画效果图

2 动画基础知识

Animation 是 Flutter 动画库中的核心类，它插入用于引导动画的值。AnimationController 管理动画。例如控制动画开始、停止、前进、后退等。CurvedAnimation 将进程定义为非线性曲线。Tween 在被动画对象使用的数据范围之间进行插值。 例如，Tween 可以定义从红色到蓝色或从 0 到 255 的插值。Listeners 和 StatusListeners 可监控动画状态的变化。AnimatedWidget 是展示动画的Widget，Flutter提供一些动画Widget让我们快速实现动画效果。例如：

AnimatedBuilder、 AnimatedModalBarrier、AlignTransition、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

3 淡入淡出动画（透明度变换动画）FadeTransition

FadeTransition 是Flutter提供的实现透明度变换的一个Widget,需要参数 Animation<double>。

可使用 补间动画

/// 0 为完全透明， 1为完全不透明late final Animation<double> _animation = Tween<double>(begin: 0,end: 1,).animate(_controller);

或者 非线性动画

late final Animation<double> _animation = CurvedAnimation(parent: _controller,curve: Curves.easeIn,);

3.1 代码实现

class FadeTransitionPage extends StatefulWidget {const FadeTransitionPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _FadeTransitionPageState();}class _FadeTransitionPageState extends State<FadeTransitionPage>with TickerProviderStateMixin {/// 动画时间 3秒，可重复播放late final AnimationController _controller = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..repeat(reverse: true);/// 0 为完全透明， 1为完全不透明late final Animation<double> _animation = Tween<double>(begin: 0,end: 1,).animate(_controller);@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,body: Center(child: FadeTransition(opacity: _animation,child: const FlutterLogo(size: 500),),),);}}

3.2 动画效果图

4 逐渐出现动画 SizeTransition

SizeTransition 是一个裁减自身大小的动画Wdiget，可实现逐渐出现的动画效果。

注意：SizeTransition 不能限定它的大小，否则动画不会生效

所需参数与一致，需要参数 Animation<double>。

可使用 补间动画

/// 0 为完全不可见， 1为完全显示late final Animation<double> _animation = Tween<double>(begin: 0,end: 1,).animate(_controller);

或者 非线性动画

late final Animation<double> _animation = CurvedAnimation(parent: _controller,curve: Curves.easeIn,);

4.1 代码实现

class SizeTransitionPage extends StatefulWidget {const SizeTransitionPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _SizeTransitionPageState();}class _SizeTransitionPageState extends State<SizeTransitionPage>with TickerProviderStateMixin {/// 持续时间为3秒的动画控制器, forward() 设置默认直接开始播放late final AnimationController _controller = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..forward();/// 补间动画，0代表完全不显示，1代表完全显示late final Animation<double> _animation =Tween<double>(begin: 0, end: 1).animate(_controller);@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,/// axis 可控制方向（横向or竖向） axisAlignment可控制从头或尾开始显示body: SizeTransition(sizeFactor: _animation,axis: Axis.vertical,axisAlignment: -1,child: const Center(child: FlutterLogo(size: 300)),),);}}

4.2 动画效果图

4.2.1 竖向出现

SizeTransition(sizeFactor: _animation,axis: Axis.vertical,axisAlignment: -1, /// -1 代表 从头（此处即顶部）开始child: const Center(child: FlutterLogo(size: 300)),),

4.2.2 横向出现

SizeTransition(sizeFactor: _animation,axis: Axis.horizontal,axisAlignment: -1, /// -1 左侧开始出现child: const Center(child: FlutterLogo(size: 300)),),