当前位置: 首页 > article >正文

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

配置vsync,需要实现一下with SingleTickerProviderStateMixin
class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
  // 定义 AnimationController
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化 AnimationController
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync:this, // 让程序和手机的刷新频率统一
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Center(
        child: Column(
          children: [
            SlideTransition(
              // 方块的宽度100,设置x轴y轴位移 0.5:也就是x轴向右移动50,同时向下移动50
              position: _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.kler.cn/a/406662.html

相关文章:

  • 机器学习阶段学习Day31
  • 利用 GitHub 和 Hexo 搭建个人博客【保姆教程】
  • ROS机器视觉入门:从基础到人脸识别与目标检测
  • 【LeetCode热题100】栈
  • JDK1.8新增特性
  • Spring Batch 表结构
  • 基于SpringBoot实现的在线课程管理系统(代码+论文)
  • 科技部的国家一级资质科技查新机构有哪些?
  • 第 28 章 - Go语言 Web 开发入门
  • android 使用MediaPlayer实现音乐播放--基础介绍
  • Devexpress.Dashboard的调用二义性
  • GaussDB 华为高斯数据库
  • macos 使用 nvm 管理 node 并自定义安装目录
  • 超越GPT-4o-mini | 北大开源「国产o1」大模型,{多阶段自主推理}让小模型也能“放大招“!
  • 香港站群服务器有助于提升网站在搜索引擎中的排名
  • QT设置MessageBox的大小
  • fastadmin实现站内通知功能
  • [数组双指针] 0167. 两数之和 II - 输入有序数组
  • 为什么芯麦的 GC4931P 可以替代A4931/Allegro 的深度对比介绍
  • Android开发实战班-Android App 的启动过程
  • 分布式系统稳定性建设-性能优化篇
  • 【大数据学习 | Spark-Core】yarn-client与yarn-cluster的区别
  • Oracle 19c Rac + ADG搭建(源库:RAC,目标库FS)
  • 迈向AI驱动的数据新时代:探索SQL Server 2025的全新向量数据库
  • 一文说清:C和C++混合编程
  • VTK知识学习(12)- 读取PNG图像