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

前言

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

SlideTransition 介绍

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

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

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

你可能感兴趣的:(Flutter动画专题,flutter,android,前端,移动开发,App,开发)