前言
动画经常会用于场景切换，比如滑动，缩放，尺寸变化，为应对这样的场景转换需要，Flutter 提供了 Transition 系列的动画组件，可以让场景转换动画变得更加简单。本篇为你整理了常用的 Transition 组件的应用。
CupertinoFullscreenDialogTransition
名称显示是苹果风格的全屏对话转换动效，构造方法如下：
CupertinoFullscreenDialogTransition({ Key? key, required Animation<double> primaryRouteAnimation, required Animation<double> secondaryRouteAnimation, required this.child, required bool linearTransition,})
复制代码
从源码可以看到实际上是基于 SlideTransition 实现的，其 build 方法定义如下，使用了两个 SlideTransition 实现了该动效。可以看成是实现了两个方向的移动，如果只移动一个方向的话，将secondaryRouteAnimation的动画值begin 和 end 设置为相同即可。
Widget build(BuildContext context) { assert(debugCheckHasDirectionality(context)); final TextDirection textDirection = Directionality.of(context); return SlideTransition( position: _secondaryPositionAnimation, textDirection: textDirection, transformHitTests: false, child: SlideTransition( position: _positionAnimation, child: child, ), );}
复制代码
下面是我们实现的一个示例动画，Column 的子组件中，上下各使用了 1 个CupertinoFullscreenDialogTransition组件，使得有种下面弹出来后将上面的挤上去一样。
CupertinoPageTransition
CupertinoPageTransition和CupertinoFullscreenDialogTransition很相似，只是CupertinoPageTransition是横向的。构造方法的参数也一样：
CupertinoPageTransition({ Key? key, required Animation<double> primaryRouteAnimation, required Animation<double> secondaryRouteAnimation, required this.child, required bool linearTransition,})
复制代码
我们用CupertinoPageTransition实现了一个类似侧边抽屉的动效。
DecoratedBoxTransition
这个顾名思义，就知道是更改 子组件的外框的特性来实现动效的，实际做起来还是挺有趣的，下面是官方的一个示例代码：
class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin { final DecorationTween decorationTween = DecorationTween( begin: BoxDecoration( color: const Color(0xFFFFFFFF), border: Border.all(style: BorderStyle.none), borderRadius: BorderRadius.circular(60.0), shape: BoxShape.rectangle, boxShadow: const <BoxShadow>[ BoxShadow( color: Color(0x66666666), blurRadius: 10.0, spreadRadius: 3.0, offset: Offset(0, 6.0), ) ], ), end: BoxDecoration( color: const Color(0xFFFFFFFF), border: Border.all( style: BorderStyle.none, ), borderRadius: BorderRadius.zero, // No shadow. ), );
late final AnimationController _controller = AnimationController( vsync: this, duration: const Duration(seconds: 3), )..repeat(reverse: true);
@override void dispose() { _controller.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return Container( color: Colors.white, child: Center( child: DecoratedBoxTransition( position: DecorationPosition.background, decoration: decorationTween.animate(_controller), child: Container( width: 200, height: 200, padding: const EdgeInsets.all(10), child: const FlutterLogo(), ), ), ), ); }}
复制代码
实现的效果如下，有一种从扁平到实物过渡的感觉，而且动效变化得很平滑。
FadeTransition
FadeTransition 看名字就知道是一个渐现的动画效果了，示例很简单，通过一个 Animation<double>控制透明度就可以实现对应的动效了。
Widget build(BuildContext context) { return Container( color: Colors.white, child: FadeTransition( opacity: _animation, child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()), ), );}
复制代码
PositionedTransition
和AnimatedPositioned有点类似，用于更改组件在 Stack 的位置来实现动画效果。下面是官方的示例代码。
@overrideWidget build(BuildContext context) { const double smallLogo = 100; const double bigLogo = 200;
return LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { final Size biggest = constraints.biggest; return Stack( children: <Widget>[ PositionedTransition( rect: RelativeRectTween( begin: RelativeRect.fromSize( const Rect.fromLTWH(0, 0, smallLogo, smallLogo), biggest), end: RelativeRect.fromSize( Rect.fromLTWH(biggest.width - bigLogo, biggest.height - bigLogo, bigLogo, bigLogo), biggest), ).animate(CurvedAnimation( parent: _controller, curve: Curves.elasticInOut, )), child: const Padding( padding: EdgeInsets.all(8), child: FlutterLogo()), ), ], ); }, );}
复制代码
运行效果如下，不仅可以更改位置还可以更改大小。
RotationTransition
旋转动画效果，然后让组件围绕 Z 轴旋转。构造方法如下，其中 turns 即旋转控制动画对象，alignment 是确定开始旋转的相对位置。
RotationTransition({ Key? key, required Animation<double> turns, Alignment alignment, FilterQuality? filterQuality, Widget? child})
复制代码
ScaleTransition
缩放动效，我们在真会玩！用手机吹气球你见过不？已经介绍过了，这里不再重复介绍，大家看之前的文章即可。
SizeTransition
尺寸变化动效，可以参考超人飞来！Flutter 实现满屏的力量感动画！这一篇文章。
SlideTransition
滑动动效，可以实现组件的滑入滑出效果，具体可以看来，滑动到下一个小姐姐这一篇。
总结
本篇列举了 Flutter 自带的转场动效组件 Transition 系列的使用，可以作为大家平时使用时的参考手册，建议收藏，随时可以翻阅。源码已上传至：动画相关源码。
评论