Flutter动画(二)内建隐式动画Widget

news2025/2/24 11:15:54

动画效果介绍中给出了选择动画的决策树:

使用动画框架不在我们讨论的话题内。flutter支持的动画包括隐式动画和显式动画。

隐式动画和显式动画

隐式动画和显示动画是两种不同的动画实现方式,它们的主要区别在于控制权和动画的重复性。

隐式动画:

  • 自动完成:隐式动画是由系统框架自动完成的,不需要用户手动控制动画过程。
  • 单向且一次性的:隐式动画是一次性的,单方向的,由某个属性值的变化驱动,例如透明度从0到1的变化。
  • 无法自动重复:隐式动画无法实现动画效果从0到1再到0的自动重复。
  • 无法停止:一旦隐式动画开始,就无法中途停止,直到动画完成。
  • 简单易用:隐式动画只能控制duration和curve,不需要创建控制器,只需几行代码就可实现简单的动画效果。

显示动画:

  • 用户控制:显示动画需要用户自己通过AnimationController创建的动画。
  • 灵活且复杂:显示动画可以随时控制动画的开始和暂停,并且可以实现循环的,交错的变化效果。
  • 定义完整流程:显示动画不像隐式动画那样默认从一个初始状态线性变化到目标状态,而是需要显式地定义完整的动画流程。
  • 更灵活:显示动画可以更加灵活地实现更加复杂的动画效果,例如在x和y轴方向上不断缩放的动画对象。

需要注意的是,使用隐式动画后,View会暂时不能接收用户的触摸、滑动等手势,这可能会导致在列表滚动时,如果对其中的view使用了隐式动画,滚动无法主动停止下来,必须等动画结束了才能停止。

flutter既提供了内置的隐式和显式动画相关widget,也提供了相关自定义的widget。

内建隐式动画Widget

本篇介绍flutter内建的隐式动画Widget。常见的内建隐式动画Widget:

AnimatedAlign

AnimatedContainer

AnimatedDefaultTextStyle

AnimatedFractionallySizedBox

AnimatedScale

AnimatedRotation

AnimatedSlide

AnimatedOpacity、SliverAnimatedOpacity

AnimatedPadding

AnimatedPhysicalModel

AnimatedPositioned

AnimatedPositionedDirectional

AnimatedTheme

AnimatedCrossFade

AnimatedSize

AnimatedSwitcher

TweenAnimationBuilder

AnimatedSwitcher

9.6 动画切换组件(AnimatedSwitcher) | 《Flutter实战·第二版》

AnimatedCrossFade

AnimatedSwitcher不同的是,AnimatedCrossFade是针对两个子元素,而AnimatedSwitcher是在一个子元素的新旧值之间切换。

TweenAnimationBuilder

TweenAnimationBuilder可以用于实现自定义的隐式动画。TweenAnimationBuilder用法比较简单,首先需要一个动画时长参数:

TweenAnimationBuilder<double>(
	duration: Duration(seconds: 2),
)

可以设置tween(动画的值),比如需要一个100到200的差值:

tween: Tween<double>(begin: 100.0, end: 200),

如果需要颜色值使用ColorTween,这样我们的动画组件就可以动起来了。

我们也可以设置动画曲线,设置如下:

TweenAnimationBuilder<double>(
	 curve: Curves.bounceIn,
)

通过onEnd监听动画完成通知,用法如下:

TweenAnimationBuilder<double>(
	 onEnd: () {}
)

 然后添加一个builder方法来提供widget消费动画值,用法如下:

builder: (context, value, child) {
        return Container(
          height: value,
          width: value,
          child: child,
        );
      }

builder方法有3个参数,第一个是BuildContext,第二个value的类型取决于你要做动画的数据,比如:

TweenAnimationBuilder<double>(
	builder: (context, value, child) {
	}
)

value的类型就是double,如果是TweenAnimationBuilder<Color>,value的类型就是Color。
第三个就是TweenAnimationBuilder的子组件,用于优化。这种优化在flutter中很常见,避免了子组件中不变的部分被反复创建。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【笔记2-5】ESP32:freertos消息队列

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…

211高校的VMware迁移之路:迁至深信服云平台,更高效、更稳定

某211高校为国家 “双一流” 建设高校、省一流大学&#xff0c;在教育领域占据举足轻重的地位。其教学单位构成丰富多元&#xff0c;学科体系广泛而全面。然而&#xff0c;学校面临着VMware虚拟化平台维保到期、服务器老化等严峻挑战&#xff0c;严重干扰了教学、科研及管理工作…

【Matlab】将所有打开的图像批量保存为JPG格式

将Matlab中所有打开的图像批量保存为JPG格式 前言一、实现步骤1. 获取所有打开的图像句柄2. 遍历并保存图像 总结 前言 在使用Matlab进行数据分析或图像处理时&#xff0c;我们经常会生成多个图像以便观察和比较。有时&#xff0c;为了方便分享或存档&#xff0c;我们需要将这…

Linux实现地址转换和抓包

1.Linux实现地址转换 1.1 SNAT和DNAT NAT:地址转换SNAT:源地址转换DNAT:目的地址转换 内网——》外网&#xff1a;内网色的ip不能直接和公网ip通信&#xff0c;必须要把内网的地址转换成和公网ip通信的地址 外网——》内网&#xff1a;外网也不能直接和内网通信&#xff0c…

RocketMQ 过滤消息 基于tag过滤和SQL过滤

RocketMQ 过滤消息分为两种&#xff0c;一种tag过滤&#xff0c;另外一种是复杂的sql过滤。 tag过滤 首先创建producer然后启动&#xff0c;在这里创建了字符串的数组tags。字符串数组里面放置了多个字符串&#xff0c;然后去发送15条消息。 15条消息随着i的增长&#xff0c;…

[Redis#14] 持久化 | RDB | bgsave | check-rdb | 灾备

目录 0.概述 持久化的策略 1 RDB 1.1 触发机制 1.2 流程说明 1.3 RDB 的优缺点 0.概述 在学习 MySQL 数据库时&#xff0c;我们了解到事务的四个核心特性&#xff1a;原子性、一致性、持久性和隔离性。这些特性确保了数据库操作的安全性和可靠性。当我们转向 Redis 时&a…

AI大模型驱动数据分析:利用自然语言实现数据查询与可视化(1)

在当今AI驱动的时代&#xff0c;数据分析已成为各行各业不可或缺的能力。然而&#xff0c;传统的数据分析流程通常需要掌握SQL、数据处理和可视化等多项专业技能&#xff0c;这对非技术背景的业务人员来说是一个不小的挑战。 想象一下&#xff0c;当数据中心的负责人打开手机时…

Python_Flask03

这篇文章主要介绍的是数据库的增删改查操作&#xff0c;无多余好说的。 from flask import Flask from flask_sqlalchemy import SQLAlchemy from sqlalchemy import text from flask_migrate import Migrateapp Flask(__name__)# 本地基础信息的主机名 HOSTNAME "127.0…

在.NET 6中使用Serilog收集日志

此示例的完整详细信息&#xff1a;https://download.csdn.net/download/hefeng_aspnet/89998498 Serilog 是一个日志库&#xff0c;它提供对文件、控制台和其他几个地方的记录。它易于配置&#xff0c;并且具有干净且易于使用的界面。 Serilog具有无与伦比的输出目的地选择&…

【设计模式系列】备忘录模式(十九)

目录 一、什么是备忘录模式 二、备忘录模式的角色 三、备忘录模式的典型应用场景 四、备忘录模式在Calendar中的应用 一、什么是备忘录模式 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许在不暴露对象内部状态的情况下保存和恢…

网络安全技术详解:虚拟专用网络(VPN) 安全信息与事件管理(SIEM)

虚拟专用网络&#xff08;VPN&#xff09;详细介绍 虚拟专用网络&#xff08;VPN&#xff09;通过在公共网络上创建加密连接来保护数据传输的安全性和隐私性。 工作原理 VPN的工作原理涉及建立安全隧道和数据加密&#xff1a; 隧道协议&#xff1a;使用协议如PPTP、L2TP/IP…

面阵相机的使用和注意事项

引言 面阵相机&#xff08;Area Scan Camera&#xff09;是一种广泛应用于工业视觉、医学成像、安防监控以及科研领域的图像采集设备。与线扫相机不同&#xff0c;面阵相机的传感器包含多行像素&#xff08;例如1280x1024、1920x1080等&#xff09;&#xff0c;能够在一个曝光…

Android 车载虚拟化底层技术-Kernel4.19-Android10(双card)技术实现

Android Display Graphics系列文章-汇总 前言 对于Linux和Android来说&#xff0c;只要是多屏(>2)显示的场景都可以显示虚拟化。只是大部分场景对显示稳定性没有要求&#xff0c;系统异常了就都不显示了。但对于容器相关方案&#xff0c;或要求显示隔离的场景&#xff0c;是…

02 conda常用指令

目录 命令快速查找命令详细解释列出当前conda中存在的解释器环境使用指定的解释器环境创建虚拟环境激活自己创建的虚拟环境虚拟环境删除切换回主环境找到你计算机中安装的miniconda3的跟目录找到虚拟环境的目录选择需要删除的虚拟环境文件夹确认环境是否删除 补充删除虚拟环境指…

【C++】赋值运算与变量交换的深入探讨

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;赋值操作符与连续赋值&#x1f4af;常见复合赋值符及其功能&#x1f4af;位操作符中的复合赋值符&#x1f4af;题目一&#xff1a;账户余额练习题目描述代码实现运行结果分…

HarmonyOS:使用HTTP访问网络

HTTP 一、导入http模块 module.json5里添加网络权限 导入http模块 二、创建http请求 创建http请求 import { http } from kit.NetworkKitfunction getNetData() {// 创建数据请求对象let httpRequest http.createHttp() }三、发起请求 请求方法 四、请求示例 GET请求 PO…

KernelShark在ubuntu24.04.01的编译

KernelShark在ubuntu24.04.01的编译 写在前面具体过程装ubuntu24.04.01安装depends下载代码如何编译cmake 输出make 输出 如何安装 初步启动Add the User to the perf Group 简单的使用trace-cmd抓包 来看我的文章&#xff0c;必有所得。 平凡中&#xff0c;总有我帮您踩过的坑…

【48】Android通过libjpeg-turbo库实现图片压缩

&#xff08;1&#xff09;公司为节约图片占用服务器存储资源成本&#xff0c;需要对Android手机客户端所传递到云存储服务器中的图片进行压缩&#xff0c;在不影响图片失真程度的情况下&#xff0c;最大限度的压缩图片以节省图片所占用的存储空间。 &#xff08;2&#xff09;…

vue.js学习(day 18)

实例&#xff1a;面经基础版 (功能)组件缓存 keep-alive 小结 main.js import Vue from vue import App from ./App.vue import router from ./routerVue.config.productionTip falsenew Vue({ //注入,将路由对象注入到new Vue实例中&#xff0c;建立关联render: h > …

Android 使用 Canvas 和 Paint 实现圆形图片

学习笔记 效果展示: 全部代码: public class YuanActivity extends AppCompatActivity {private ActivityYuanBinding binding;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 通过 DataBinding 获取布局文件binding …