Flutter中动画的实现

       动画三要素

        控制动画的三要素:Animation、Tween、和AnmaitionController

        Animation: 产生的值的序列,有CurveAnimation等子类,, 可以将值赋值给Widget的宽高或其他属性,进而控制widget发生变化

        Tween:可以定义值的变化范围,  继承自Animatable<T>,每个类都有begin和end两个属性,同时有CurveTween等子类,可以定义值在begin和end间的变化方式。

        AnimationController: 动画的控制器,可以设置动画的时长,控制动画开始或者结束等

        有两种方式生成Animation:

      (1)_controller.drive(_curveTween)

      (2)_curveTween.animate(_controller)     

       

        Widget动画相关属性

        (1)Container的width、height, 控制Widget大小

        (2)SlideTransition 的position, 通过Tween<Offset>控制Widget的位移

        (3) Align的heightFactor, 控制Widget的展开或收起

        (4) AnimatedOpacity的opacity属性,控制Widget的渐隐渐显

        两种动画实现方式

         Flutter中动画主要有两种实现方式,即通过addListener监听Animation的值的变化, 或者用AnimationBuilder来构建参与动画的Widget。

        下面看一个通过addListener实现动画的例子

//动画控制器
final AnimationController controller = new AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
//创建一个值的序列,其变化方式为Curve中的淡出效果
final Animation curve =new CurvedAnimation(parent: controller, curve: Curves.easeOut);
//通过tween指定值的变化范围为0~255
Animation<int> animation = new IntTween(begin: 0, end: 255).animate(curve);
//监听动画状态的变化: 动画是否结束
..addStatusListener((status) {if (status == AnimationStatus.completed) {controller.reverse();} else if (status == AnimationStatus.dismissed) {controller.forward();}})
//监听Animation的值的变化,更新UI
..addListener(() {setState(() {// 将animation.value赋值给指定的Widget的属性_opacity = animation.value.toDouble() / 255;});      });//动画开始    
controller.forward();

        再看下如何通过AnimationBuilder构建动画:

Widget build(BuildContext context) => Center(child: AnimatedBuilder(animation: animation,builder: (context, child) => Container(height: animation.value,width: animation.value,child: child,),child: child),);
}

        不难看出,使用AnimationBuilder来实现动画效果,代码要简洁的多,是更为推荐的实现方式。

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

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

相关文章

GO: 快速升级Go版本

由于底层依赖升级了&#xff0c;那我们也要跟着升&#xff0c;go老版本已经不足满足需求了&#xff0c;必须要将版本升级到1.22.0以上 查看当前Go版本 命令查看go版本 go version[rootlocalhost local]# go version go version go1.21.4 linux/amd64 [rootlocalhost local]# …

nginx 配置禁止访问某个目录或文件

在nginx要禁止某个或一类资源&#xff0c;只需要增加一个location&#xff0c;然后在其中使用deny all即可。 禁止访问扩展名为text的文件&#xff0c;配置如下&#xff1a; location ~* /.text{deny all; } 禁止访问docs目录&#xff0c;以及其下所有子目录或文件&#xff0…

一篇文章带你了解Python数据分析

目录 一、什么是数据分析&#xff1f; 二、为什么学习数据分析&#xff1f; 三、数据分析实现流程 一、什么是数据分析&#xff1f; 是把隐藏在一些看似杂乱无章的数据背后的信息提炼出来&#xff0c;总结出所研究对象的内在规律。 使得数据的价值最大化 指定促销活动的方…

【网络原理】使用Java基于UDP实现简单客户端与服务器通信

目录 &#x1f384;API介绍&#x1f338;DatagramSocket&#x1f338;DatagramPacket&#x1f338;InetSocketAddress &#x1f333;回显客户端与服务器&#x1f338;建立回显服务器&#x1f338;回显客户端 ⭕总结 我们用Java实现UDP数据报套接字编程&#xff0c;需要借用以下…

yolo模型中神经节点Mul与Sigmoid 和 Conv、Concat、Add、Resize、Reshape、Transpose、Split

yolo模型中神经节点Mul与Sigmoid 和 Conv、Concat、Add、Resize、Reshape、Transpose、Split 在YOLO&#xff08;You Only Look Once&#xff09;模型中&#xff0c;具体作用和用途的解释&#xff1a;

给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点

问题是删除链表的倒数第 n 个节点&#xff0c;并返回链表的头节点。你可以使用两个指针来实现这个目标&#xff0c;一个快指针和一个慢指针。首先&#xff0c;快指针先移动 n 步&#xff0c;然后两个指针同时移动&#xff0c;直到快指针到达链表的末尾。这时&#xff0c;慢指针…

Claude 3 Sonnet 模型现已在亚马逊云科技的 Amazon Bedrock 正式可用!

今天&#xff0c;我们宣布一个激动人心的里程碑&#xff1a;Anthropic 的 Claude 3 Sonnet 模型现已在亚马逊云科技的 Amazon Bedrock 正式可用。 下一代 Claude (Claude 3) 的三个模型 Claude 3 Opus、Claude 3 Sonnet 和 Claude 3 Haiku 将陆续登陆 Amazon Bedrock。Amazon …

二叉树遍历(前中后序的递归/非递归遍历、层序遍历)

二叉树的遍历 1. 二叉树的前序、中序、后序遍历 前、中、后序遍历又叫深度优先遍历 注&#xff1a;严格来说&#xff0c;深度优先遍历是先访问当前节点再继续递归访问&#xff0c;因此&#xff0c;只有前序遍历是严格意义上的深度优先遍历 首先需要知道下面几点&#xff1a; …

【排序】详解插入排序

一、思想 插入排序是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。具体步骤如下&#xff0c;将数组下标为0的元素视为已经排序的部分&#xff0c;从1开始遍历数组&#xff0c;在遍历的过程中当前元素从…

upload-labs通关记录

文章目录 前言 1.pass-012.pass-023.pass-034.pass-045.pass-056.pass-067.pass-078.pass-089.pass-0910.pass-1011.pass-1112.pass-1213.pass-1314.pass-1415.pass-1516.pass-1617.pass-1718.pass-1819.pass-19 前言 本篇文章记录upload-labs中&#xff0c;所有的通过技巧和各…

蓝桥杯python常用内置函数

一、 abs() #返回数字的绝对值 例&#xff1a; 二、 all() #判断给定的可迭代参数中的所有元素是否都为True&#xff0c;若是则返回True&#xff0c;反之返回False 例&#xff1a; 三、 any() #判断给定的可迭代参数是否都为False&#xff0c;全为False则返回False&am…

SSL 证书,了解一下常识

公司的网站、应用怎么才能保证在互联网上安全运行&#xff0c;不被攻击、盗取数据呢&#xff1f; 创业必经之路&#xff0c;一步一步走就对了&#xff0c;可能没赶上红利期&#xff0c;但不做就等于0。 概述 SSL 证书&#xff08;SSL Certificates&#xff09;又称数字证书&am…

leetcode 1143. 最长公共子序列【动态规划】

leetcode 1143. 最长公共子序列 int longestCommonSubsequence(char* text1, char* text2) {int len1 strlen(text1);int len2 strlen(text2);int dp[len1 1][len2 1];memset(dp, 0, sizeof(dp));for (int i 1; i < len1; i) {for (int j 1; j < len2; j) {if (t…

【vue2基础教程】vue指令

文章目录 前言一、内容渲染指令1.1 v-text1.2 v-html1.3 v-show1.4 v-if1.5 v-else 与 v-else-if 二、事件绑定指令三、属性绑定指令总结 前言 Vue.js 是一款流行的 JavaScript 框架&#xff0c;广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中…

IPsec VPN之安全联盟

一、何为安全联盟 IPsec在两个端点建立安全通信&#xff0c;此时这两个端点被称为IPsec对等体。安全联盟&#xff0c;即SA&#xff0c;是指通信对等体之间对某些要素的约定&#xff0c;定义了两个对等体之间要用何种安全协议、IP报文的封装方式、加密和验证算法。SA是IPsec的基…

k8s中storageClass存储介绍

目录 一.storageclass产生背景 二.storageClass的具体使用 1.创建NFS共享目录和服务 2.创建Service Account来管控NFS provisioner在k8s集群中运行的权限 3.创建StorageClass来建立PVC并调用NFS provisioner进行预定的工作 4..创建NFS provisioner来共享NFS并建立PV 将PV…

IOS面试题object-c 51-60

51. 阐述常见的 Objective-C 的数据类型 &#xff1f; Objective-C的数据类型有NSString&#xff0c;NSNumber&#xff0c;NSArray&#xff0c;NSMutableArray&#xff0c;NSData等等&#xff0c;这些都是class&#xff0c;创建后便是对象&#xff0c;而C语言的基本数据类型int…

使用jar命令删除.jar文件中的重复的类和目录并重新打包

引言&#xff1a; android项目&#xff0c;引入的 .jar包 和 .aar中 有相同的类&#xff0c;导致编译冲突&#xff0c;由于这些依赖项没有上传到Maven仓库&#xff0c;无法使用 exclude 排除&#xff0c;只能尝试修改jar文件&#xff0c;删除重复的代码&#xff0c;再重新打包…

CACLP预告 | 飞凌嵌入式与您相约山城重庆

第二十一届中国国际检验医学暨输血仪器试剂博览会&#xff08;CACLP&#xff09;将于2024年3月16日-18日在重庆国际博览中心举行。本次会议将探讨科技创新趋势&#xff0c;展示最新成果&#xff0c;发现和挖掘颠覆性技术和创新产品&#xff0c;引领实验医学体外诊断科技创新和未…

电脑资料管理软件(5个高效批量管理电脑资料的方法)

企业电脑资料管理是企业一大难题&#xff0c;为什么这样说&#xff1f; 首先&#xff0c;企业电脑资料的数量庞大且种类繁多。 其次&#xff0c;电脑资料的安全性和保密性要求高。 再者&#xff0c;电脑资料的管理涉及到多个部门和员工的协作。 ...... 针对此类情况很多企业…