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 仍在完善中…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
Java数组Arrays操作全攻略
Arrays类的概述 Java中的Arrays类位于java.util包中,提供了一系列静态方法用于操作数组(如排序、搜索、填充、比较等)。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序(sort) 对数组进行升序…...
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
这个警告表明您在使用Vue的esm-bundler构建版本时,未明确定义编译时特性标志。以下是详细解释和解决方案: 问题原因: 该标志是Vue 3.4引入的编译时特性标志,用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler…...
