来,滑动到下一个小姐姐
前言
我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder
或 AnimatedWidget
完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition。本篇要介绍的就是 SlideTransition
,顾名思义,就知道是滑动转换动画。我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示。
SlideTransition 介绍
SlideTransition
实际上是 AnimatedWidget
子类,其构造方法定义如下:
其中 position
是关键参数,他表示一个位置偏移的动画,实际上就是通过修改子组件的位置偏移量来完成滑动动画效果的。回顾一下我们 AnimatedWidget 的使用的介绍:Flutter 构建三维空间动画效果。只要我们通过一个 AnimationController
控制 Animation
对象就可以实现动画的控制。使用 SlideTransition
也是一样。我们想要实现组件滑动,那就使用 AnimationController
控制一个 Animation<Offset>
对象就可以了。这里需要注意,position 设定的位置便宜是一个比例参数,即位置是子组件的尺寸乘以 Offset
对象的值。
比如我们想让组件从左边滑入,那么可以设置 dx
为负值;而如果是想从右边滑入,那么可以设置 dx
为正值。同理,想上滑入或下滑入也是一样,只是调整 dy
的值就可以了。而通过 dx
和 dy
的组合,就可以实现斜线方向的滑入滑出效果了。
示例效果实现
示例动效实际上我们使用的是一个 Stack 组件,将两张图片分别作为两个 SlideTransition
的子组件层叠在一起。而把那张未出现的图片的初始横向位置设置在左侧显示区域外。当启动动画的时候,之前显示的图片的横向位置调整到右侧显示区域外,从而实现右侧滑出效果;原先在左侧显示区域外的图片的横向位置调整到 0,使得占据之前图片的位置,从而实现左侧滑入的效果。点击按钮的时候,就是控制 AnimationController
的forward
方法驱动动画,然后再次点击到时候调用 reverse
方法恢复即可。代码如下:
总结
本篇介绍了 SlideTransition
转换动画类及其应用。通过 SlideTransition
我们还可以实现很多其他动画效果,例如图片浏览、滑动卡片等。
版权声明: 本文为 InfoQ 作者【岛上码农】的原创文章。
原文链接:【http://xie.infoq.cn/article/49da40196f0058ce869a6b6a2】。文章转载请联系作者。
评论