属性动画的使用

文章目录

  • 1 概述
  • 2 创建属性动画页面
  • 3 属性动画参数调整
    • 延时播放时间delay的设置
    • onFinish回调函数的使用
  • 4 关闭属性动画页面
  • 5 参考

1 概述

属性动画,是最为基础的动画,其功能强大、使用场景多,应用范围较广。常用于如下场景中:

  • 一、页面布局发生变化。例如添加、删除部分组件元素。
  • 二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素,或者将部分元素从一端移动到另外一端。
  • 三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。

简单来说,属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示,其原理是,当组件的通用属性发生改变时,组件状态由初始状态逐渐变为结束状态的过程中,会创建多个连续的中间状态,逐帧播放后,就会形成属性渐变效果,从而形成动画。

img

属性动画的使用方式也非常简单,只需要给组件(包括基础组件和容器组件)添加animation属性,并设置好参数,如下代码所示:

Image($r('app.media.image1'))   .animation({   duration: 1000,    tempo: 1.0,    delay: 0,    curve: Curve.Linear,    playMode: PlayMode.Normal,    iterations: 1  })

2 创建属性动画页面

如下图所示,在该下拉刷新动画场景中,一共有6个属性动画。头部中的五个图标的移动放大动画中,每个图标都是单独的一个动画,其共同组合成一个刷新等待动画。最后是下方组件上移的一个移动动画。为方便理解,图中下方的内容将以图片来代替实际应用的功能页面。

图2-1 :示例动画

img

该6个属性动画创建方式类似,以五个图标放大移动动画的为例来讲解如何创建属性动画。

首先,创建一个头部刷新组件RefreshAnimHeader,在其中自定义一个图标组件AttrAnimIcons,用Image组件将资源图标引入,并设置好样式,如下所示:

@Component
export default struct RefreshAnimHeader {...@Builder AttrAnimIcons(iconItem) {  Image(iconItem.imgRes)    .width(this.iconWidth)    .position({ x: iconItem.posX })    .objectFit(ImageFit.Contain)    .animation({      duration: 2000,      tempo: 3.0,      delay: iconItem.delay,      curve: Curve.Linear,      playMode: PlayMode.Alternate,      iterations: -1})}...
}

然后在build方法中使用Row容器组件,将自定义的图标组件引入,并设置好样式,同时定义组件状态iconWidth,添加onApper事件,修改iconWidth的值,使其从30变为100,触发UI状态更新。

@Component
export default struct RefreshAnimHeader {...@State iconWidth: number = 30;private onStateCheck() {  if (this.state === RefreshState.REFRESHING) {    this.iconWidth = 100;  } else {    this.iconWidth = 30;  }}build() {  Row() {    ForEach(CommonConstants.REFRESH_HEADER_FEATURE, (iconItem) => {     this.AttrAnimIcons(iconItem)    }, item => item.toString())  }  .width("100%")  .height("100%")  .onAppear(() => {    this.onStateCheck();})}
}

运行代码,即可看到五个图标的移动放大动画效果。

img

1、animation属性作用域。animation自身也是组件的一个属性,其作用域为animation之前。即产生属性动画的属性须在animation之前声明,其后声明的将不会产生属性动画。以示例中的五个图标动画为例,我们期望产生动画的属性为Image组件的width属性,故该属性width需在animation属性之前声明。如果将该属性width在animation之后声明,则不会产生动画效果。

2、产生属性动画的属性变化时需触发UI状态更新。在本示例中,产生动画的属性width,其值是通过变量iconWidth从30变为100,故该变量iconWidth的改变需触发UI状态更新。

3、产生属性动画的属性本身需满足一定的要求,并非任何属性都可以产生属性动画。目前支持的属性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等

3 属性动画参数调整

属性动画中animation的参数如下:

属性名称属性类型默认值描述
durationnumber1000动画时长,单位为毫秒,默认时长为1000毫秒。
temponumber1.0动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。
curveCurveCurve.Linear动画变化曲线,默认曲线为线性。
delaynumber0延时播放时间,单位为毫秒,默认不延时播放。
iterationsnumber1播放次数,默认一次,设置为-1时表示无限次播放。
playModePlayModePlayMode.Normal设置动画播放模式,默认播放完成后重头开始播放。
onFinishfunction-动画播放结束时回调该函数。

其中变化曲线curve枚举值为:

名称描述
Linear表示动画从头到尾的速度都是相同的。
Ease表示动画以低速开始,然后加快,在结束前变慢,CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn表示动画以低速开始,CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut表示动画以低速结束,CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut表示动画以低速开始和结束,CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn标准曲线,cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn减速曲线,cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn加速曲线,cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction阻尼曲线,CubicBezier(0.2, 0.0, 0.2, 1.0)。

播放模式playMode枚举值为:

名称描述
Normal动画按正常播放。
Reverse动画反向播放。
Alternate动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。
AlternateReverse动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。

本文以参数delay和onFinish为例来演示和讲解属性动画的参数调整。其他参数的效果可自行尝试。

延时播放时间delay的设置

在单个的组件元素的属性动画中,一般不设置参数delay的值。而在需要设置时,往往是需要在动画开始前做一些准备工作,具体依场景而定,本文在此不讨论。

在由多个组件元素的属性动画组合的动画中,例如示例动画中的五个图标的属性动画组合而成的刷新等待动画,通过设置参数delay的值,可以使各个组件元素之间按照一定的秩序依次播放,形成跌宕起伏、鳞次栉比的动画效果。在此场景中,该值的大小又与duration相关联。

该如何设置各个图标的参数delay的值呢?

在设置delay值之前,我们先理解一个概念:延时间距。其意思是两个图标组件的延时参数delay的差值,即:delay2-delay1=延时间距。要想实现五个图标之间以良好的秩序先后移动放大,各个图标之间的延时间距是一样的,例如延时间距为100ms时,此五个图标的延时delay可以分别设置为100ms、200ms、300ms、400ms、500ms。

在实际开发场景中,我们该如何确定延时间距呢?

在此有个经验可以参考:在延时间距不超过动画时长duration时,总延时间距越接近duration,秩序性越好。其中,总延时间距为延时间距与图标数量的乘积,即:延时间距*图标数量=总延时间距。

故此,我们在设置参数delay时,需要确定动画时长duration的值。该值默认为1000ms,具体时长可依据具体的业务需要来决定。

在本示例动画中,图标动画时长duration为2000ms,故延时间距为2000ms/5=400ms,五个图标的延时参数delay可分别设置为400ms、800ms、1200ms、1600ms、2000ms。其效果如示例图所示,图标先后秩序明显,视觉效果良好。

onFinish回调函数的使用

参数onFinish与参数iterations有关。当参数iterations播放结束时,会调用onFinish函数来进行后续的业务处理。例如提示动画播放结束。

Image(iconItem.imgRes).width(this.iconWidth).position({ x: iconItem.posX }).objectFit(ImageFit.Contain).animation({duration: 2000,tempo: 3.0,delay: iconItem.delay,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: 1,onFinish: () => {      prompt.showToast({ message:"动画播放结束!!!" })}})

img

当iterations设置为-1时,表示无限次播放,则onFinish回调函数不会被调用。

4 关闭属性动画页面

此处需要将关闭属性动画区别开来:

  • 属性动画关闭,是指动画播放结束,但是动画组件依然存在并显示在页面上。
  • 关闭属性动画页面,是指将动画的组件删除或者隐藏起来。

在本示例动画中,指将头部刷新组件RefreshAnimHeader隐藏起来。该如何实现呢?

首先,在组件RefreshAnimHeader中添加变量state,并用@Consume监听其值的变化,同时添加条件渲染逻辑,根据state的值来判断是否需要关闭。当state变为IDLE状态时,表示需要关闭属性动画页面。

@Component
export default struct RefreshAnimHeader {  @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState;build() {Row() {if (this.state !== RefreshState.IDLE) { // start or stop animation when idle state.ForEach(CommonConstants.REFRESH_HEADER_FEATURE, (iconItem) => {this.AttrAnimIcons(iconItem)}, item => item.toString()}}}.width(CommonConstants.FULL_LENGTH).height(CommonConstants.FULL_LENGTH).onAppear(() => {this.onStateCheck();})}
}

其次,在本示例中,通过下方图片的上移属性动画来关闭刷新组件RefreshAnimHeader。在组件RefreshComponent中,通过@Consume与组件RefreshAnimHeader的@Consume进行间接绑定,修改state变量的值为IDLE状态即可关闭属性动画页面。

@Component
export default struct RefreshComponent {@Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState;build() {List({ scroller: this.listController }) {ListItem() {...}}  .animation({curve: Curve.Smooth,duration: RefreshConstants.REFRESH_HEADER_ANIM_DURATION,playMode: PlayMode.Normal,onFinish: () => {if (this.headerOffset === -RefreshConstants.REFRESH_HEADER_HEIGHT) {this.state = RefreshState.IDLE;}}})
}

5 参考

具体代码信息请参考Codelab:自定义下拉刷新动画(ArkTS)

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

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

相关文章

第九节HarmonyOS 常用基础组件12-TextTimer

1、描述 通过文本显示计时信息并控制其计时器状态的组件。 2、接口 TextTimer(options?: {isCountDown?: boolean, count?: number, controller?: TextTimerController}) 3、参数 参数名称 参数类型 必填 描述 isCountDown boolean 否 是否倒计时。默认值&#…

Kafka与RabbitMQ的区别

消息队列介绍 消息队列(Message Queue)是一种在分布式系统中进行异步通信的机制。它允许一个或多个生产者在发送消息时暂时将消息存储在队列中,然后由一个或多个消费者按顺序读取并处理这些消息。 消息队列具有以下特点: 异步通…

64.网游逆向分析与插件开发-游戏增加自动化助手接口-优化自动助手与游戏焦点的切换

内容来源于:易道云信息技术研究院VIP课 上一个内容:自动化助手UI与游戏菜单的对接-CSDN博客 码云地址(master分支):https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号:617ac3477ef18273fb9cc2…

Linux文件系统与日志服务管理

目录 一.Linux文件系统 1.inode表和block (1)inode (2)block 2.查看inode号命令 3.Linux系统文件三种主要时间属性 4.磁盘空间还剩余很多但无法继续创建文件 5.inode大小 二.日志 1.日志保存位置 2.日志文件的分类 &a…

Selenium 学习(0.17)——软件测试之流程图绘制方法

病假5天,出去野20天,成功错过了慕课网上的期末考试。 害,都怪玩乐太开心了…… 反正咱又不指着全靠这个行当来吃饭,错过也就错过了,立的Flag能抢救一下还是要抢救一下吧。【这个其实早都会画了,而且基本也正…

Mac robotframework+pycharm运行suite报错情况:ImportError: No module named request

报错实例: 当前Preferences–>Tool–>External Tools Suite配置,显示使用的python为2.7版本,robotframework安装在当前版本的python中: 但是我pycharm现在的环境配置的python为3.11,当前使用的RF与当前使用的py…

工业无人机行业研究:预计2025年将达到108.2亿美元

近年来,在技术进步和各行各业对无人驾驶飞行器 (UAV) 不断增长的需求的推动下,工业无人机市场一直在快速增长。该市场有望在未来几年继续其增长轨迹,许多关键趋势和因素推动其发展。 在全球范围内,工业无人机市场预计到 2025 年将…

NoSQL概述与Redis入门-redis安装与测试

一、Nosql概述 1、为什么使用Nosql 1、单机Mysql时代 90年代,一个网站的访问量一般不会太大,单个数据库完全够用。随着用户增多,网站出现以下问题 数据量增加到一定程度,单机数据库就放不下了数据的索引(B Tree),一个…

数据治理工程师 CDGA 认证-数据管理及答案

1. 组织管理数据的目标不包括(A ) A.获取、存储、保护数据和确保数据资产的有效性 B.确保数据和信息的质量 C.确保利益相关方的数据隐私和保密性 D.防止数据和信息未经授权或被不当访问 a.确保数据资产的完…

关于外连接、内连接和子查询的使用(2)

目录 一. 前言 二. 使用外连接、内连接和子查询进行解答 三. 思维导图 一. 前言 在前面我们对外连接、内连接和子查询的使用有了一些了解,今天我们将继续更深入的进行学习。(这里缺少的八个题目在博主的前面博客有解答,大家可以移步前面一…

zabbix-proxy代理安装

zabbix-proxy代理安装 安装zabbix-proxyserver端配置zabbix-proxy配置被监控的agent安装中问题解决监控网络设备JMX和IPMI监控方式 zabbix-proxy的安装,至少需要准备三台机器,一台安装服务端,一台安装agent端,这里就不叙述了&…

mmseg报错ValueError: size shape must match input shape. Input is 2D,size is 3

运行mmsegmentation碰到报错:size shape must match input shape. Input is 2D, size is 3 这个问题比较坑。有时候我们的标签size是[512,512,3],然而mmsegmentation需要的标签输入应该是8位的图片,即[512,…

OBD汽车

相当于客户端与服务器 诊断设备流程 》》》》诊断服务 OBD很多的定死了 Vme就很灵活 WWH 就是两个的结合 OBD15031 SID PID 可以自己定义一些 一个字节255个 两个有效字节 02 01 0D 5555(随机值)这是请求 两个有效字节 01 OD(请求速…

Python(31):Python3.7操作DB2数据库工具类

Python(31):Python3.7操作DB2数据库工具类 Python3.7操作DB2数据库 要在Python中操作DB2数据库,你可以使用IBM提供的 ibm_db 或 ibm_db_sa 包。以下是基本的步骤: 1、安装 ibm_db 包 pip install ibm_db 2、连接到DB2数据库 import ibm_db conn_str = "DATABASE=…

L1-009 N个数求和(Java)

题目 本题的要求很简单,就是求N个数字的和。麻烦的是,这些数字是以有理数分子/分母的形式给出的,你输出的和也必须是有理数的形式。 输入格式: 输入第一行给出一个正整数N(≤100)。随后一行按格式a1/b1 a…

51单片机之按键和数码管

51单片机之按键和数码管 ✍前言:♐独立按键😀独立按键的原理😀软件实现按键控制LED灯的亮灭 ♐数码管😊数码管显示数字或者字母的原理🐉共阳极数码管🐉共阴极极数码管🐉4位1体数码管 &#x1f6…

Go 语言为什么不支持并发读写 map

Go语言的map类型不支持并发读写的主要原因是并发读写会导致数据竞态(data race),这意味着多个 goroutine 可能同时访问并修改同一个 map,从而引发不确定的结果。 在Go语言的设计中,为了防止数据竞态,不同于…

大数据StarRocks(六) :Catalog

StarRocks 自 2.3 版本起支持 Catalog(数据目录)功能,实现在一套系统内同时维护内、外部数据,方便您轻松访问并查询存储在各类外部源的数据。 1. 基本概念 内部数据:指保存在 StarRocks 中的数据。 外部数据&#xf…

分布式系统架构设计之分布式消息队列架构解析

分布式消息队列架构是构建在分布式系统之上的消息队列架构,旨在提高高性能、高可用性和可伸缩性。它包括以下架构相关部分: 1、架构优势 分布式消息队列架构的优势主要体现在以下几个方面: 01 高可用性 在分布式消息队列架构中&#xff0…

uni-app顶部下拉舒心

下拉刷新实际上是在用户操作下拉交互时重新调用接口,然后将新获取的数据再次渲染到页面中。 操作步骤 基于 scroll-view 组件实现下拉刷新,需要通过以下方式来实现下拉刷新的功能。 配置 refresher-enabled 属性,开启下拉刷新交互监听 ref…