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

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

使用动画框架不在我们讨论的话题内。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.rhkb.cn/news/485754.html

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

相关文章

如何解决Redis缓存穿透

如何解决Redis缓存穿透 本篇将带大家了解如何在不同的业务场景下防范Redis缓存穿透&#xff0c;以查询商品业务场景为例子&#xff0c;分别使用缓存null和布隆过滤器的方法来防范缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样请求到达缓存…

Spring Boot 3.0 + MySQL 8.0 + kkFileView 实现完整文件服务

Spring Boot 3.0 MySQL 8.0 kkFileView 实现完整文件服务 背景&#xff1a;比较常见的需求&#xff0c;做成公共的服务&#xff0c;后期维护比较简单&#xff0c;可扩展多个存储介质&#xff0c;上传逻辑简单&#xff0c;上传后提供一个文件id&#xff0c;后期可直接通过此i…

spring6:3容器:IoC

spring6&#xff1a;3容器&#xff1a;IoC 目录 spring6&#xff1a;3容器&#xff1a;IoC3、容器&#xff1a;IoC3.1、IoC容器3.1.1、控制反转&#xff08;IoC&#xff09;3.1.2、依赖注入3.1.3、IoC容器在Spring的实现 3.2、基于XML管理Bean3.2.1、搭建子模块spring6-ioc-xml…

ROS2创建 base 包用于其他模块的参数配置和头文件依赖

Demo 背景 ROS2项目开发中存在以下需求&#xff1a;有多个包需要读取一些共同的配置项(以txt或者yaml形式存在&#xff09;&#xff0c;且依赖于一些公用的utils工具代码(C)。Solution: 创建一个 base_config 包来“存放” 配置文件和公用的头文件。gitee address: Gitee/CDal…

相机动态/在线标定

图1 图2 基本原理 【原理1】平行线在射影变换后会交于一点。如图所示,A为相机光心,蓝色矩形框为归一化平面,O为平面中心。地面四条黄色直线为平行且等距的车道线。HI交其中两条车道线于H、I, 过G作HI的平行线GM交车道线于M。HI、GM在归一化平面上的投影分别为JK、PN,二者会…

记录下nginx接口代理配置问题

其中api和api1是前面定义的upstream&#xff0c;ip相同只是端口不同。 一开始/api1/直接 像api一样 proxy_pass http://api1这样是不行的&#xff0c;因为会代理到 后端的 /api1/...接口&#xff0c;而后端实际接口地址是 /api/..... 所以必须像上面写法才能将外网的 /api…

【Mac】安装Gradle

1、说明 Gradle 运行依赖 JVM&#xff0c;需要先安装JDK&#xff0c;Gradle 与 JDK的版本对应参见&#xff1a;Java Compatibility IDEA的版本也是有要求Gradle版本的&#xff0c;二者版本对应关系参见&#xff1a;Third-Party Software and Licenses 本次 Gradle 安装版本为…

【JavaEE】多线程(7)

一、JUC的常见类 JUC→java.util.concurrent&#xff0c;放了和多线程相关的组件 1.1 Callable 接口 看以下从计算从1加到1000的代码&#xff1a; public class Demo {public static int sum;public static void main(String[] args) throws InterruptedException {Thread …

Linux-实用操作

文章目录 一. 各类实用小技巧(快捷键)1. ctrl c 强制停止2. ctrl d 退出登出3. history 查看历史命令4. !命令前缀&#xff0c;自动匹配上一个命令5. ctrl r&#xff0c;搜索历史命令6. ctrl a | e&#xff0c;光标移动到命令开始或结束7. ctrl ← | →&#xff0c;左右跳…

李飞飞首个“空间智能”模型发布:一张图,生成一个3D世界 | LeetTalk Daily

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 在人工智能技术迅速发展的背景下&#xff0c;李飞飞创立的世界实验室于近期发布了首个“空间智能”模型&#xff0c;这一创新成果引发了3D生…

C语言程序设计P5-3【应用函数进行程序设计 | 第三节】——知识要点:函数的嵌套调用和递归调用

知识要点&#xff1a;函数的嵌套调用和递归调用 视频 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 本任务要求用递归法求 n!。 我们知道n!n(n-1)(n-2)……1n(n-1)!递归公式为&#xff1a; 1.上面公式分解为n!n(n-1)!&#xff0c;即将求n!的问题变为…

css部分

前面我们学习了HTML&#xff0c;但是HTML仅仅只是做数据的显示&#xff0c;页面的样式比较简陋&#xff0c;用户体验度不高&#xff0c;所以需要通过CSS来完成对页面的修饰&#xff0c;CSS就是页面的装饰者&#xff0c;给页面化妆&#xff0c;让它更好看。 1 层叠样式表&#…

单片机的中断系统

作者简介 彭煜轩&#xff0c;男&#xff0c;银川科技学院计算机与人工智能学院&#xff0c;2022级计算机与科学技术8班本科生&#xff0c;单片机原理及应用课程第3组。 指导老师&#xff1a;王兴泽 电子邮件&#xff1a;1696409709qq.com 前言 本篇文章是参考《单片机原理…

【技巧】Mac上如何显示键盘和鼠标操作

在制作视频教程时&#xff0c;将键盘和鼠标的操作在屏幕上显示出来&#xff0c;会帮助观众更容易地理解。 推荐Mac上两款开源的小软件。 1. KeyCastr 这款工具从2009年至今一直在更新中。 https://github.com/keycastr/keycastr 安装的话&#xff0c;可以从Github上下载最…

ARM架构-Cache的底层原理

在主存与处理器之间加入一个小容量的存储器保存 CPU 最近一段时间内的历史访问数据&#xff0c;将在 CPU 发起访问的时候优先提供数据快速访问&#xff0c;这个介于 CPU 与主存储器之间的小容量高速存储空间我们称之为 Cache&#xff0c;即高速缓存。Cache 作为处理器与主存之间…

Flutter:商品多规格内容总结,响应式数据,高亮切换显示。

如图所示&#xff1a; 代码为练习时写的项目&#xff0c;写的一般&#xff0c;功能实现了&#xff0c;等以后再来优化。 自己模拟的数据结构 var data {id:1,name:精品小米等多种五谷杂粮精品小等多种五谷杂粮,logo:https://cdn.uviewui.com/uview/swiper/1.jpg,price:100.5…

团队管理中如何做好目标管理

团队管理中的目标管理是确保团队高效运行的核心要素之一。 在目标管理中&#xff0c;清晰的目标设定、合理的资源分配、实时的跟踪与反馈机制是成功的关键。首先&#xff0c;设定SMART目标&#xff08;具体、可衡量、可达成、相关性强、时间限定&#xff09;能够有效聚焦团队的…

Unity在运行状态下,当物体Mesh网格发生变化时,如何让MeshCollider碰撞体也随之实时同步变化?

旧版源代码地址&#xff1a;https://download.csdn.net/download/qq_41603955/90087225?spm1001.2014.3001.5501 旧版效果展示&#xff1a; 新版加上MeshCollider后的效果&#xff1a; 注意&#xff1a;在Unity中&#xff0c;当你动态地更改物体的Mesh时&#xff0c;通常期望…

Blender导入下载好的fbx模型像的骨骼像针戳/像刺猬

为什么我下载下来的骨骼模型和我自己绑定的模型骨骼朝向完全不一样 左边是下载的模型 右边是我自己绑定的模型 左边的模型刚刚感觉都是像针一样往外戳的&#xff0c;像刺猬一样那种。 解决方法勾选自动骨骼坐标系

基于Springboot+Vue的在线答题闯关系统

基于SpringbootVue的在线答题闯关系统 前言&#xff1a;随着在线教育的快速发展&#xff0c;传统的教育模式逐渐向互联网教育模式转型。在线答题系统作为其中的一个重要组成部分&#xff0c;能够帮助用户通过互动式的学习方式提升知识掌握度。本文基于Spring Boot和Vue.js框架&…