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开发实战-实现左右来回移动的按钮引导动画效果。
学习记录,每天不停进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31101.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue】input 事件

input 事件是在用户输入内容时触发的事件。它适用于包含文本输入框&#xff08;例如 <input> 或 <textarea>&#xff09;的元素&#xff0c;以及可编辑的内容区域&#xff08;例如 <div contenteditable>&#xff09;。 当用户在输入框中输入文本、复制粘贴…

Vite 创建 Vue项目之后,eslint 错误提示的处理

使用 npm create vuelatest创建 vue 项目&#xff08;TS&#xff09;之后&#xff0c;出现了一些 eslint 错误提示&#xff0c;显然&#xff0c;不是代码真实的错误&#xff0c;而是提示搞错了。 vuejs/create-vue: &#x1f6e0;️ The recommended way to start a Vite-pow…

勘探开发人工智能技术:机器学习(3)

0 提纲 4.1 logistic回归 4.2 支持向量机(SVM) 4.3 PCA 1 logistic回归 用超平面分割正负样本, 考虑所有样本导致的损失. 1.1 线性分类器 logistic 回归是使用超平面将空间分开, 一边是正样本, 另一边是负样本. 因此, 它是一个线性分类器. 如图所示, 若干样本由两个特征描…

Ubuntu 20.04 中安装docker一键安装脚本

直接上脚本&#xff0c;依次执行如下命令即可 wget http://apollo-pkg-beta.bj.bcebos.com/docker_install.sh bash docker_install.shdocker install docker operation system Ubuntu 18.04 直接上脚本&#xff0c;依次执行如下命令即可 ways1 : wget https://github.com…

FPGA应用学习-----FIFO双口ram解决时钟域+asic样机的时钟选通

60m写入异步ram&#xff0c;再用100M从ram中读出 写地址转换为格雷码后&#xff0c;打两拍和读地址判断是否空产生。相反读地址来判断是否满产生。 分割同步模块 asic时钟的门控时钟&#xff0c;fpga是不推荐采用门控时钟的&#xff0c;有很多方法移除fpga的时钟选通。 如果是a…

Plugin 插件

Plugin 插件 插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的插件。 常用插件 clean-webpack-plugin 自动清理输出目录 html-webpack-plugin 自动生成使用 bundle.js 的 HTML copy-webpack-plugin 拷贝文件到输出目…

天花板级,Python接口自动化测试-接口关联封装调用(实例)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 流程相关的接口&a…

docker基本使用方法

docker使用 1. Docker 介绍 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。Docker 使您能够将应用程序与基础架构分开&#xff0c;从而可以快速交付软件。通过利用 …

Zabbix 6.0 监控其他

文章目录 一、Zabbix 监控 Windows 系统1&#xff09;下载 Windows 客户端 Zabbix agent 22&#xff09;安装客户端&#xff0c;配置3&#xff09;在服务端 Web 页面添加主机&#xff0c;关联模板 二、Zabbix 监控 java 应用1&#xff09;客户端开启 java jmxremote 远程监控功…

2500、删除每行中最大值在IDEA中调试Java

leetcode:2500、删除每行中最大值在IDEA中调试&#xff0c;使用Java实现 题目描述&#xff1a; 给你一个 m x n 大小的矩阵 grid &#xff0c;由若干正整数组成。 执行下述操作&#xff0c;直到 grid 变为空矩阵&#xff1a; 从每一行删除值最大的元素。如果存在多个这样的…

MySQL_多表查询

多表查询 概述&#xff1a;多表查询就是多张表之间的查询。 回顾&#xff1a;SELECT * FROM table_name 多表查询 from 后面就得跟多张表。如&#xff1a;select * from emp,dept 笛卡尔积&#xff1a;笛卡尔积在数学中&#xff0c;表示两个集合&#xff0c;集合 A 和集合 …

Django实现音乐网站 ⑽

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是后台对歌曲类型、歌单功能原有功能进行部分功能实现和显示优化。 目录 歌曲类型功能优化 新增编辑 优化输入项标题显示 父类型显示改为下拉菜单 列表显示 父类型显示名称 过滤器增加父类型 歌单表功能优化…

# X11、Xlib、XFree86、Xorg、GTK、Qt、Gnome和KDE之间的关系

X11、Xlib、XFree86、Xorg、GTK、Qt、Gnome和KDE之间的关系 很多人对于他们是啥是傻傻分不清的&#xff0c;我做了个表格供大家参考。 摘抄&#xff1a; X11是X Window System Protocol, Version 11&#xff08;RFC1013&#xff09;&#xff0c;是X server和X client之间的通…

Android多渠道打包+自动签名工具 [原创]

多渠道打包自动签名工具 [原创] github源码&#xff1a;github.com/G452/apk-packer 如果觉得有帮助可以点个小星星支持一下&#xff0c;万分感谢&#xff01; 使用步骤&#xff1a; 1、在apk-packer.exe目录内放入打包需要的配置&#xff1a; 1&#xff09;签名文件.jks2&am…

各种变形链表(循环链表、双向链表、带头结点的链表等)的表示和基本操作的实现

目录 双向链表双链表的插入操作双链表的删除操作 循环链表循环双链表静态链表 双向链表 单链表节节点中只有一个指向其后继的指针&#xff0c;使得单链表只能从头结点一次顺序的向后遍历。要访问某个记得点的前驱结点&#xff08;插入、删除操作时&#xff09;&#xff0c;只能…

flutter开发实战-just_audio实现播放音频暂停音频设置音量等

flutter开发实战-just_audio实现播放音频暂停音频设置音量等 最近开发过程中遇到需要播放背景音等音频播放&#xff0c;这里使用just_audio来实现播放音频暂停音频设置音量等 一、引入just_audio 在pubspec.yaml引入just_audio just_audio: ^2.7.0在iOS上&#xff0c;video_p…

Michael.W基于Foundry精读Openzeppelin第23期——ERC165Checker.sol

Michael.W基于Foundry精读Openzeppelin第23期——ERC165Checker.sol 0. 版本0.1 ERC165Checker.sol 1. 目标合约2. 代码精读2.1 supportsERC165InterfaceUnchecked(address account, bytes4 interfaceId)2.2 supportsERC165(address account)2.3 supportsInterface(address acc…

Upgrading to WebSocket events.js:352 报错问题

将http-proxy-middleware升级到0.20.0就行了 安装依赖 npm install http-proxy-middleware npm install --save-dev http-proxy-middleware 通过express来使用该中间件&#xff0c;安装expressnpm install express 在demo文件夹下创建server.js文件作为代理使用 在demo文件…

【Express.js】全面鉴权

全面鉴权 这一节我们来介绍一下 Passport.js&#xff0c;这是一个强大的 NodeJS 的认证中间件 Passport.js 提供了多种认证方式&#xff0c;账号密码、OpenID、ApiKey、JWT、OAuth、三方登录等等。 使用 Passport.js 认证要配置三个部分&#xff1a; 认证策略中间件会话 接…

springboot整合JMH做优化实战

这段时间接手项目出现各种问题&#xff0c;令人不胜烦扰。吐槽下公司做项目完全靠人堆&#xff0c;大上快上风格注定留下一地鸡毛&#xff0c;修修补补不如想如何提升同事代码水准免得背锅。偶然看到关于JMH对于优化java代码的直观性&#xff0c;于是有了这篇文章&#xff0c;希…