Flutter 平移动画 — 4种实现方式

系列文章

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

---

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 平移动画实现方式

Flutter提供了四个Widget可实现平移动画，分别是

• SlideTransition
• AlignTransition
• PositionedTransition
• RelativePositionedTransition

3.1 SlideTransition

SlideTransition 是基于 Animation 来确定平移位置的。平移的具体距离，是由Widget自身的宽高 * Offset中的 x y 值。

例：Widget 的width=100，height = 200，平移动画的起点为Offset(0,0)，终点 为Offset(2,3)，则平移动画移动的宽度就是 width*dx = 100 *2 ;高度就是 height * dy= 200 *3

3.1.1 实现Widget从左上角平移到右下角

大概步骤：

1. 创建 AnimationController
2. 使用 LayoutBuilder 获取到容器的宽高
3. 通过容器与子控件的宽高 计算出偏移量 Offset
4. 创建补间动画 Tween
5. 使用 SlideTransition 实现平移动画

具体代码：

  
class SlideTransitionPage extends StatefulWidget {
  const SlideTransitionPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _SlideTransitionPageState();
}

class _SlideTransitionPageState extends State<SlideTransitionPage>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    /// 重复播放，持续时间为5秒的动画控制器
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          /// 需要平移的Widget 宽高
          const childHeight = 100.0;
          const childWidth = 150.0;

          /// 父布局的宽高
          final parentWidth = constraints.maxWidth;
          final parentHeight = constraints.maxHeight;

          /// 动画起点是左上角
          const startOffset = Offset(0, 0);

          /// 动画终点右下角（父布局宽高 - 子控件宽高）/子控件宽高
          /// 因为平移时子控件大小会占用一部分空间所以需要减去
          final dx = (parentWidth - childWidth) / childWidth;
          final dy = (parentHeight - childHeight) / childHeight;
          final endOffset = Offset(dx, dy);
          
          /// 补间动画
          final offsetAnimation =
              Tween<Offset>(begin: startOffset, end: endOffset)
                  .animate(_controller);

          return SlideTransition(
            position: offsetAnimation,
            child: Container(
              width: childWidth,
              height: childHeight,
              color: Colors.red,
            ),
          );
        },
      ),
    );
  }
}

3.1.2 效果图

---

3.2 AlignTransition

如果只是实现 topLeft 、topCenter 、topRight 、centerLeft、center 、centerRight 、bottomLeft、bottomCenter 、bottomRight 这些特殊点位的平移，使用AlignTransition则比较方便。

AlignTransition 是基于 Alignment 来确定平移位置的。

3.2.1 实现Widget从左下角到右上角的非线性平移动画

非线性动画需要使用Curved­Animation

  class AlignTransitionPage extends StatefulWidget {
  const AlignTransitionPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _AlignTransitionPageState();
}

class _AlignTransitionPageState extends State<AlignTransitionPage>
    with SingleTickerProviderStateMixin {
  /// 可重复播放 持续时间为5秒
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 5),
    vsync: this,
  )
    ..repeat(reverse: true);

  /// 左下角 到 右上角
  late final Animation<AlignmentGeometry> _animation = Tween<AlignmentGeometry>(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
  ).animate(
    /// 非线性动画，可查看Curves源码，看具体的效果
    CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInCirc,
    ),
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AlignTransition(
        alignment: _animation,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
    );
  }
}

3.2.2 效果图

---

3.3 PositionedTransition

PositionedTransition 是基于 RelativeRect 来确定平移位置的。从rect1 平移至 rect2，若Rect大小不一致，则可改变Widget尺寸大小。

PositionedTransition 必须放置在 Stack Widget 中。

RelativeRect：相对于父容器尺寸来确定自身的位置、大小。

3.3.1 实现Widget平移时尺寸也变大缩小

class PositionedTransitionPage extends StatefulWidget {
  const PositionedTransitionPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _PositionedTransitionPageState();
}

class _PositionedTransitionPageState extends State<PositionedTransitionPage>
    with SingleTickerProviderStateMixin {

  /// 可重复播放，持续时间为5秒的动画控制器
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 5),
    vsync: this,
  )..repeat(reverse: true);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// 计算容器的尺寸
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final Size biggest = constraints.biggest;

          /// 需要平移的Widget 宽高
          const childHeight = 40.0;
          const childWidth = 60.0;

          /// 平移后Widget 变成3倍大小
          const targetChildHeight = childHeight * 3;
          const targetChildWidth = childWidth * 3;

          /// 计算起始位置 左上角 -> 右下角
          /// 根据自身大小，以及父布局大小获取相对位置
          var beginRect = RelativeRect.fromSize(
            const Rect.fromLTWH(0, 0, childWidth, childHeight),
            biggest,
          );

          var endRect = RelativeRect.fromSize(
            Rect.fromLTWH(
              biggest.width - targetChildWidth,
              biggest.height - targetChildHeight,
              targetChildWidth,
              targetChildHeight,
            ),
            biggest,
          );

          /// 补间动画
          final rectAnimation =
              RelativeRectTween(begin: beginRect, end: endRect)
                  .animate(_controller);

          return Stack(
            children: [
              PositionedTransition(
                rect: rectAnimation,
                child: Container(
                  width: childWidth,
                  height: childHeight,
                  color: Colors.red,
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

3.3.2 效果图

---

3.4 RelativePositionedTransition

RelativePositionedTransition 与 PositionedTransition类似，只是RelativePositionedTransition需要传参父容器的尺寸以及平移起始位置，它帮我们计算RelativeRect。

RelativePositionedTransition 必须放置在 Stack Widget 中。

RelativePositionedTransition 基于 Rect 与 Size 确定平移位置

3.4.1 实现Widget位置平移、尺寸变换的非曲线动画

class RelativePositionedTransitionPage extends StatefulWidget {
  const RelativePositionedTransitionPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _RelativePositionedTransitionPageState();
}

class _RelativePositionedTransitionPageState extends State<RelativePositionedTransitionPage>
    with SingleTickerProviderStateMixin {
  /// 可重复播放，持续时间为5秒的动画控制器
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 5),
    vsync: this,
  )..repeat(reverse: true);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// 计算容器的尺寸
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final Size biggest = constraints.biggest;

          /// 需要平移的Widget 宽高
          const childHeight = 40.0;
          const childWidth = 60.0;

          /// 平移后Widget 变成3倍大小
          const targetChildHeight = childHeight * 3;
          const targetChildWidth = childWidth * 3;

          /// 计算起始位置 左上角 -> 右下角
          var beginRect = const Rect.fromLTWH(0, 0, childWidth, childHeight);
          var endRect = Rect.fromLTWH(
            biggest.width - targetChildWidth,
            biggest.height - targetChildHeight,
            targetChildWidth,
            targetChildHeight,
          );

          /// 补间动画
          final rectAnimation =
              RectTween(begin: beginRect, end: endRect).animate(
            CurvedAnimation(
              parent: _controller,
              curve: Curves.easeInCirc,
            ),
          );

          return Stack(
            children: [
              RelativePositionedTransition(
                rect: rectAnimation,
                size: biggest,
                child: Container(
                  width: childWidth,
                  height: childHeight,
                  color: Colors.red,
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

3.4.2 效果图