上述就是android开发分享Android Flutter实现图片滑动切换效果的全部内容，如果对大家有所用处且需要了解更多关于Android学习教程，希望大家多多关注—计算机技术网(www.ctvol.com)!
前言
我们开始来介绍转换类的动画组件，实际上这类转换动画组件也可以自己通过 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图片滑动切换内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/addevelopment/1073913.html