经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Flutter » 查看文章
Android Flutter实现图片滑动切换效果
来源:jb51  时间:2022/4/7 10:49:31  对本文有异议

前言

我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 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 的使用的介绍:Flutter 怎么实现3D 动画效果?只要我们通过一个 AnimationController 控制 Animation 对象就可以实现动画的控制。使用 SlideTransition 也是一样。我们想要实现组件滑动,那就使用 AnimationController 控制一个 Animation<Offset> 对象就可以了。这里需要注意,position 设定的位置是一个比例参数,即位置是子组件的尺寸乘以 Offset 对象的值。

new_x?=?width?*?dx;
new_y?=?height?*?dy;

比如我们想让组件从左边滑入,那么可以设置 dx 为负值;而如果是想从右边滑入,那么可以设置 dx 为正值。同理,想上滑入或下滑入也是一样,只是调整 dy 的值就可以了。而通过 dx 和 dy 的组合,就可以实现斜线方向的滑入滑出效果了。

示例效果实现

示例动效实际上我们使用的是一个 Stack 组件,将两张图片分别作为两个 SlideTransition 的子组件层叠在一起。而把那张未出现的图片的初始横向位置设置在左侧显示区域外。当启动动画的时候,之前显示的图片的横向位置调整到右侧显示区域外,从而实现右侧滑出效果;原先在左侧显示区域外的图片的横向位置调整到0,使得占据之前图片的位置,从而实现左侧滑入的效果。点击按钮的时候,就是控制 AnimationController 的forward方法驱动动画,然后再次点击到时候调用 reverse 方法恢复即可。代码如下:

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

??@override
??_SlideTransitionDemoState?createState()?=>?_SlideTransitionDemoState();
}

class?_SlideTransitionDemoState?extends?State<SlideTransitionDemo>
????with?SingleTickerProviderStateMixin?{
??bool?_forward?=?true;
??final?begin?=?Offset.zero;
??//?第一张图片结束位置移出右侧屏幕
??final?end1?=?Offset(1.1,?0.0);
??//?第二张图片的初始位置在左侧屏幕
??final?begin2?=?Offset(-1.1,?0.0);
??late?Tween<Offset>?tween1?=?Tween(begin:?begin,?end:?end1);
??late?Tween<Offset>?tween2?=?Tween(begin:?begin2,?end:?begin);

??late?AnimationController?_controller?=
??????AnimationController(duration:?const?Duration(seconds:?1),?vsync:?this);

??//使用自定义曲线动画过渡效果
??late?Animation<Offset>?_animation1?=?tween1.animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Curves.easeInOut,
????),
??);
??late?Animation<Offset>?_animation2?=?tween2.animate(CurvedAnimation(
????parent:?_controller,
????curve:?Curves.easeInOut,
??));

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('SlideTransition'),
????????brightness:?Brightness.dark,
????????backgroundColor:?Colors.black,
??????),
??????backgroundColor:?Colors.black,
??????body:?Center(
????????child:?Container(
??????????padding:?EdgeInsets.all(10.0),
??????????child:?Stack(
????????????children:?[
??????????????SlideTransition(
????????????????child:?ClipOval(
??????????????????child:?Image.asset('images/beauty.jpeg'),
????????????????),
????????????????position:?_animation1,
??????????????),
??????????????SlideTransition(
????????????????child:?ClipOval(
??????????????????child:?Image.asset('images/beauty2.jpeg'),
????????????????),
????????????????position:?_animation2,
??????????????),
????????????],
??????????),
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Icon(Icons.swap_horizontal_circle_sharp),
????????onPressed:?()?{
??????????setState(()?{
????????????if?(_forward)?{
??????????????_controller.forward();
????????????}?else?{
??????????????_controller.reverse();
????????????}
????????????_forward?=?!_forward;
??????????});
????????},
??????),
????);
??}
}

总结

本篇介绍了 SlideTransition 转换动画类及其应用。通过 SlideTransition 我们还可以实现很多其他动画效果,例如图片浏览、滑动卡片等。

到此这篇关于Android Flutter实现图片滑动切换效果的文章就介绍到这了,更多相关Flutter图片滑动切换内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接: NPS