Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
三个类的用法
作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/133417590
1. 概述
这三个类都用于创建复合动画,可以同时跟踪多个子动画的状态和值。它们的功能包括:
-
AnimationMean(计算平均值):用于计算两个或多个动画的平均值。这对于创建多个动画的平均效果非常有用,例如,当您需要计算多个属性的平均值时。
-
AnimationMax(计算最大值):用于计算两个或多个动画的最大值。这对于创建多个动画的最大效果非常有用,例如,当您需要确定多个属性的最大值时。
-
AnimationMin(计算最小值):用于计算两个或多个动画的最小值。这对于创建多个动画的最小效果非常有用,例如,当您需要确定多个属性的最小值时。
这些复合动画可以帮助您在应用中创建各种复杂的动画效果,例如混合动画、动态颜色变化等。通过使用 AnimationMean
、AnimationMax
和 AnimationMin
,可以轻松地管理和组合多个动画,以创建更复杂和有趣的用户界面动画效果。这些复合动画可以帮助您实现更多创意和交互性。
2.AnimationMean(计算平均值)
源码
/// 一个跟踪两个其他动画平均值的双精度动画。
///
/// 如果“right”动画正在移动,则此动画的[status]为“right”动画的状态,否则为“left”动画的状态。
///
/// 此动画的[value]是表示“left”和“right”动画值的平均值的[double]。
class AnimationMean extends CompoundAnimation<double> {/// 创建一个跟踪两个其他动画平均值的动画。AnimationMean({required Animation<double> left,required Animation<double> right,}) : super(first: left, next: right); double get value => (first.value + next.value) / 2.0;
}
AnimationMean
用于计算多个动画的平均值,其中:
value
属性表示这些动画的平均值。status
属性表示复合动画的状态。
用法
Animation<double> animation1 = ...; // 第一个动画
Animation<double> animation2 = ...; // 第二个动画// 创建 AnimationMean 来计算平均值
Animation<double> meanAnimation = AnimationMean(left: animation1, right: animation2);// 在UI中使用 meanAnimation
AnimatedBuilder(animation: meanAnimation,builder: (context, child) {return Text('Mean Value: ${meanAnimation.value.toStringAsFixed(2)}',style: TextStyle(fontSize: 20),);},
)
当要根据多个动画的平均值创建动画效果时,AnimationMean
很有用。例如,希望 平滑地 过渡多个属性的变化时,可以使用平均值来创建更柔和的动画效果。
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return const MaterialApp(title: 'AnimationMean 示例',home: AnimationMeanDemo(),);}
}class AnimationMeanDemo extends StatefulWidget {const AnimationMeanDemo({super.key});State<AnimationMeanDemo> createState() => _AnimationMeanDemoState();
}class _AnimationMeanDemoState extends State<AnimationMeanDemo>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animationA;late Animation<double> _animationB;void initState() {super.initState();// 创建 AnimationController_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,);// 创建两个 Animation 对象来控制属性 A 和属性 B_animationA = Tween<double>(begin: 0, end: 100).animate(_controller);_animationB = Tween<double>(begin: 100, end: 200).animate(_controller);// 启动动画_controller.forward();}void dispose() {_controller.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AnimationMean 示例'),),body: Center(child: AnimatedBuilder(animation: _controller,builder: (context, child) {// 使用 AnimationMean 来创建平均值动画效果double meanValue = AnimationMean(left: _animationA,right: _animationB,).value;return Container(width: meanValue,height: meanValue,color: Colors.blue,child: const Center(child: Text('平均值动画示例',style: TextStyle(color: Colors.white),),),);},),),);}
}
3. AnimationMax(计算最大值)
源码:
/// 跟踪两个其他动画最大值的动画。
///
/// 此动画的[value]是[first]和[next]的值的最大值。
class AnimationMax<T extends num> extends CompoundAnimation<T> {/// 创建一个[AnimationMax]。////// 两个参数都不能为空。其中一个可以是[AnimationMax]本身,以组合多个动画。AnimationMax(Animation<T> first, Animation<T> next) : super(first: first, next: next);T get value => math.max(first.value, next.value);
}
AnimationMax
用于计算多个动画的最大值,其中:
value
属性表示这些动画的最大值。status
属性表示复合动画的状态。
用法
Animation<double> animation1 = ...; // 第一个动画
Animation<double> animation2 = ...; // 第二个动画// 创建 AnimationMax 来计算最大值
Animation<double> maxAnimation = AnimationMax(animation1, animation2);// 在UI中使用 maxAnimation
AnimatedBuilder(animation: maxAnimation,builder: (context, child) {return Text('Max Value: ${maxAnimation.value.toStringAsFixed(2)}',style: TextStyle(fontSize: 20),);},
)
当要确定多个动画中的最大值时,AnimationMax
是一个有用的工具。例如,当您希望元素在多个属性的影响下保持在屏幕上的最大范围内时,可以使用最大值来创建动画效果。一个完整的例子如:
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'AnimationMax 示例',home: AnimationMaxDemo(),);}
}class AnimationMaxDemo extends StatefulWidget { _AnimationMaxDemoState createState() => _AnimationMaxDemoState();
}class _AnimationMaxDemoState extends State<AnimationMaxDemo>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animationWidth;late Animation<double> _animationHeight;void initState() {super.initState();// 创建 AnimationController_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,);// 创建两个 Animation 对象来控制宽度和高度_animationWidth = Tween<double>(begin: 50, end: 200).animate(_controller);_animationHeight = Tween<double>(begin: 50, end: 200).animate(_controller);// 启动动画_controller.forward();}void dispose() {_controller.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AnimationMax 示例'),),body: Center(child: AnimatedBuilder(animation: _controller,builder: (context, child) {// 使用 AnimationMax 来确保元素保持在屏幕上的最大范围内double maxWidth = 300; // 屏幕的最大宽度double maxHeight = 300; // 屏幕的最大高度// 使用 AnimationMax 计算宽度和高度的最大值,以确保元素不超出屏幕double width =AnimationMax<double>(_animationWidth, _animationHeight).value;double height =AnimationMax<double>(_animationHeight, _animationWidth).value;return Container(width: width > maxWidth ? maxWidth : width,height: height > maxHeight ? maxHeight : height,color: Colors.blue,child: const Center(child: Text('最大值动画示例',style: TextStyle(color: Colors.white),),),);},),),);}
}
4. AnimationMin(计算最小值)
源码:
/// 一个跟踪两个其他动画最小值的动画。
///
/// 该动画的[value]是[first]和[next]的值的最小值。
class AnimationMin<T extends num> extends CompoundAnimation<T> {/// 创建一个[AnimationMin]。////// 两个参数都不能为空。要合并多个动画,其中任一个都可以是[AnimationMin]本身。AnimationMin(Animation<T> first, Animation<T> next) : super(first: first, next: next);T get value => math.min(first.value, next.value);
}
用法
Animation<double> animation1 = ...; // 第一个动画
Animation<double> animation2 = ...; // 第二个动画// 创建 AnimationMin 来计算最小值
Animation<double> minAnimation = AnimationMin(animation1, animation2);// 在UI中使用 minAnimation
AnimatedBuilder(animation: minAnimation,builder: (context, child) {return Text('Min Value: ${minAnimation.value.toStringAsFixed(2)}',style: TextStyle(fontSize: 20),);},
)
AnimationMin
用于计算多个动画的最小值。其中:
value
属性表示这些动画的最小值。status
属性表示复合动画的状态。
需要确定多个动画中的最小值时,AnimationMin
是一个有用的工具。 例如,希望元素在多个属性的影响下保持在屏幕上的最小范围内时,可以使用最小值来创建动画效果。例如:
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return const MaterialApp(title: 'AnimationMin 示例',home: AnimationMinDemo(),);}
}class AnimationMinDemo extends StatefulWidget {const AnimationMinDemo({super.key});State<AnimationMinDemo> createState() => _AnimationMinDemoState();
}class _AnimationMinDemoState extends State<AnimationMinDemo>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animationWidth;late Animation<double> _animationHeight;void initState() {super.initState();// 创建 AnimationController_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,);// 创建两个 Animation 对象来控制元素的宽度和高度_animationWidth = Tween<double>(begin: 50, end: 200).animate(_controller);_animationHeight = Tween<double>(begin: 50, end: 200).animate(_controller);// 启动动画_controller.forward();}void dispose() {_controller.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('AnimationMin 示例'),),body: Center(child: AnimatedBuilder(animation: _controller,builder: (context, child) {// 使用 AnimationMin 来确保元素的宽度和高度不会超出屏幕边界的最小范围double minWidth = 50; // 最小宽度double minHeight = 50; // 最小高度// 使用 AnimationMin 计算宽度和高度的最小值,以确保元素不会超出屏幕边界double width =AnimationMin<double>(_animationWidth, _animationHeight).value;double height =AnimationMin<double>(_animationHeight, _animationWidth).value;return Container(width: width < minWidth ? minWidth : width,height: height < minHeight ? minHeight : height,color: Colors.blue,child: const Center(child: Text('最小值动画示例',style: TextStyle(color: Colors.white),),),);},),),);}
}
相关文章:

Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
Flutter笔记 AnimationMean、AnimationMax 和 AnimationMin三个类的用法 作者:李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 :291148484163.com 本文地址:https://blog.csdn.net/qq_28550263/…...

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器
华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例特点 二、Gogs介绍2.1 Gogs简介2.2 Gogs特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、远程登录华为云云耀云…...

操作系统--分页存储管理
一、概念介绍 分页存储:一是分内存地址,二是分逻辑地址。 1.分内存地址 将内存空间分为一个个大小相等的分区。比如,每个分区4KB。 每个分区就是一个“页框”,每个页框有个编号,即“页框号”,“页框号”…...

【算法练习Day10】有效的括号删除字符串中的所有相邻重复项逆波兰表达式求值
📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:练题 🎯长路漫漫浩浩,万事皆有期待 文章目录 有效的括号删除字符串中的所…...
10.1 校招 实习 内推 面经
绿泡*泡: neituijunsir 交流裙 ,内推/实习/校招汇总表格 1、自动驾驶一周资讯 - 苹果汽车项目泡汤?纵目科技IPO终止,腾讯与岚图汽车合作升级,158亿元现金收购比亚迪“史上最大”并购案 自动驾驶一周资讯 - 苹果汽车…...
Redis中Set类型的操作
Set的结构与list相似,但底层存储结构是hashtable,因此它的值是唯一的,同时添加的顺序与保存的顺序并不一致。每一个Set类型的key中可以存储2^32-1个元素。 一、应用场景 1、保存用户的收藏 在小说网站中保存用户的收藏,收藏 的小…...

正确完成实时 AI
发表于 构建真实世界的实时 AI 一、说明 我们知道,当前的AI进展是扎根于历史数据,这就造成一个事实,模型总是赶不上实时进展,模型的洞察力不够尖锐,或者,时间损失等,本篇对这一系列AI的短板展开…...

深度学习笔记之线性代数
深度学习笔记之线性代数 一、向量 在数学表示法中,向量通常记为粗体小写的符号(例如,x,y,z)当向量表示数据集中的样本时,它们的值具有一定的现实意义。例如研究医院患者可能面临的心脏病发作风…...

Python与Scrapy:构建强大的网络爬虫
网络爬虫是一种用于自动化获取互联网信息的工具,在数据采集和处理方面具有重要的作用。Python语言和Scrapy框架是构建强大网络爬虫的理想选择。本文将分享使用Python和Scrapy构建强大的网络爬虫的方法和技巧,帮助您快速入门并实现实际操作价值。 一、Pyt…...
kind 安装 k8s 集群
在某些时候可能需要快速的部署一个k8s集群用于测试,不想部署复杂的k8s集群环境,这个时候我们就可以使用kind来部署一个k8s集群了,下面是使用kind部署的过程 一、安装单节点集群 1、下载kind二进制文件 [rootlocalhost knid]# curl -Lo ./kin…...
Leetcode 2871. Split Array Into Maximum Number of Subarrays
Leetcode 2871. Split Array Into Maximum Number of Subarrays 1. 解题思路2. 代码实现 题目链接:2871. Split Array Into Maximum Number of Subarrays 1. 解题思路 这一题实现上其实还是比较简单的,就是一个贪婪算法,主要就是思路上需要…...
Java基础---第十三篇
系列文章目录 文章目录 系列文章目录一、有数组了为什么还要搞个 ArrayList 呢?二、说说什么是 fail-fast?三、说说Hashtable 与 HashMap 的区别一、有数组了为什么还要搞个 ArrayList 呢? 通常我们在使用的时候,如果在不明确要插入多少数据的情况下,普通数组就很尴尬了,…...
Java 文档注释
Java 文档注释 目录 Java 文档注释 javadoc 标签 文档注释 javadoc输出什么 实例 Java只是三种注释方式。前两种分别是// 和/* */,第三种被称作说明注释,它以/** 开始,以 */结束。 说明注释允许你在程序中嵌入关于程序的信息。你可以使…...
【多媒体技术与实践】多媒体计算机系统概述
数码相机是利用___感受光信号, 使转换为电信号,再经模/数转换变成数字信号,存储在相机内部的存储器中。 选择一项: a. RGB b. OCR c. CCD d. MPEG 正确答案是:CCD 最基本的多媒体计算机是指安装了_部件的计算机。…...
DirectX 3D C++ 圆柱体的渲染(源代码)
作业内容 请勿抄袭 代码功能:渲染一个绕中心轴自转的圆柱体。要求该圆柱体高度为3.0,半径为0.5。 #include <windows.h> #include <d3d11.h> #include <d3dx11.h> #include <d3dcompiler.h> #include <xnamath.h> #incl…...

搭建前端框架
在终端进入web目录,然后创建vuecrud工程 创建工程并引入ElementUI和axios手把手教学>传送门:VueCLI脚手架搭建...
2310C++构造对象
原文 本文展示一个构造对象方式,用户无需显式调用构造器.对有参构造器类,该实现在构造改对象时传递默认值来构造. 当然用户也可指定(绑定)某个参数的值.实现思路参考boost-ext/di的实现.看下示例: 构 成员{整 x10; }; 构 成员1{整 x11; }; 类 例子1{ 公:例子1(成员 x,成员1 x…...

nginx多文件组织
背景: nginx的话,有时候,想部署多个配置,比如:使用不同的端口配置不同的web工程。 比如:8081部署:项目1的web页面。 8082部署:项目2的web页面。 1)nginx.conf worker_processes…...

扩容LVM卷导致lvm元数据丢失的恢复过程
一、问题描述 因某次MySQL binlog占用过高扩容时,是直接对云盘操作,而扩容直接操作了lvm卷而未操作云盘分区,并随后执行了扩容的partprobe,resize2fs卷等操作;最后,显示并未扩容成功,重启系统后…...

【MySQL教程】| (1-1) 2023MySQL-8.1.0 安装教程
文章目录 一、安装包下载二、安装配置1、解压安装包2、编写MySQL配置文件3、初始化MySQL数据库3、安装mysql服务并启动4、MySQL服务5、连接MySQL6、修改密码 三、配置环境变量四、防止mysql自启动拖慢开机时间 近日有粉丝问到mysql在win11的安装中遇到一些问题,应粉…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

若依登录用户名和密码加密
/*** 获取公钥:前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...