Flutter_学习记录_动画的简单了解

用AnimationController简单实现如下的效果图：
在这里插入图片描述

1. 只用AnimationController实现简单动画

1.1 完整代码案例

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 初始值，要在 lowerBound 和 upperBound 之间value: 32.0,// 最小值lowerBound: 32.0,// 最大值upperBound: 100.0,// 设置动画的时间duration: Duration(milliseconds: 3000));animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animationDemoController.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

1.2 代码说明

(1) AnimationController

  • animationDemoController 是动画的核心控制器。
  • duration 定义了动画的持续时间（例如 2 秒）。
  • vsync 参数确保动画与屏幕刷新同步，避免资源浪费。
  • value 设置初始值。
  • lowerBound 设置最小值。
  • upperBound 设置 最大值。

(2) addListener 添加监听，可以监听到 animationDemoController.value的值的变化。

  • 如果需要需要用到 animationDemoController.value的值更新UI，则需要调用 setState的方法。
animationDemoController.addListener((){// 更新页面setState(() {});});

（3）addStatusListener 添加动画状态的监听，只有添加了这个监听，才能在后面获取到动画状态的变化。

            switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}

（4） 开始动画

animationDemoController.forward()

（5）反转动画

animationDemoController.reverse();

2. 用AnimationController 和 Animation实现简单动画

2.1 完整代码示例

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画取消late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));animation = Tween(begin: 32.0, end: 100.0).animate(animationDemoController);animationColor = ColorTween(begin: Colors.red, end: Colors.green).animate(animationDemoController);animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animation.value,color: animationColor.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

2.2 代码说明

(1) Tween

  • Tween(begin: xx, end:xx) 定义了动画的范围：
  • begin 是起始值。
  • end 是结束值。

(2) animationDemoController.value 用 animation.value 来替代

3. 用AnimationController 和 Animation、CurvedAnimation实现简单动画

CurvedAnimation 可以添加缓动效果（如 Curves.easeInOut），完整代码示例：

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);animation = Tween(begin: 32.0, end: 100.0).animate(curve);animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);animationDemoController.addListener((){// 更新页面setState(() {});});// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(child: IconButton(icon: Icon(Icons.favorite),iconSize: animation.value,color: animationColor.value,onPressed: (){switch (animationDemoController.status) {case AnimationStatus.completed:// 反转动画animationDemoController.reverse();break;default:// 开始动画animationDemoController.forward();}},),),);}
}

4 用AnimationController 和 AnimatedWidget实现简单动画

完整代码实例：

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid initState() {super.initState();animationDemoController = AnimationController(vsync: this,// 设置动画的时间duration: Duration(milliseconds: 3000));curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);animation = Tween(begin: 32.0, end: 100.0).animate(curve);animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);// 添加status的监听animationDemoController.addStatusListener((AnimationStatus status){print(status);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("AnimationDemo"),),body: Center(//  AnimationHeart 是基于 AnimatedWidget 创建的child: AnimationHeart(animations: [animation, animationColor], controller: animationDemoController),),);}
}// 基于 AnimatedWidget 创建 AnimationHeart的控件
class AnimationHeart extends AnimatedWidget {final List animations;final AnimationController controller;const AnimationHeart({super.key, required this.animations, required this.controller}) : super(listenable: controller);@overrideWidget build(BuildContext context) {return IconButton(icon: Icon(Icons.favorite),iconSize: animations[0].value,color: animations[1].value,onPressed: (){switch (controller.status) {case AnimationStatus.completed:// 反转动画controller.reverse();break;default:// 开始动画controller.forward();}},);}
}

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

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

相关文章

sql sqlserver的特殊函数COALESCE和PIVOT的用法分析

sql sqlserver的特殊函数COALESCE和PIVOT的用法分析

一、COALESCE是一个返回参数中第一个非NULL值的函数&#xff0c; 列如&#xff1a;COALESCE&#xff08;a,b,c,d,e&#xff09;;可以按照顺序取abcde&#xff0c;中的第一个非空数据&#xff0c;abcde可以是表达式 用case when 加ISNULL也可以实现&#xff0c;但是写法复杂了…
阅读更多...
类与对象C++详解（上）

类与对象C++详解（上）

目录 1.类的定义 1.1 类定义格式 补充: struct与class的区别&#xff08;c语言与c&#xff09; 1.2 访问限定符 1.3 类域 2.实例化 3.对象大小 4.this指针 1.类的定义 1.1 类定义格式 class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&…
阅读更多...
LabVIEW 天然气水合物电声联合探测

LabVIEW 天然气水合物电声联合探测

天然气水合物被认为是潜在的清洁能源&#xff0c;其储量丰富&#xff0c;预计将在未来能源格局中扮演重要角色。由于其独特的物理化学特性&#xff0c;天然气水合物的探测面临诸多挑战&#xff0c;涉及温度、压力、电学信号、声学信号等多个参数。传统的人工操作方式不仅效率低…
阅读更多...
Windows上安装Go并配置环境变量(图文步骤)

Windows上安装Go并配置环境变量(图文步骤)

前言 1. 本文主要讲解的是在windows上安装Go语言的环境和配置环境变量&#xff1b; Go语言版本&#xff1a;1.23.2 Windows版本&#xff1a;win11&#xff08;win10通用&#xff09; 下载Go环境 下载go环境&#xff1a;Go下载官网链接(https://golang.google.cn/dl/) 等待…
阅读更多...
神经网络常见激活函数 9-CELU函数

神经网络常见激活函数 9-CELU函数

文章目录 CELU函数导函数函数和导函数图像优缺点pytorch中的CELU函数tensorflow 中的CELU函数 CELU 连续可微指数线性单元&#xff1a;CELU&#xff08;Continuously Differentiable Exponential Linear Unit&#xff09;,是一种连续可导的激活函数&#xff0c;结合了 ELU 和 …
阅读更多...
《安富莱嵌入式周报》第350期：Google开源Pebble智能手表，开源模块化机器人平台，开源万用表，支持10GHz HRTIM的单片机，开源CNC控制器

《安富莱嵌入式周报》第350期：Google开源Pebble智能手表，开源模块化机器人平台，开源万用表，支持10GHz HRTIM的单片机，开源CNC控制器

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版&#xff1a; https://www.bilibili.com/video/BV1YPKEeyEeM/ 《安富莱嵌入式周报》第350期&#xff1a;Google开…
阅读更多...
小米平板怎么和电脑共享屏幕

小米平板怎么和电脑共享屏幕

最近尝试使用小米平板和电脑屏幕分屏互联 发现是需要做特殊处理的&#xff0c;需要下载一款电脑安装包&#xff1a;小米妙享 关于这个安装包&#xff0c;想吐槽的是&#xff1a; 没有找到官网渠道&#xff0c;是通过其他网络方式查到下载的 不附录链接&#xff0c;原因是因为地…
阅读更多...
(学习总结23)Linux 目录、通配符、重定向、管道、shell、权限与粘滞位

(学习总结23)Linux 目录、通配符、重定向、管道、shell、权限与粘滞位

Linux 目录、通配符、重定向、管道、shell、权限与粘滞位 Linux 目录通配符重定向管道shell 介绍Linux 权限Linux 权限的概念用户切换命令 su Linux权限管理文件访问者的分类&#xff1a;常用文件类型与其标识符&#xff1a;文件基本权限和权限值的表示方法&#xff1a;更改文件…
阅读更多...
深入解析操作系统控制台：阿里云Alibaba Cloud Linux（Alinux）的运维利器

深入解析操作系统控制台：阿里云Alibaba Cloud Linux（Alinux）的运维利器

作为一位个人开发者兼产品经理&#xff0c;我的工作日常紧密围绕着云资源的运维和管理。在这个过程中&#xff0c;操作系统扮演了至关重要的角色&#xff0c;而操作系统控制台则成为了我们进行系统管理的得力助手。本文将详细介绍阿里云的Alibaba Cloud Linux操作系统控制台的功…
阅读更多...
Android10 音频参数导出合并

Android10 音频参数导出合并

A10 设备录音时底噪过大&#xff0c;让音频同事校准了下&#xff0c;然后把校准好的参数需要导出来&#xff0c;集成到项目中&#xff0c;然后出包&#xff0c;导出方式在此记录 设备安装debug系统版本调试好后&#xff0c; adb root adb remount adb shell 进入设备目录 导…
阅读更多...
dnslog+sqlmap外带数据

dnslog+sqlmap外带数据

目录 爆库 爆表 爆列 爆数据 sqlmapDNSlog 外带参数 –dns-domain参数注入 –dns-domain参数为dnslog平台的域名&#xff08;我们也可以使用本地&#xff09; 爆库 python sqlmap.py -u "http://127.0.0.1/sqli/less-8/index.php/?id1" -techniqueB -dns-dom…
阅读更多...
sql注入中information_schema被过滤的问题

sql注入中information_schema被过滤的问题

目录 一、information_schema库的作用 二、获得表名 2.1 sys.schema_auto_increment_columns 2.2 schema_table_statistics 三、获得列名 join … using … order by盲注 子查询 在进行sql注入时&#xff0c;我们经常会使用information_schema来进行爆数据库名、表名、…
阅读更多...
Flutter 常见布局模型

Flutter 常见布局模型

Flutter的常见的布局模型有容器&#xff08;Container&#xff09;、弹性盒子布局&#xff08;Flex、Row、Column、Expanded&#xff09;、流式布局&#xff08;Wrap、Flow&#xff09;、层叠布局&#xff08;Stack、Position&#xff09;、滚动布局&#xff08;ListView、Grid…
阅读更多...
深度学习框架探秘｜TensorFlow：AI 世界的万能钥匙

深度学习框架探秘｜TensorFlow：AI 世界的万能钥匙

在人工智能&#xff08;AI&#xff09;蓬勃发展的时代&#xff0c;各种强大的工具和框架如雨后春笋般涌现&#xff0c;而 TensorFlow 无疑是其中最耀眼的明星之一。它不仅被广泛应用于学术界的前沿研究&#xff0c;更是工业界实现 AI 落地的关键技术。今天&#xff0c;就让我们…
阅读更多...
TypeScript 与后端开发Node.js

TypeScript 与后端开发Node.js

文章目录 一、搭建 TypeScript Node.js 项目 &#xff08;一&#xff09;初始化项目并安装相关依赖 1、创建项目目录并初始化2、安装必要的依赖包 &#xff08;二&#xff09;配置 TypeScript 编译选项&#xff08;如模块解析方式适合后端&#xff09; 二、编写服务器代码 &a…
阅读更多...
DDD该怎么去落地实现（3）通用的仓库和工厂

DDD该怎么去落地实现（3）通用的仓库和工厂

通用的仓库和工厂 我有一个梦&#xff0c;就是希望DDD能够成为今后软件研发的主流&#xff0c;越来越多研发团队都转型DDD&#xff0c;采用DDD的设计思想和方法&#xff0c;设计开发软件系统。这个梦想在不久的将来是有可能达成的&#xff0c;因为DDD是软件复杂性的解决之道&a…
阅读更多...
国家队出手！DeepSeek上线国家超算互联网平台！

国家队出手！DeepSeek上线国家超算互联网平台！

目前，国家超算互联网平台已推出 DeepSeek – R1 模型的 1.5B、7B、8B、14B 版本，后续还会在近期更新 32B、70B 等版本。 DeepSeek太火爆了！在这个春节档，直接成了全民热议的话题。 DeepSeek也毫无悬念地干到了全球增速最快的AI应用。这几天，国内的云计算厂家都在支持Dee…
阅读更多...
内容中台驱动企业数字化内容管理高效协同架构

内容中台驱动企业数字化内容管理高效协同架构

内容概要 在数字化转型加速的背景下&#xff0c;企业对内容管理的需求从单一存储向全链路协同演进。内容中台作为核心支撑架构&#xff0c;通过统一的内容资源池与智能化管理工具&#xff0c;重塑了内容生产、存储、分发及迭代的流程。其核心价值在于打破部门壁垒&#xff0c;…
阅读更多...
算法1-1 玩具谜题

算法1-1 玩具谜题

题目描述 小南有一套可爱的玩具小人&#xff0c;它们各有不同的职业。 有一天&#xff0c;这些玩具小人把小南的眼镜藏了起来。小南发现玩具小人们围成了一个圈&#xff0c;它们有的面朝圈内&#xff0c;有的面朝圈外。如下图&#xff1a; 这时 singer 告诉小南一个谜题&…
阅读更多...
vs2022支持.netframework4.0

vs2022支持.netframework4.0

下载nuget包 .netframework4.0 解压nuget 复制到C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework 参考 https://www.cnblogs.com/bdqczhl/p/18670152 https://blog.csdn.net/xiaomeng1998_/article/details/135979884
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023