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

Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法

Flutter笔记
AnimationMean、AnimationMax 和 AnimationMin
三个类的用法

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/133417590



1. 概述

这三个类都用于创建复合动画,可以同时跟踪多个子动画的状态和值。它们的功能包括:

  1. AnimationMean(计算平均值):用于计算两个或多个动画的平均值。这对于创建多个动画的平均效果非常有用,例如,当您需要计算多个属性的平均值时。

  2. AnimationMax(计算最大值):用于计算两个或多个动画的最大值。这对于创建多个动画的最大效果非常有用,例如,当您需要确定多个属性的最大值时。

  3. AnimationMin(计算最小值):用于计算两个或多个动画的最小值。这对于创建多个动画的最小效果非常有用,例如,当您需要确定多个属性的最小值时。

这些复合动画可以帮助您在应用中创建各种复杂的动画效果,例如混合动画、动态颜色变化等。通过使用 AnimationMeanAnimationMaxAnimationMin,可以轻松地管理和组合多个动画,以创建更复杂和有趣的用户界面动画效果。这些复合动画可以帮助您实现更多创意和交互性。

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三个类的用法 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/…...

华为云云耀云服务器L实例评测|云耀云服务器L实例部署Gogs服务器

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

操作系统--分页存储管理

一、概念介绍 分页存储&#xff1a;一是分内存地址&#xff0c;二是分逻辑地址。 1.分内存地址 将内存空间分为一个个大小相等的分区。比如&#xff0c;每个分区4KB。 每个分区就是一个“页框”&#xff0c;每个页框有个编号&#xff0c;即“页框号”&#xff0c;“页框号”…...

【算法练习Day10】有效的括号删除字符串中的所有相邻重复项逆波兰表达式求值

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 有效的括号删除字符串中的所…...

10.1 校招 实习 内推 面经

绿泡*泡&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、自动驾驶一周资讯 - 苹果汽车项目泡汤&#xff1f;纵目科技IPO终止&#xff0c;腾讯与岚图汽车合作升级&#xff0c;158亿元现金收购比亚迪“史上最大”并购案 自动驾驶一周资讯 - 苹果汽车…...

Redis中Set类型的操作

Set的结构与list相似&#xff0c;但底层存储结构是hashtable&#xff0c;因此它的值是唯一的&#xff0c;同时添加的顺序与保存的顺序并不一致。每一个Set类型的key中可以存储2^32-1个元素。 一、应用场景 1、保存用户的收藏 在小说网站中保存用户的收藏&#xff0c;收藏 的小…...

正确完成实时 AI

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

深度学习笔记之线性代数

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

Python与Scrapy:构建强大的网络爬虫

网络爬虫是一种用于自动化获取互联网信息的工具&#xff0c;在数据采集和处理方面具有重要的作用。Python语言和Scrapy框架是构建强大网络爬虫的理想选择。本文将分享使用Python和Scrapy构建强大的网络爬虫的方法和技巧&#xff0c;帮助您快速入门并实现实际操作价值。 一、Pyt…...

kind 安装 k8s 集群

在某些时候可能需要快速的部署一个k8s集群用于测试&#xff0c;不想部署复杂的k8s集群环境&#xff0c;这个时候我们就可以使用kind来部署一个k8s集群了&#xff0c;下面是使用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. 代码实现 题目链接&#xff1a;2871. Split Array Into Maximum Number of Subarrays 1. 解题思路 这一题实现上其实还是比较简单的&#xff0c;就是一个贪婪算法&#xff0c;主要就是思路上需要…...

Java基础---第十三篇

系列文章目录 文章目录 系列文章目录一、有数组了为什么还要搞个 ArrayList 呢?二、说说什么是 fail-fast?三、说说Hashtable 与 HashMap 的区别一、有数组了为什么还要搞个 ArrayList 呢? 通常我们在使用的时候,如果在不明确要插入多少数据的情况下,普通数组就很尴尬了,…...

Java 文档注释

Java 文档注释 目录 Java 文档注释 javadoc 标签 文档注释 javadoc输出什么 实例 Java只是三种注释方式。前两种分别是// 和/* */&#xff0c;第三种被称作说明注释&#xff0c;它以/** 开始&#xff0c;以 */结束。 说明注释允许你在程序中嵌入关于程序的信息。你可以使…...

【多媒体技术与实践】多媒体计算机系统概述

数码相机是利用___感受光信号&#xff0c; 使转换为电信号&#xff0c;再经模/数转换变成数字信号&#xff0c;存储在相机内部的存储器中。 选择一项&#xff1a; a. RGB b. OCR c. CCD d. MPEG 正确答案是&#xff1a;CCD 最基本的多媒体计算机是指安装了_部件的计算机。…...

DirectX 3D C++ 圆柱体的渲染(源代码)

作业内容 请勿抄袭 代码功能&#xff1a;渲染一个绕中心轴自转的圆柱体。要求该圆柱体高度为3.0&#xff0c;半径为0.5。 #include <windows.h> #include <d3d11.h> #include <d3dx11.h> #include <d3dcompiler.h> #include <xnamath.h> #incl…...

搭建前端框架

在终端进入web目录&#xff0c;然后创建vuecrud工程 创建工程并引入ElementUI和axios手把手教学>传送门:VueCLI脚手架搭建...

2310C++构造对象

原文 本文展示一个构造对象方式,用户无需显式调用构造器.对有参构造器类,该实现在构造改对象时传递默认值来构造. 当然用户也可指定(绑定)某个参数的值.实现思路参考boost-ext/di的实现.看下示例: 构 成员{整 x10; }; 构 成员1{整 x11; }; 类 例子1{ 公:例子1(成员 x,成员1 x…...

nginx多文件组织

背景&#xff1a; nginx的话&#xff0c;有时候&#xff0c;想部署多个配置&#xff0c;比如&#xff1a;使用不同的端口配置不同的web工程。 比如&#xff1a;8081部署&#xff1a;项目1的web页面。 8082部署&#xff1a;项目2的web页面。 1)nginx.conf worker_processes…...

扩容LVM卷导致lvm元数据丢失的恢复过程

一、问题描述 因某次MySQL binlog占用过高扩容时&#xff0c;是直接对云盘操作&#xff0c;而扩容直接操作了lvm卷而未操作云盘分区&#xff0c;并随后执行了扩容的partprobe&#xff0c;resize2fs卷等操作&#xff1b;最后&#xff0c;显示并未扩容成功&#xff0c;重启系统后…...

【MySQL教程】| (1-1) 2023MySQL-8.1.0 安装教程

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

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...