Android Flutter实现图片滑动切换效果


Posted in Java/Android onApril 07, 2022

前言

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

Android Flutter实现图片滑动切换效果

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图片滑动切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Java/Android 相关文章推荐
详解Java实现数据结构之并查集
Jun 23 Java/Android
总结一下关于在Java8中使用stream流踩过的一些坑
Jun 24 Java/Android
SpringCloud的JPA连接PostgreSql的教程
Jun 26 Java/Android
spring cloud gateway中如何读取请求参数
Jul 15 Java/Android
聊聊SpringBoot自动装配的魔力
Nov 17 Java/Android
Java生成日期时间存入Mysql数据库的实现方法
Mar 03 Java/Android
Netty分布式客户端处理接入事件handle源码解析
Mar 25 Java/Android
Java字符缓冲流BufferedWriter
Apr 09 Java/Android
Java Spring Boot 正确读取配置文件中的属性的值
Apr 20 Java/Android
Android Studio 计算器开发
May 20 Java/Android
springboot读取resources下文件的方式详解
Jun 21 Java/Android
JDK8中String的intern()方法实例详细解读
Sep 23 Java/Android
MyBatis配置文件解析与MyBatis实例演示
Java 深入探究讲解简单工厂模式
springboot用户数据修改的详细实现
Apr 06 #Java/Android
Java中API的使用方法详情
Java 获取Word中所有的插入和删除修订的方法
springboot应用服务启动事件的监听实现
Apr 06 #Java/Android
Java十分钟精通进阶适配器模式
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP初学者头疼问题总结
2006/10/09 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jquery实现加载等待效果示例
2013/09/25 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python安装以及IDE的配置教程
2015/04/29 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
总监职责范文
2013/11/09 职场文书
音乐学个人的自荐书范文
2013/11/26 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
销售代理协议书
2014/09/30 职场文书
导游词300字
2015/02/13 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript