Flutter:AnimatedIcon图标动画,自定义Icon通过延时Interval,实现交错式动画

embedded/2024/11/25 1:17:58/

在这里插入图片描述

配置vsync,需要实现一下with SingleTickerProviderStateMixin
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{// late延迟初始化  AnimationControllerlate AnimationController _controller;@overridevoid initState() {super.initState();// 初始化 AnimationController_controller = AnimationController(duration: const Duration(milliseconds: 500),vsync:this, // 让程序和手机的刷新频率统一);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Center(child: Column(children: [AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller,size: 40,color: Colors.red,),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('播放')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('返回')),],),),);}
}

AnimatedIcons参数选项包含:

add_event
arrow_menu
close_menu
ellipsis_search
event_add
home_menu
list_view
menu_arrow
menu_close
menu_home
pause_play
play_pause
search_ellipsis
view_list

上边没有想要的图标,那么就需要自己实现2个图标间的交错式动画

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;@overridevoid initState() {super.initState();// 初始化 AnimationController_controller = AnimationController(duration: const Duration(milliseconds: 1000),vsync:this, // 让程序和手机的刷新频率统一);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Column(children: [// 定义Stack,使2个图标重叠摆放Stack(children: [// 默认显示搜索图标,// Tween(开始1,结束0)// Interval时间为0-0.5之间//// 搜索图标开始为1.0显示,结束时0.0隐藏,时间从0.0开始,到0.5结束// 关闭图标开始为0.0隐藏,结束时1.0显示,时间从0.5开始,到1.0结束ScaleTransition(scale: _controller.drive(Tween(begin: 1.0,end: 0.0).chain(CurveTween(curve: const Interval(0.0, 0.5)))),child: Icon(Icons.search,size: 40,),),ScaleTransition(scale: _controller.drive(Tween(begin: 0.0,end: 1.0).chain(CurveTween(curve: Interval(0.5, 1)))),child: const Icon(Icons.close,size: 40,),),],),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('播放')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('返回')),],),);}
}

在这里插入图片描述


http://www.ppmy.cn/embedded/140250.html

相关文章

Go-RPC关键指标分析与企业实践

1.稳定性-保障策略 熔断&#xff1a;保护调用方 限流&#xff1a;保护被调用方 超时控制&#xff1a;避免浪费 2.稳定性-请求成功率&#xff08;用重复发送 负载均衡&#xff09; 3.稳定性-长尾请求&#xff08;用备份请求&#xff09; 4.稳定性-注册中间件 易用性&#xff1a…

前端测试工具详解

前端测试工具详解 前端测试工具是确保代码质量、发现潜在问题的重要工具。它们帮助开发者编写、执行、调试和维护测试代码&#xff0c;为用户提供稳定可靠的前端应用体验。 一、前端测试的分类 根据测试的粒度和目标&#xff0c;前端测试可以分为以下几类&#xff1a; 1. 单…

1123--System类,BigInteger类, BigDecimal类

目录 一 java 1. System类 1.1 System.exit ( ) 1.2 System.arraycopy ( )---有5个参数 1.3 System.currentTimeMillens&#xff08;&#xff09; 2.BigInteger类 1&#xff09;创建对应类时&#xff0c;数据要加上双引号&#xff0c;以字符串的形式给出 2.1 对 BigIn…

学习Servlet(含义,作用)

目录 前言 Servlet 的含义 Servlet 的作用 前言 一个完整的前后端项目&#xff0c;是需要前端和后端&#xff08;Java实现&#xff09;共同完成的。那应该如何实现前后端进行交互呢&#xff1f;答案&#xff1a;使用Servlet实现前后端交互 我会从了解Servlet的含义&…

钉钉报销集成金蝶付款单的技术实现方案

钉钉报销【月结贷款】集成到金蝶付款单【晨丰】的技术实现 在企业日常运营中&#xff0c;数据的高效流转和准确对接是提升业务效率的重要环节。本文将分享一个具体的系统对接集成案例&#xff0c;即如何将钉钉平台上的报销数据&#xff08;【月结贷款】&#xff09;无缝集成到…

《Python 股票交易分析:开启智能投资新时代》(二)

Python 进行股票交易分析的优势 简洁易读&#xff1a;Python 的语法简洁明了&#xff0c;即使是编程新手也能较快上手&#xff0c;降低了股票交易分析的门槛。 Python 的简洁易读是其在股票交易分析中受欢迎的重要原因之一。Python 的语法简洁明了&#xff0c;与其他编程语言相…

Android Activity 基础接口知识和常见问题

Activity 知识点及问题点 接口onMultiWindowModeChangedonConfigurationChanged 常见问题Android解决点击桌面图标&#xff0c;就重新启动应用程序问题 接口 onMultiWindowModeChanged 定义 onMultiWindowModeChanged是Android中Activity类的一个回调方法。它会在活动&#xf…

利用爬虫爬取网页小说

需求分析 安装requests包 pip install requests目录采集地址&#xff1a; h t t p s : / / w w w . 3 b q g . c c / b o o k / 60417 / https://www.3bqg.cc/book/60417/ https://www.3bqg.cc/book/60417/ 章节采集地址&#xff1a; h t t p s : / / w w w . 3 b q g . c …