当前位置: 首页 > news >正文

flutter系列之:使用AnimationController来控制动画效果

文章目录

  • 简介
  • 构建一个要动画的widget
  • 让图像动起来
  • 总结

简介

之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果,但是要完全实现自定义的复杂的动画效果,还是要使用AnimationController。

今天我们来尝试使用AnimationController来实现一个拖拽图片,然后返回原点的动画。

构建一个要动画的widget

在本文的例子中,我们希望能够让一个图片可以实现拖拽然后自动返回原来位置的效果。

为了实现这个功能,我们首先构建一个放在界面中间的图片。

      child: Align(alignment: Alignment.center,child: Card(child: Image(image: AssetImage('images/head.jpg'))),)

这里使用了Align组件,将一个图片对象放在界面中间。

接下来我们希望这个widget可以拖拽,那么把这个child放到一个GestureDetector中,这样就可以相应拖拽对应的响应。

 Widget build(BuildContext context) {final size = MediaQuery.of(context).size;return GestureDetector(onPanUpdate: (details) {setState(() {_animateAlign += Alignment(details.delta.dx / (size.width / 2),details.delta.dy / (size.height / 2),);});},child: Align(alignment: _animateAlign,child: Card(child: widget.child,),),);}

为了能实现拖动的效果,我们需要在GestureDetector的onPanUpdate方法中对Align的位置进行修改,所以我们需要调用setState方法。

在setState方法中,我们根据手势的位置来调整Alignment的位置,所以这里需要用到MediaQuery来获取屏幕的大小。

但是现在实现的效果是图像随手势移动而移动,我们还需要实现在手放开之后,图像自动回复到原来位置的动画效果。

让图像动起来

因为这次需要变动的是Alignment,所以我们先定义一个包含Alignment的Animation属性:

  late Animation<Alignment> _animation;

接下来我们需要定义一个AnimationController,用来控制动画信息,并且指定我们需要的动画起点和终点:

  late AnimationController _controller;_animation = _controller.drive(AlignmentTween(begin: _animateAlign,end: Alignment.center,),);

我们动画的起点位置就是当前image所在的Alignment,终点就在Alignment.center。

Alignment有一个专门表示位置信息的类叫做AlignmentTween,如上代码所示。

有了起点和终点, 我们还需要指定从起点移动到终点的方式,这里模拟使用弹簧效果,所以使用SpringSimulation。

SpringSimulation需要提供对spring的描述,起点距离,结束距离和初始速度。

    const spring = SpringDescription(mass: 30,stiffness: 1,damping: 1,);final simulation = SpringSimulation(spring, 0, 1, -1);

我们使用上面创建的simulation,来实现动画:

    _controller.animateWith(simulation);

最后我们需要在手势结束的时候来执行这个动画即可:

      onPanEnd: (details) {_runAnimation();},

最后,运行效果如下所示:

总结

AnimationController是一个很强大的组件,但是使用起来也不是那么的复杂, 我们只需要定义好起点和终点,然后指定动画效果即可。

本文的例子:https://github.com/ddean2009/learn-flutter.git

相关文章:

flutter系列之:使用AnimationController来控制动画效果

文章目录 简介构建一个要动画的widget让图像动起来总结 简介 之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果&#xff0c;但是要完全实现自定义的复杂的动画效果&#xff0c;还是要使用AnimationController。 今天我…...

golang 函数调用栈笔记

一个被函数在栈上的情况&#xff1a;&#xff08;栈从高地址向低地址延伸&#xff09; 返回地址&#xff08;函数执行结束后&#xff0c;会跳转到这个地址执行&#xff09; BP&#xff08;函数的栈基&#xff09;局部变量返回值&#xff08;指的是函数返回值&#xff0c;eg&am…...

云端一体助力体验升级和业务创新

随着音视频和AI技术的发展&#xff0c;在满足用户基础体验和需求情况下&#xff0c;更极致的用户体验和更丰富的互动玩法&#xff0c;成为各个平台打造核心竞争力的关键。LiveVideoStackCon 2022 北京站邀请到火山引擎视频云华南区业务负责人——张培垒&#xff0c;基于节跳动音…...

【Linux Network】高级IO

目录 前言 五种IO模型 阻塞IO 非阻塞IO 信号驱动IO IO多路转接 异步IO 小结 同步通信 vs 异步通信 阻塞 vs 非阻塞 其他高级IO 非阻塞IO fcntl函数 代码测试 高级IO&#x1f337; 前言 IO&#xff1a;所谓的I便是 input&#xff0c;所谓的O便是 output&#xff0c;简单点来说&a…...

Python语言基本控制结构

Python语言基本控制结构包括&#xff1a;条件语句&#xff1a;if、elif、else 循环语句&#xff1a;for、while 跳转语句&#xff1a;break、continue、return 下面是它们的基本用法&#xff1a; 条件语句 if condition1: statement1 elif condition2: statement2 else: stat…...

旅游网站版面设计方案

门户网站的页面设计&#xff1a;采用天蓝色为主色调、以红色、绿色为基调&#xff0c;突出网站的青春活波性。 网站风格尽量简单统一、容易让大多数上网者接受&#xff0c;个性化的网站&#xff0c;再者&#xff0c;网站有主体信息结构及布 word . . . . 局&#xff0c;它是总体…...

sudo unable to open read-only file system”的原因

此错误是由多种原因引起的&#xff0c;包括&#xff1a; 文件系统不一致。文件系统配置错误&#xff08;/etc/fstab 文件中的错误条目&#xff09;。由于各种原因&#xff08;包括突然断电或电缆损坏&#xff09;导致系统意外或突然关闭。在某些情况下&#xff0c;Windows 的双…...

Dynamics 365 DevOps CI/CD之WebResource

对于D365自身的发布&#xff0c;简单点来说就是Solution的发布&#xff0c;复杂一些会涉及周边集成接口等一系列的发布。如果是单纯的Solution的发布的Azure DevOps商店里有很多工具&#xff0c;比如Power DevOps Tools&#xff0c;这个我之前也有博文转载过相关文章&#xff0…...

Linux常用指令及基础配置

Linux常用指令及基础配置 Linux系统操作指令文件管理指令系统设置相关指令addr2line的运用 vim相关vim配置操作Vim功能操作分屏擦操作删除操作换行符转换操作&#xff1a;文件比较合并操作折叠指令 Linux系统操作指令 文件管理指令 find ./ -iname filename find ./ -name “…...

Linux 服务器上Nvidia相关指令

1、GPU驱动的内存常驻模式 1&#xff09;操作命令: 确保你具有root或sudo权限&#xff0c;以执行下面的命令。打开终端或命令行界面。运行以下命令来设置GPU驱动的内存常驻模式&#xff1a; nvidia-smi -pm 1这会将GPU驱动程序设置为内存常驻模式。 4. 验证设置是否成功。运…...

ChatGPT的工作原理是什么?

ChatGPT是美国OpenAI研发的聊天机器人程序&#xff0c;2022年11月30日发布。ChatGPT是人工智能技术驱动的自然语言处理工具&#xff0c;它能够通过理解和学习人类的语言来进行对话。 ChatGPT的原理 ChatGPT是一种基于人工智能技术的自然语言生成模型&#xff0c;它能够从大量…...

C++进阶——红黑树

C进阶——红黑树 概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过 对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩 倍&…...

什么是NTFS for Mac?2023新版本如何下载

在NTFS for Mac中包含了多种功能操作&#xff0c;促进软件更好地使用&#xff0c;可以进行全局设置&#xff0c;也可以针对某一各挂载的磁盘进行针对性设置。 本集小编主要向大家介绍它包含的一些基本功能&#xff0c;看看这款mac读写工具能够实现那些功能&#xff0c;全面了解…...

Python泰裤辣丨520写一个自动换壁纸软件,将女友照骗放进去送给她

Python泰裤辣!520写一个自动换壁纸软件&#xff0c;将女友照骗放进去送给她! 准备工作1、环境2、使用的模块3、如何配置pycharm里面的python解释器?4、pycharm如何安装插件? 代码实战1、获取壁纸 自动更换壁纸程序最后 话说兄弟们&#xff0c;今天520你们都送给女朋友啥礼物了…...

CMake: 设置编译选项

CMake: 设置编译选项 导言编译器选项相关概念编译器选项设置补充 导言 上一篇我们学习了构建类型的相关内容&#xff0c;并且可以生成了不同构建类型的库&#xff0c;这一篇我们将介绍编译器选项的相关内容。 编译器选项相关概念 编译器选项是指在编译程序时&#xff0c;可以…...

美团Java开发一面凉经

目录 1.HashMap底层数据结构2.列举几个常见的线程安全容器3.HashMap线程问题4.concurrentHashMap5.ConcurrentModificationException6.Spring AOP、IOC、DI介绍下7.不使用依赖注入&#xff0c;使用传统方式的声明会有什么问题8.最左前缀原则9.TCP三次握手、四次挥手 1.HashMap底…...

Java面试知识点(全)-spring面试知识点二

Java面试知识点(全) 导航&#xff1a; https://nanxiang.blog.csdn.net/article/details/130640392 注&#xff1a;随时更新 Spring 事物 事务简介&#xff1a; 事务管理是企业级应用程序开发中必不可少的技术&#xff0c;用来确保数据的完整性和一致性 事务就是一系列的动作&…...

【音视频开发】基础知识:视频封装格式和编码格式

文章目录 一、封装格式与编码格式的关系视频编码格式视频封装格式MP43GPRM、RMVBAVI、WMVVOBFLVMKVWebMMOVTS 封装格式与编码格式对应 一、封装格式与编码格式的关系 视频编码格式和视频封装格式的关系及区别 这两者的关系好比酒与酒瓶的关系&#xff0c;编码格式好比酒瓶里的…...

OData Web API 一个开放标准的协议

OData Web API 是一个开放标准的协议&#xff0c;用于创建和使用基于 RESTful 的 Web API。它允许开发人员通过统一的方式来发布、查询、操作和管理数据资源。 OData Web API 基于 OData 协议&#xff0c;该协议定义了一组规范和约定&#xff0c;用于建立与数据源交互的标准化…...

PT100温度采集

1、信号采集的基本原理 PT100是将温度信号转换为电阻输出&#xff0c;其电阻值变化范围为0~200Ω。AD转换器只能对电压进行转换&#xff0c;无法采集直接采集温度&#xff0c;因此&#xff0c;需要一个1mA恒电流源给PT100供电&#xff0c;将电阻变化转换为电压变化。使用恒流源…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...