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),),),);},),),);}
}

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

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

相关文章

阿里云网络、数据中心和服务器技术创新优势说明

阿里云服务器技术创新、网络技术创新、数据中心技术创新和智能运维&#xff1a;云服务器方升架构、自研硬件、自研存储硬件AliFlash和异构计算加速平台&#xff0c;以及全自研网络系统技术创新和数据中心巴拿马电源、液冷技术等技术创新说明&#xff0c;阿里云百科aliyunbaike.…

树莓派4B串口通信配置方式

目录 1树莓派4B的安装&#xff1a; 1.1安装Serial与使用 1.1.1安装serial 1.1.2打开串口 1.2设置硬件串口为GPIO串口&#xff08;修改串口映射关系&#xff09; 1.2.1修改配置文件 2.1minicom串口 2.1.1安装minicom 这篇博客源于&#xff1a;工创赛。需要让树莓派与STM…

设计模式探索:从理论到实践的编码示例 (软件设计师笔记)

&#x1f600;前言 设计模式&#xff0c;作为软件工程领域的核心概念之一&#xff0c;向我们展示了开发过程中面对的典型问题的经典解决方案。这些模式不仅帮助开发者创建更加结构化、模块化和可维护的代码&#xff0c;而且也促进了代码的复用性。通过这篇文章&#xff0c;我们…

AdaBoost算法解密:从基础到应用的全面解析

目录 一、简介什么是AdaBoostAdaBoost的历史和重要性定义 二、基础概念集成学习&#xff08;Ensemble Learning&#xff09;定义示例 弱学习器和强学习器定义示例 三、AdaBoost算法原理样本权重&#xff08;Sample Weights&#xff09;定义示例 学习器权重&#xff08;Learner …

C/C++与汇编混合编程

1. C/C调用汇编 C/C想调用汇编代码必须要注意名称修饰的问题 名称修饰(name decoration): 一种标准的C/C编译技术, 通过添加字符来修改函数名, 添加的字符指明了每个函数参数的确切类型。主要是为了支持函数重载, 但对于汇编来说其问题在于, C/C编译器让链接器去找被修饰过的名…

CSS box-shadow阴影

1、语法 box-shadow: h-shadow v-shadow blur spread color inset; 值描述h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset可选。…

Windows驱动反调试的一种手段

Windows驱动反调试的一种手段 今天要介绍的是eprocess的0xbc位置 0x0bc DebugPort : Ptr32 Void DebugPort是在用windowsapi调试方式时候所使用的数据结构指针&#xff0c;那么如果我们能够循环清空这个值的话&#xff0c;就可以做到大部分windows调试api都无法正确调试进程 …

【论文笔记】DiffusionTrack: Diffusion Model For Multi-Object Tracking

原文链接&#xff1a;https://arxiv.org/abs/2308.09905 1. 引言 多目标跟踪通常分为两阶段的检测后跟踪&#xff08;TBD&#xff09;和一阶段的联合检测跟踪&#xff08;JDT&#xff09;。TBD对单帧进行目标检测后&#xff0c;使用跟踪器跨帧关联相同物体。使用的跟踪器包括使…

SLAM从入门到精通(tf的使用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在ros的机器人学习过程中&#xff0c;有一件事情是肯定少不了的。那就是坐标系的转换。其实这也很容易理解。假设有一个机器人&#xff0c;它有一个…

DC电源模块关于宽电压输入和输出的范围

BOSHIDA DC电源模块关于宽电压输入和输出的范围 DC电源模块是一种电子设备&#xff0c;能够将输入的直流电源转换成所需的输出电源&#xff0c;用于供电各种电子设备。其中&#xff0c;关于宽电压输入和输出的范围&#xff0c;是DC电源模块常见的设计要求之一。本文将详细介绍…

UG\NX二次开发 信息窗口的一些操作 NXOpen/ListingWindow

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG\NX二次开发 信息窗口的一些操作 NXOpen/ListingWindow 效果: 代码: #include "me.hpp" #include <NXOpen/ListingWindow.hxx> #include <…

安全渗透测试基础之漏洞扫描工具之Nessus使用介绍

前置条件:Nessus工具使用前要确保工具是服务状态 systemctl start nessusd.service 启动nessus服务 systemctl status nessusd.service 查看nessus服务状态 1.配置扫描模板 2.新增高级扫描 2.1 设置日程表: 2.2设置邮件收件人(可选): 2.3主机发现: 2.

【VIM】VIm-plug插件

如何查找需要的插件 https://github.com/mhinz/vim-startify https://github.com/vim-airline/vim-airline https://github.com/Yggdroot/indentLine github.com/w0ng/vim-hybrid github.com/altercationi/vim-colors-solarized guithub.com/morhetz/gruvbox github.com/sc…

基于SpringBoot的校园资料分享平台

目录 前言 一、技术栈 二、系统功能介绍 学生信息管理 学生统计管理 资料分享管理 公告资讯管理 首页资料分享 资料分享评论 我的收藏 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网购物的飞速发展&#xff0c;国内放开了自媒体的政策…

APA技术架构与说明

1.自动泊车的硬件架构 2.APA自动泊车辅助系统 1&#xff09;APA主要包括以下典型功能 &#xff08;1&#xff09;泊车入库&#xff1a;利用超声波雷达或环视摄像头实现车位识别&#xff0c;并计算出合适行驶轨迹&#xff0c;对车辆进行横向/纵向控制使车辆驶入车位&#xff1…

cadence SPB17.4 S032 - 使用room来放置元件

文章目录 cadence SPB17.4 S032 - 使用room来放置元件概述笔记在orcad中设置子原理图的ROOM号码在空的Allegro工程中, 放入板框在allegro中建立room备注补充 - ROOM还得留着END cadence SPB17.4 S032 - 使用room来放置元件 概述 如果在allegro中直接手工或自动放置元件, 放好…

【知识点随笔分析 | 第五篇】简单介绍什么是QUIC

前言&#xff1a; 随着互联网的快速发展&#xff0c;传统的基于TCP的协议开始显现出一些局限性。TCP在连接建立和拥塞控制方面存在一定的延迟&#xff0c;这可能导致用户在访问网页、观看视频或玩网络游戏时感受到不必要的等待时间。而QUIC作为一种新兴的传输协议&#xff0c;试…

[React] 性能优化相关 (一)

文章目录 1.React.memo2.useMemo3.useCallback4.useTransition5.useDeferredValue 1.React.memo 当父组件被重新渲染的时候&#xff0c;也会触发子组件的重新渲染&#xff0c;这样就多出了无意义的性能开销。如果子组件的状态没有发生变化&#xff0c;则子组件是不需要被重新渲…

好题分享

1.Problem - G - Codeforces &#xff08;1&#xff09;题意 &#xff08;2&#xff09;思路 因为最多13次&#xff0c;那么不如我们就问13次&#xff0c;然后考虑把每一个位置重新按二进制拆分成一个下标&#xff0c;因为C(13,6) > 1000,因此在数量上是满足得&#xff0c;我…

番外6:下载+安装+配置Linux

#########配置Linux---后续 step08: 点击编辑虚拟机设置&#xff0c;选择下载好的映像文件.iso进行挂载&#xff1b; step09: 点击编辑虚拟机选项&#xff0c;选择UEFI启动模式并点击确定&#xff1b; step10: 点击开启虚拟机&#xff0c;选择Install rhel &#xff1b; 备注&…