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

devtools/2024/11/23 2:31:10/
配置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/devtools/136180.html

相关文章

Spring:IoC/DI加载properties文件

Spring框架可以通过Spring的配置文件完成两个数据源druid和C3P0的配置&#xff08;Spring&#xff1a;IOC/DI配置管理第三方bean&#xff09;&#xff0c;但是其中包含了一些问题&#xff0c;我们来分析下: 这两个数据源中都使用到了一些固定的常量如数据库连接四要素&#xf…

Python CSV文档自动化操作详解

在数据处理和分析中,CSV(Comma-Separated Values)文件是一种常见的格式。Python提供了强大的工具来操作CSV文件,实现自动化的数据处理任务。本文将详细介绍如何使用Python进行CSV文档的自动化操作,包括读取、写入、修改和分析CSV文件。 目录 一、CSV 文件格式简介 二、使…

SparkSQL的执行过程:从源码角度解析逻辑计划、优化计划和物理计划

SparkSQL的执行过程可以分为以下几个阶段&#xff1a;从用户的SQL语句到最终生成的RDD执行&#xff0c;涵盖逻辑计划、优化计划和物理计划。以下是详细的源码角度解析&#xff1a; 1. 解析阶段&#xff08;Parsing&#xff09; SQL语句解析&#xff1a;Spark 使用 Catalyst 引…

机器学习极简史

机器学习的发展还不到100年&#xff0c;在这几十年的时间里&#xff0c;不同的时间阶段产生了不同的流派&#xff0c;抢占一时风头。但随着基础物理技术的进步&#xff0c;部分流派也慢慢归于历史。但它们的思想&#xff0c;当时面临的问题&#xff0c;却给后续的机器学习人们&…

计算机网络-Python通信

1、socket 套接字&#xff08;Socket&#xff09;是通信的基石&#xff0c;是支持TCP/IP协议的网络通信的基本操作单元。最早是应用于unix系统的一种通信模式&#xff0c;unix系统下的所有操作均是面向文件&#xff0c;Socket的通信模式也是基于文件操作&#xff0c;客户端和服…

贴代码框架PasteForm特性介绍之image

简介 PasteForm是贴代码推出的 “新一代CRUD” &#xff0c;基于ABPvNext&#xff0c;目的是通过对Dto的特性的标注&#xff0c;从而实现管理端的统一UI&#xff0c;借助于配套的PasteBuilder代码生成器&#xff0c;你可以快速的为自己的项目构建后台管理端&#xff01;目前管…

Elasticsearch开启认证及kibana密码登陆

Elasticsearch不允许root用户运行,使用root用户为其创建一个用户es,为用户es配置密码,并切换到es用户。 adduser elastic passwd elastic su elasticElasticsearch(简称ES)是一个基于Lucene的搜索服务器。它提供了一个分布式、多用户能力的全文搜索引擎,基于RESTful web…

Easyexcel(4-模板文件)

相关文章链接 Easyexcel&#xff08;1-注解使用&#xff09;Easyexcel&#xff08;2-文件读取&#xff09;Easyexcel&#xff08;3-文件导出&#xff09;Easyexcel&#xff08;4-模板文件&#xff09; 文件导出 获取 resources 目录下的文件&#xff0c;使用 withTemplate 获…