flutter开发实战-实现左右来回移动的按钮引导动画效果
flutter开发实战-实现左右来回移动的按钮引导动画效果
最近开发过程中需要实现左右来回移动的按钮引导动画效果

一、动画
AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。AnimationController两个监听Listener如下
-
addListener
addListener();它可以用于给Animation添加帧监听器,在每一帧都会被调用。帧监听器中最常见的行为是改变状态后调用setState()来触发UI重建。 -
addStatusListener
addStatusListener();它可以给Animation添加“动画状态改变”监听器;动画开始、结束、正向或反向(见AnimationStatus定义)时会调用状态改变的监听器。
二、实现左右来回移动的按钮引导动画效果
在使用动画时候需要TickerProviderStateMixin或者SingleTickerProviderStateMixin
当需要多个Animation,则使用TickerProviderStateMixin
注意:在使用AnimationController的时候需要结合TickerProvider,因为只有在TickerProvider下才能配置AnimationController中的构造参数vsync。TickerProvider是一个抽象类,所以我们一般使用它的实现类TickerProviderStateMixin和SingleTickerProviderStateMixin。
实现左右来回移动的按钮引导动画效果代码效果
import 'package:flutter/material.dart';class ShakeContainer extends StatefulWidget {const ShakeContainer({required this.child, Key? key}) : super(key: key);final Widget child;@override_ShakeContainerState createState() => _ShakeContainerState();
}class _ShakeContainerState extends State<ShakeContainer>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _animation;@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController =AnimationController(vsync: this, duration: Duration(milliseconds: 600));//使用弹性曲线_animation =CurvedAnimation(parent: _animationController, curve: Curves.easeOut);_animation = Tween(begin: 0.0, end: 1.0).animate(_animation);_animationController.addListener(() {if (mounted) {setState(() {});}});_animationController.addStatusListener((status) {if (status == AnimationStatus.completed) {_animationController.reverse();} else if (status == AnimationStatus.dismissed) {_animationController.forward();}});_animationController.forward();}void animationDispose() {_animationController.dispose();}@overridevoid dispose() {// TODO: implement disposeanimationDispose();super.dispose();}@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,child: Transform(///构建Matrix4transform: buildMatrix4(),///中心对齐alignment: Alignment.center,child: widget.child,),);}Matrix4 buildMatrix4() {double dx = 0;double dy = 0;///x轴方向平移dx = _animation.value * 60;return Matrix4.translationValues(dx, dy, 0);}
}/// 左右摆动的心
class HeartItem extends StatelessWidget {const HeartItem({Key? key}): super(key: key);@overrideWidget build(BuildContext context) {return Container(width: 200.0,height: 150.0,alignment: Alignment.center,child: Image.asset("assets/images/touch_here.png",width: 200.0,height: 150,),);}
}
在代码中用到了Matrix4.translationValues(dx, dy, 0); 可以在指定的x、或者y轴方向平移。

三、小结
flutter开发实战-实现左右来回移动的按钮引导动画效果。
学习记录,每天不停进步。
相关文章:
flutter开发实战-实现左右来回移动的按钮引导动画效果
flutter开发实战-实现左右来回移动的按钮引导动画效果 最近开发过程中需要实现左右来回移动的按钮引导动画效果 一、动画 AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。Animati…...
ROS实现自定义信息以及使用
常见的消息包 消息包定义一般如下👇 (1)创建包和依赖项 (2)在新建的qq_msgs的包新建msgs的文件夹,在该文件夹里面新建Carry.msg类型的文件。 其实,Carry.msg就是你自己定义的消息类型&am…...
初始C语言——详细讲解操作符以及操作符的易错点
系列文章目录 第一章 “C“浒传——初识C语言(更适合初学者体质哦!) 第二章 详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言——特别详细地介绍函数 第四章 初始C语言——详细地讲解数组的内容以及易错点 第五章 初始C语言—…...
论文写作常用词句积累
X 连接词 表目的To this end/Toward that endto do soto this aimso as toTo tackle these issuesfor the sake ofaiming to do表转折howeverNevertheless表递进moreverFurthermore表对比on the other hand/On the contraryAlternativelyas in the case ofwhereas表顺序in a f…...
伺服系统::编码器
一、主要分类 二、组成与原理 光电编码器 磁编码器:N-->磁感元件(0);S-->磁感元件(1)》脉冲 增量编码器的分辨率、倍频与细分技术 (99 封私信 / 81 条消息) 编码器有什么分类? - 知乎 (z…...
Git全栈体系(五)
第八章 IDEA 集成 GitHub 一、设置 GitHub 账号 如果出现 401 等情况连接不上的,是因为网络原因,可以使用以下方式连接: 然后去 GitHub 账户上设置 token。 点击生成 token。 复制红框中的字符串到 idea 中。 点击登录。 二、分享工程…...
spring-boot webservice的例子
webservice发布服务 源码下载地址 spring-boot-webservice例子资源-CSDN文库 webservice cilent调用 源码下载地址 spring-boot-clintwebservice调用服务的例子资源-CSDN文库...
第八章 SpringBoot @ConfigurationProperties配置绑定
原始做法:读取到文件内容,再进行bean的绑定 public static void readProperties(String propertiesPath) throws IOException {Properties pps new Properties();pps.load(MainApplication.class.getClassLoader().getResourceAsStream("applicat…...
【SpringBoot】88、SpringBoot中使用Undertow替代Tomcat容器
SpringBoot 中我们既可以使用 Tomcat 作为 Http 服务,也可以用 Undertow 来代替。Undertow 在高并发业务场景中,性能优于 Tomcat。所以,如果我们的系统是高并发请求,不妨使用一下 Undertow,你会发现你的系统性能会得到很大的提升。 1、Tomcat 介绍 Tomcat是一个开源的Ja…...
java8 求和
1.BigDecimal求和 对象字段求和 List<Car> listnew ArrayList<>(); BigDecimal sumOfBigDecimals list.stream().filter(Objects::nonNull).filter(c -> c.getMiles() ! null).map(Car::getMiles).reduce(BigDecimal.ZERO, BigDecimal::add);BigDecimal集合求…...
手眼标定眼在手上
1、为什么要用手眼标定 参考手眼标定特别是眼在手上在网上的文章很多,但很多在实际中调试不通。在定位时候,往往希望相机能返回的是机械的世界坐标,而不是相机的的图像坐标。从而间接计算出相机坐标系与机械坐标世界坐标转换矩阵,…...
【数据结构】初始二叉树
满二叉树 每个结点都有左右子树的二叉树。 完全二叉树 从上到下、从左到右排列,不落下一个结点进行排列的二叉树。 二叉树的性质 第i层最多有2(i-1)个结点深度为k的二叉树最多有 2k-1 个结点因为一颗深度为k的满二叉树的结点有2k-1,即nk-1ÿ…...
创建和使用角色(RHCE)
题目: 创建和使用角色 根据下列要求,在 /home/curtis/ansible/roles 中创建名为 apache 的角色: httpd 软件包已安装,设为在系统启动时启用并启动 防火墙已启用并正在运行,并使用允许访问 Web 服务器的规则 模板文件 i…...
Leetcode 583 两个字符串的删除操作(经典)
【问题描述】 给定两个单词 word1 和 word2 ,返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 示例 1: 输入: word1 "sea", word2 "eat" 输出: 2 解释: 第一步将 "sea" 变为…...
c#实现工厂模式
可以使用以下代码实现C#中的工厂模式: 首先,定义一个接口作为产品的抽象: public interface IProduct {void Operation(); }然后,创建具体的产品类: public class ConcreteProductA : IProduct {public void Operat…...
c#在设计时调试自定义 Windows 窗体控件
private string demoStringValue null; [Browsable(true)] public string DemoString {get{return this.demoStringValue;}set{demoStringValue value;} } 参考链接 在设计时调试自定义控件 - Windows Forms .NET Framework | Microsoft Learnhttps://learn.microsoft.com/z…...
Ajax 笔记(二)—— Ajax 案例
笔记目录 2. Ajax 综合案例2.1 案例一-图书管理2.1.1 渲染列表2.1.2 新增图书2.1.3 删除图书2.1.4 编辑图书 2.2 案例二-背景图的上传和更换2.2.1 上传2.2.2 更换 2.3 案例三-个人信息设置2.3.1 信息渲染2.3.2 头像修改2.2.3 信息修改2.3.4 提示框 Ajax 笔记: Ajax…...
微信小程序隐私协议模板
在 设置 中找到 用户隐私保护 进行更新,如下图: 具体协议补充可参考如下: 为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像 为了显示距离,开发者将在获取你的明示同意后,收…...
Three.js WebXR沉浸式渲染简明教程
在前面文章中,我们了解了 VR 概念以及它们如何在 WebXR 中映射。 这使你可以考虑想要为用户提供的体验。 在本文中,我们将介绍如何将 WebXR 与 Three.JS 结合使用来创建针对大型异构用户群的沉浸式体验。 警告:WebXR API 仍在完善中…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
