Flutter 滑动切换动画效果实现详解

前言

我们开始来介绍转换类的动画组件，实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成， Flutter 为了简化开发，提供了不少转换动画组件，这类组件通常命名为 xxTransition。本篇要介绍的就是 SlideTransition，顾名思义，就知道是滑动转换动画。我们本篇来实现两张小姐姐图片的滑动切换，效果如下图所示。

SlideTransition 介绍

SlideTransition 实际上是 AnimatedWidget 子类，其构造方法定义如下：

const SlideTransition({
  Key? key,
  required Animation<Offset> position,
  this.transformHitTests = true,
  this.textDirection,
  this.child,
})

其中 position 是关键参数，他表示一个位置偏移的动画，实际上就是通过修改子组件的位置偏移量来完成滑动动画效果的。回顾一下我们 AnimatedWidget 的使用的介绍：Flutte