首页 > 其他分享 >Flutter的动画开发入门简介

Flutter的动画开发入门简介

时间:2023-11-26 15:32:11浏览次数:27  
标签:动画 入门 对象 AnimationController Tween CurvedAnimation Animation Flutter

Flutter 动画库中的核心类,插入用于指导动画的值。 Animation 对象知道动画目前的状态(例如,是否开始,暂停,前进或倒退),但是对屏幕上显示的内容一无所知。 AnimationController管理 Animation。 CurvedAnimation 定义进程为非线性曲线。 Tween 为动画对象插入一个范围值。例如,Tween 可以定义插入值由红到蓝,或从 0 到 255。 使用 Listeners 和 StatusListeners 监视动画状态变化。

Animation<double> 在 Flutter 中,动画对象无法获取屏幕上显示的内容。 Animation 是一个已知当前值和状态(已完成或已解除)的抽象类。一个比较常见的动画类型是 Animation<double>。

一个 Animation 对象在一段时间内,持续生成介于两个值之间的插入值。这个 Animation 对象输出的可能是直线,曲线,阶梯函数,或者任何自定义的映射。根据 Animation 对象的不同控制方式,它可以反向运行,或者中途切换方向。

动画还可以插入除 double 以外的类型,比如 Animation<Color> 或者 Animation<Size>。

Animation 对象具有状态。它的当前值在 .value 中始终可用。

Animation 对象与渲染或 build() 函数无关。

Curved­Animation

CurvedAnimation 定义动画进程为非线性曲线。

animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

CurvedAnimation 和 AnimationController(下面将会详细说明)都是 Animation<double> 类型,所以可以互换使用。 CurvedAnimation 封装正在修改的对象 — 不需要将 AnimationController 分解成子类来实现曲线。

Animation­Controller

AnimationController 是个特殊的 Animation 对象,每当硬件准备新帧时,他都会生成一个新值。默认情况下,AnimationController 在给定期间内会线性生成从 0.0 到 1.0 的数字。例如,这段代码创建了一个动画对象,但是没有启动运行。

controller =
    AnimationController(duration: const Duration(seconds: 2), vsync: this);

AnimationController 源自于 Animation<double>,所以可以用在任何需要 Animation 对象的地方。但是 AnimationController 还有其他方法控制动画。例如,使用 .forward() 方法启动动画。数字的生成与屏幕刷新关联,所以一般来说每秒钟会生成 60 个数字。数字生成之后,每个动画对象都调用附加 Listener 对象。为每个 child 创建自定义显示列表,请参考 RepaintBoundary。 创建 AnimationController 的同时,也赋予了一个 vsync 参数。 vsync 的存在防止后台动画消耗不必要的资源。您可以通过添加 SingleTickerProviderStateMixin 到类定义,将有状态的对象用作 vsync。可参考 GitHub 网站 animate1 中的示例。

Tween

在默认情况下,AnimationController 对象的范围是 0.0-0.1。如果需要不同的范围或者不同的数据类型,可以使用 Tween 配置动画来插入不同的范围或数据类型。例如下面的示例中,Tween 的范围是 -200 到 0.0。

tween = Tween<double>(begin: -200, end: 0);

Tween 是无状态的对象,只有 begin 和 end。 Tween 的这种单一用途用来定义从输入范围到输出范围的映射。输入范围一般为 0.0-1.0,但这并不是必须的。 Tween 源自 Animatable<T>,而不是 Animation<T>。像动画这样的可动画元素不必重复输出。例如,ColorTween 指定了两种颜色之间的过程。

colorTween = ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween 对象不存储任何状态。而是提供 evaluate(Animation<double> animation) 方法,将映射函数应用于动画当前值。 Animation 对象的当前值可以在 .value 方法中找到。 evaluate 函数还执行一些内部处理内容,比如确保当动画值在 0.0 和1.0 时分别返回起始点和终点。 Tween.animate 要使用 Tween 对象,请在 Tween 调用 animate(),传入控制器对象。例如,下面的代码在 500 ms 的进程中生成 0-255 范围内的整数值。

AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);

提示 animate() 方法会返回一个 Animation,而不是 Animatable。 下面的示例展示了一个控制器,一个曲线,和一个 Tween。

AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
final Animation<double> curve =
    CurvedAnimation(parent: controller, curve: Curves.easeOut);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(curve);

标签:动画,入门,对象,AnimationController,Tween,CurvedAnimation,Animation,Flutter
From: https://blog.51cto.com/u_15777557/8570811

相关文章

  • 小白指针(七)--------新手入门
    我们之前讲了很多。但是指针的路还需要继续往下走,其实也快结束了,学习就是一种坚持的路,只有往前走才能学到更多,看到更多。(。・ω・。),今天的可能比前面的多,请耐心学习,谢谢在指针更新完之后我会将指针的内容,整理发一片这里是指针的快结束了,这里的一节结束还有最后有一片文章了,朋友们加油呀!一......
  • C#入门实践
    ①必备知识点_控制台相关staticvoidMain(string[]args){Console.WriteLine("控制台相关");#region知识点一复习输入输出//输出//Console.WriteLine("123123");//光标空行//Console.Write("1......
  • FreeRTOS入门教程(任务通知)
    (文章目录)前言本篇文章将带大家学习任务通知的概念和使用方法。一、什么是任务通知FreeRTOS中的任务通知(TaskNotification)是一种轻量级的同步机制,允许一个任务通知另一个任务已发生的事件或条件。这对于多任务系统中的协作和同步非常有用。以下是有关FreeRTOS任务通知的详细......
  • dp入门 cf189A
    题意:有一个长为n的带子,可以将它剪为a,b,c三种长度,问最多能剪多少段?分析:是一道与完全背包类似的题,但这里要求的是背包正好装满。该怎么解决这一问题?我们可以将f数组全部初始化为-1,状态转移时如果上一个状态不是-1才可以转移。状态转移方程\(f_{i,j}\)表示前i个物品恰好装满j的......
  • DataX快速入门
    DataX3.0快速入门一、DataX3.0概览DataX是阿里云DataWorks数据集成的开源版本,在阿里巴巴集团内部被广泛使用的离线数据同步工具/平台。解决了数据库之中的数据同步、迁移问题,把网状结构转为星型结构,主要用于数据库之间传送业务数据。为了解决异构数据源同步问题,DataX将复杂的......
  • XSS基本入门
    xss简单介绍xss概念跨站脚本攻击(CrossSiteScripting),为不和层叠样式表(CascadingStyleSheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户目的。xss危......
  • kafka入门(二): 位移提交
    位移提交:Kafka的每条消息都有唯一的offset,用来表示消息在分区中对应的位置。有的也称之为"偏移量"。消费者每次在poll()拉取消息,它要返回的是还没有消费过的消息集,因此,需要记录上一次消费时的消费位移,并且持久化。消费者在消费完消息之后,需要执行消费位移的提交。自动位......
  • 工具 | Vshell使用入门
    写在前面   "Vshell是一款go编写的主机群管理工具(RAT)"。    发现Vshell作者团队非常低调,项目Github上Readme介绍非常简短,网上也很少有使用介绍。写个基础入门,记录从配置到主机管理、搭建隧道。本文仅作为工具介绍,请勿用于任何违法场景。    未经授权请勿利用文章......
  • Java零基础入门-数组
    Java零基础入门-数组前言Java是一门面向对象的编程语言,被广泛应用于各个领域。数组是Java编程中最基本也是最重要的数据结构之一,它可以用来存储一组数据,并且方便进行操作和处理。本文将为大家介绍Java数组的基本概念、语法和常见应用场景,帮助初学者快速入门。摘要本文将从以下......
  • Jaeger Client Go 链路追踪|入门详解
    目录从何说起Jaeger部署Jaeger从示例了解JaegerClientGo了解trace、spantracer配置Sampler配置Reporter配置分布式系统与span怎么调、怎么传HTTP,跨进程追踪客户端Web服务端Tag、Log和Ref 从何说起之前参加柠檬大佬的训练营(免费白嫖),在大......