鸿蒙开发-UI-动画-页面内动画

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

文章目录

前言

一、概述

二、页面内动画

1.布局更新动画

1.1 使用显示动画产生布局更新动画

1.2 使用属性动画产生布局更新动画

总结

前言

上文详细学习了鸿蒙开发UI使用画布绘制自定义图形的相关知识,了解画布绘制的三种方式,同时学习了画布组件的常用用法,以及如何绘制规则、不规则图形、图片图像等,本文将学习鸿蒙开发UI动画

一、概述

动画的原理:一个时间段内,多次改变UI外观,由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧,对应一次屏幕刷新,而决定动画流畅度的一个重要指标就是帧率FPS(Frame Per Second),即每秒的动画帧数,帧率越高则动画就会越流畅。

ArkUI动画:改变属性值+指定动画参数(动画时长、变化规律(即曲线)等参数)。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。

ArkUI提供的动画能力按照页面的分类方式,可分为页面内的动画和页面间的动画。

按照基础能力分,可分为属性动画、显式动画、转场动画三部分

二、页面内动画

1.布局更新动画

1.1 使用显示动画产生布局更新动画

显示动画接口

//第一个参数指定动画参数,第二个参数为动画的闭包函数。
animateTo(value: AnimateParam, event: () => void): void

代码示例:当Column组件的alignItems属性改变后,其子组件的布局位置结果发生变化,只要属性是在animateTo的闭包函数中修改的,那么由其引起的所有变化都会按照animateTo的动画参数执行动画过渡到终点值。

@Entry
@Component
struct LayoutChange {//step1:定义用于控制Column的alignItems属性@State itemAlign: HorizontalAlign = HorizontalAlign.Start;allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];alignIndex: number = 0;build() {Column() {Column({ space: 10 }) {Button("1").width(100).height(50)Button("2").width(100).height(50)Button("3").width(100).height(50)}.margin(20).alignItems(this.itemAlign).borderWidth(2).width("90%").height(200)Button("click").onClick(() => {//step2:设置动画参数:时长为1000ms,曲线为EaseInOutanimateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;//step3:改变属性:在闭包函数中修改this.itemAlign参数,使Column容器内部孩子的布局方式变化,使用动画过渡到新位置this.itemAlign = this.allAlign[this.alignIndex];});})}.width("100%").height("100%")}
}

除了直接改变布局方式外,也可直接修改组件的宽、高、位置,来实现动画效果

1.2 使用属性动画产生布局更新动画

显式动画把要执行动画的属性的修改放在闭包函数中触发动画,而属性动画则无需使用闭包,把animation属性加在要做属性动画的组件的属性后即可。

属性动画接口

//参数指定动画参数。
animation(value: AnimateParam)

代码示例,在animation属性之前的属性值发生变更,组件才会产生动画效果,在animation属性之后添加的属性变化,组件不会有动画效果。

@Entry
@Component
struct LayoutChange2 {@State myWidth: number = 100;@State myHeight: number = 50;@State flag: boolean = false;@State myColor: Color = Color.Blue;build() {Column({ space: 10 }) {Button("text").type(ButtonType.Normal).width(this.myWidth).height(this.myHeight)
//step1: 在type、width、height属性之后添加animation属性,只有type、width、height属性变更,button组件才有指定的动画(时长为1000ms,曲线为Ease)效果.animation({ duration: 1000, curve: Curve.Ease })// animation对下面的backgroundColor、margin属性不生效.backgroundColor(this.myColor).margin(20)Button("area: click me").fontSize(12).onClick(() => {
//step2: 改变属性值,配置了属性动画的属性会进行动画过渡if (this.flag) {this.myWidth = 100;this.myHeight = 50;this.myColor = Color.Blue;} else {this.myWidth = 200;this.myHeight = 100;this.myColor = Color.Pink;}this.flag = !this.flag;})}}
}

注:

1. 属性动画会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。

2. 显式动画会对动画闭包前后造成的所有界面差异执行动画,且使用同一动画参数,适用于统一执行的场景。显式动画也可以用于一些非属性变量造成的动画,如if/else的条件,ForEach使用的数组元素的删减。

3. 如果一个属性配置了属性动画,且在显式动画闭包中改变该属性值,属性动画优先生效,会使用属性动画的动画参数。


总结

本文细学习了鸿蒙开发UI使用动画相关知识,了解动画的两个维度的分类方式,详细学习了页面内动画-布局更新动画,下文将学习组件内转场动画。

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

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

相关文章

数学中不能随心所欲乱用辅助函数

在“On the divisor and circle problems"论文中(J.Number Theory, 29(1988), 60-93)&#xff0c;H.Iwaniec和C.J.Mozzochi用了好几个光滑辅助函数&#xff08;"光滑"指无穷次可导&#xff09;&#xff0c;其中一个光滑函数要求满足&#xff1a;(a)当x<1或x&…

分析:一周销量破千万的《幻兽帕鲁》到底用的什么技术?

在《幻兽帕鲁》这款游戏中&#xff0c;玩家沉浸于创建一个属于自己的英雄角色。从选择种族到定制外观&#xff0c;每一步都体现了建造者模式的精髓。 建造者模式在游戏中的体现 玩家在游戏中创建角色&#xff0c;就像是在逐步构建一个复杂对象。首先&#xff0c;有一个基本的…

新一代信息技术下,AI如何重塑售前工作

近期&#xff0c;“新质生产力”一词犹如一颗璀璨的新星&#xff0c;频繁地在各大媒体平台上抢占热点位置&#xff0c;引发了大家的关注。关于“新质生产力”官方的解释是科技创新驱动经济高质量发展的必然产物&#xff0c;它代表着新一轮科技革命和产业变革的重要方向。 在今…

finishConnect(..) failed: Connection refused,服务本地正常服务器网关报400,nacos服务实例不能下线

①application里固定ip # Spring spring:cloud:inetutils:preferred-networks: 127.0.0.1 ②找到nacos服务下的protocol&#xff0c;删除下面所有&#xff0c;/nacos-server/data/protocol&#xff0c;删了不会有问题&#xff0c;而且这东西越用越大&#xff0c;删了好爽 ③重…

const XX=void0

在阅读源码中&#xff0c;经常会看到 const XXvoid0这里的 void 0其实就是 undefined&#xff0c;void 运算符总会返回一个 undefined 的结果。 那么&#xff0c;为什么要用 void 0 代替 undefined 呢&#xff1f; 总结&#xff1a; undefined 是一个「全局对象&#xff08;…

iOS——【自动引用计数】ARC规则及实现

1.3.3所有权修饰符 所有权修饰符一共有四种&#xff1a; __strong 修饰符__weak 修饰符__undafe_unretained 修饰符__autoreleasing 修饰符 __strong修饰符 _strong修饰符表示对对象的强引用&#xff0c;持有强引用的变量在超出其作用域的时候会被废弃&#xff0c;随着强引…

对话有赞创始人兼CEO白鸦:AI将如何改变产品体验?

SaaS行业有个老大难问题&#xff0c;系统难用&#xff0c;用户学习的成本太高&#xff0c;并且系统越强大&#xff0c;这个问题就会越明显。AI的出现&#xff0c;似乎让这个问题有了解法&#xff0c;这个赛道中的引领者&#xff0c;已经在尝试用AI重构SaaS&#xff0c;让每个被…

数组连续和 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 给定一个含有N个正整数的数组&#xff0c;求出有多少连续区间&#xff08;包括单个正整数&#xff09;&#xff0c;它们的和大于等于 x。 输入描述 第一行为两个…

Xcode升级到Xcode15.1或15.2之后,无法新建Category和Extension文件,如何解决?

项目场景&#xff1a; Xcode升级到15.1或15.2之后&#xff0c;无法新建Category和Extension文件&#xff0c;并且Xcode不报任何错误 问题描述 Xcode升级到15.1或15.2之后&#xff0c;无法新建Category和Extension文件&#xff0c;并且Xcode不报任何错误。 具体的操作步骤如下…

【MySQL】 隔离级别和锁机制

事务的四种特性 事务具有四个特征&#xff1a;原子性&#xff08; Atomicity &#xff09;、一致性&#xff08; Consistency &#xff09;、隔离性&#xff08; Isolation &#xff09;和持续性&#xff08; Durability &#xff09;。这四个特性简称为 ACID 特性。 原子性。…

redis-集群 原生部署和工具自动部署

什么redis集群&#xff1f; redis集群是一个提供在多个redis节点之间共享数据的程序集。它并不像redis主从复制模式那样仅提供一个master节点来提供写服务&#xff0c;而是会提供多个master节点来提供写服务&#xff0c;每个master节点中存储的数据都不一样&#xff0c;这些数据…

【保姆级爬虫】微博关键词搜索并获取博文和评论内容(python+selenium+chorme)

微博爬虫记录 写这个主要是为了防止自己忘记以及之后的组内工作交接&#xff0c;至于代码美不美观&#xff0c;写的好不好&#xff0c;统统不考虑&#xff0c;我只能说&#xff0c;能跑就不错了&#xff0c;上学压根没学过python好吧&#xff0c;基本上是crtlc&ctrlv丝滑小…

开启AI绘画新纪元:让创意在指尖绽放

文章目录 一、了解AI绘画的基本原理二、选择合适的AI绘画工具三、掌握AI绘画的基本技巧四、借鉴与创新&#xff1a;从模仿到创作五、参与社区交流&#xff0c;共同成长《AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通》亮点推荐内容简介作者简介目录 在科技日新…

Linux centos 常用的网络负载和网速查看工具和命令

在 CentOS 上查看网络速度和网络负载&#xff0c;可以使用多种工具&#xff0c;以下是一些常用的命令行工具&#xff1a; iftop - 用于实时监视网络带宽使用情况。 安装命令&#xff1a; sudo yum install iftop 使用命令&#xff1a; sudo iftop nload - 一个简单的控制…

Doris-数据分区

数据分区&#xff1a;即将大表划分为小表&#xff0c;数据分区主要有两个级别&#xff1a;Partition和Bucket&#xff08;Tablet&#xff09;。 Partition&#xff1a;逻辑分区&#xff0c;按照一定规则将表按照行进行划分&#xff0c;每个部分就是一个Partition。 Bucket&…

【面试题】Rocketmq面试题总结

为什么使用消息队列&#xff08;如RocketMQ&#xff09;&#xff1f; 异步处理&#xff1a;解耦系统间调用&#xff0c;提高响应速度。解耦&#xff1a;降低模块间的直接依赖&#xff0c;使系统更易于扩展和维护。流量削峰&#xff1a;在高峰期将请求暂时存储起来&#xff0c;…

flink重温笔记(十):Flink 高级 API 开发——flink 四大基石之 State(涉及Checkpoint)

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第 10 天啦&#xff01;学习了 flink 四大基石之 State &#xff08;状态&#xff09;&#xff0c;主要是解决大数据领域增量计算的效果&#xff0c;能够保存已经计算过的结果数据状态&#xff01;重点学习了 state 的类型划…

相对于 Linux,Windows Server 存在的意义是什么?

相对于 Linux&#xff0c;Windows Server 存在的意义是什么&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Linux 的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给…

【LeetCode】389_找不同_C

题目描述 给定两个字符串 s 和 t &#xff0c;它们只包含小写字母。 字符串 t 由字符串 s 随机重排&#xff0c;然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 https://leetcode.cn/problems/find-the-difference/description/ 示例 示例 1&#xff1a; 输…

新版AndroidStudio的Gradle窗口显示task list not built 问题解决

在使用新版AndroidStudio时&#xff0c;会出现&#xff0c;Task List not built 的问题。如果你记得task的名字&#xff0c;当然可以 直接通过命令 gradle taskname 或者 ./gradlew taskName直接执行即可&#xff0c;但是若是记不住&#xff0c;还是把这个任务构建处理比较好用…