写点什么

收藏不迷路 —— Flutter 转场动效大合集

作者:岛上码农
  • 2022 年 8 月 20 日
    湖南
  • 本文字数:2788 字

    阅读完需:约 9 分钟

前言

动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,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的动画值beginend 设置为相同即可。


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

CupertinoPageTransitionCupertinoFullscreenDialogTransition很相似,只是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 系列的使用,可以作为大家平时使用时的参考手册,建议收藏,随时可以翻阅。源码已上传至:动画相关源码


发布于: 刚刚阅读数: 4
用户头像

岛上码农

关注

用代码连接孤岛,公众号@岛上码农 2022.03.03 加入

从南漂到北,从北漂到南的业余码农

评论

发布
暂无评论
收藏不迷路 —— Flutter 转场动效大合集_flutter_岛上码农_InfoQ写作社区