Flutter:SlideTransition位移动画,Interval动画延迟

server/2024/11/23 2:33:12/
配置vsync,需要实现一下with SingleTickerProviderStateMixin
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{// 定义 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: [SlideTransition(// 方块的宽度100,设置x轴y轴位移 0.5:也就是x轴向右移动50,同时向下移动50position: _controller.drive(Tween(begin: Offset(0, 0),end: Offset(0.5, 0.5))),child: Container(alignment: Alignment.center,width: 100,height: 100,color: Colors.red,),),ElevatedButton(onPressed: (){_controller.repeat(reverse: true); // repeat(reverse: true) 是否循环播放}, child: const Text('重复')),ElevatedButton(onPressed: (){_controller.stop();}, child: const Text('停止')),ElevatedButton(onPressed: (){_controller.forward();}, child: const Text('移动')),ElevatedButton(onPressed: (){_controller.reverse();}, child: const Text('返回')),ElevatedButton(onPressed: (){_controller.reset();}, child: const Text('重置')),],),),);}
}

在这里插入图片描述

第二种写法

初始化时,动画时长设置为10秒
duration: const Duration(milliseconds: 10000),position:Tween(begin: Offset(0, 0), end: Offset(0.5, 0.5)).chain(CurveTween(curve: Curves.bounceInOut)) // 配置动画效果.chain(CurveTween(curve: Interval(0.3, 0.6))) // 当前时间点30%开始(也就是第三秒开始移动)运动到60%结束(第6秒结束).animate(_controller),

http://www.ppmy.cn/server/144155.html

相关文章

vue3+ant design vue带勾选表格的坑,记录一下

1、效果图 2、代码 <a-table //在table中&#xff0c;columns和data-source里的数据值都需要指定key值&#xff0c;对于data-source默认将每列数据的key作为唯一的标识&#xff0c;如果你的数据没有这个属性&#xff0c;务必使用rowKey来指定数据列的主键&#xff0c;否则会…

图像处理 之 凸包和最小外围轮廓生成

“ 最小包围轮廓之美” 一起来欣赏图形之美~ 1.原始图片 男人牵着机器狗 2.轮廓提取 轮廓提取 3.最小包围轮廓 最小包围轮廓 4.凸包 凸包 5.凸包和最小包围轮廓的合照 凸包和最小包围轮廓的合照 上述图片中凸包、最小外围轮廓效果为作者实现算法生成。 图形几何之美系列&#…

Shell脚本6 -- 条件判断if

声明&#xff1a; 本文的学习内容来源于B站up主“泷羽sec”视频【shell编程&#xff08;4&#xff09;脚本与用户交互以及if条件判断】的公开分享&#xff0c;所有内容仅限于网络安全技术的交流学习&#xff0c;不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题&#xff0c…

视频流媒体播放器EasyPlayer.js H.265流媒体播放器当container窗口发生变化的时候,播放器如何自适应

流媒体播放器的核心技术及发展趋势展现了其在未来数字生活中的无限潜力。现今流媒体播放器将继续引领数字娱乐的新潮流&#xff0c;为用户提供更加丰富多样的内容体验。 流媒体播放器负责解码和呈现内容&#xff0c;常见的播放器包括VLC和HTML5播放器等。流媒体技术的应用场景广…

路由器如何调优?

路由器调优可以显著改善网络性能、提高信号覆盖范围、减少延迟并增强安全性。根据不同的使用场景和需求&#xff0c;以下是一些常见的调优方法&#xff1a; 1. 选择合适的无线频段 2.4 GHz频段&#xff1a;适合较远距离的连接&#xff0c;但容易受到干扰&#xff08;如微波炉…

【Git】工作区、暂存区和版本库

目录 一、基本概念&#xff1a; 关系图&#xff1a; 1. 工作区&#xff08;Working Directory&#xff09; $ 1.1 工作区功能 $ 1.2 工作区特点 2. 暂存区&#xff08;Staging Area&#xff09; $ 2.1 暂存区功能 $ 2.2 暂存区特点 $ 2.3 常用命令 3. 版本库&#xff08…

国产系统(麒麟V10、uos)使用pageoffice在线编辑office文件

本文描述了PageOffice产品在&#xff08;VUESpringboot&#xff09;前后端分离的项目中如何集成调用。 一、环境 前端&#xff1a;vue2 后端&#xff1a;springboot2、jdk1.8 如果是springboot3&#xff0c;jdk17及以上版本&#xff0c;用这个依赖&#xff1a; <dependen…

网络安全中常用浏览器插件、拓展

引言 现在的火狐、Edge&#xff08; Chromium内核&#xff09;、Chrome等浏览器带有插件、拓展&#xff08;Plugin&#xff09;的功能。这些插件中有的可以过滤广告&#xff0c;有的提供便捷的翻译&#xff0c;有的提供JavaScript脚本支持&#xff0c;方便用户的使用也大大的增…