鸿蒙开发-UI-动画-组件内转场动画

鸿蒙开发-UI-组件3

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

鸿蒙开发-UI-页面路由

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

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

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

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

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

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

文章目录

前言

一、基本概念

二、组件内转场动画

1.if/else产生组件内转场动画

2.ForEach产生组件内转场动画

总结


前言

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

一、基本概念

组件的插入、删除过程即为组件本身的转场过程,组件的插入、删除动画称为组件内转场动画,通过组件内转场动画定义组件出现、消失的效果。

组件内转场动画的接口

transition(value: TransitionOptions)

二、组件内转场动画

1.if/else产生组件内转场动画

代码示例

@Entry
@Component
struct IfElseTransition {@State flag: boolean = true;@State show: string = 'show';build() {Column() {Button(this.show).width(80).height(30).margin(30).onClick(() => {if (this.flag) {this.show = 'hide';} else {this.show = 'show';}
//step2: 在animateTo闭包中改变flag的值,由flag变化所引起的Image组件的插入删除,都要按照动画参数产生动画         animateTo({ duration: 1000 }, () => {this.flag = !this.flag;})})if (this.flag) {
//step1:Image组件是由if控制的组件,给其加上transition的参数,以指定组件内转场的具体效果
//TransitionType.Insert【插入时加上平移效果】
//TransitionType.Delete【删除时加上缩放和透明度效果】Image($r('app.media.mountain')).width(200).height(200).transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })}}.height('100%').width('100%')}
}

注:transition必须配合animateTo一起使用,在animateTo的闭包中,控制组件的插入、删除并指定指定动画参数,transition定义动画样式

2.ForEach产生组件内转场动画

代码示例

@Entry
@Component
struct ForEachTransition {@State numbers: string[] = ["1", "2", "3", "4", "5"]startNumber: number = 6;build() {Column({ space: 10 }) {Column() {ForEach(this.numbers, (item) => {
//step1: ForEach下的直接组件需配置transition效果Text(item).width(240).height(60).fontSize(18).borderWidth(1).backgroundColor(Color.Orange).textAlign(TextAlign.Center).transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })}, item => item)}.margin(10).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center).width("90%").height("70%")Button('向头部添加元素').fontSize(16).width(160).onClick(() => {animateTo({ duration: 1000 }, () => {
//step2: 在animateTo的闭包中控制组件的插入或删除
//往numbers数组头部插入一个元素,导致ForEach在头部增Text组件
//部增Text组件按照transition定义的样式实现组件转场动画效果this.numbers.unshift(this.startNumber.toString());this.startNumber++;})})}.width('100%').height('100%')}
}

注:Column布局方式设为了FlexAlign.Start,即垂直方向从头部开始布局。

1. 往数组末尾添加元素时,并不会对数组中现存元素对应的组件位置造成影响,只会触发新增组件的插入动画。

2. 往数组头部添加元素时,原来数组中的所有元素的下标都增加了,虽然不会触发其添加或者删除,但是会影响到对应组件的位置。所以除新增的组件会做transition动画以外,之前存在于ForEach中组件也会做位置动画。


总结

本文细学习了鸿蒙开发UI组件内转场动画,了解转场的概念,学习在if/else,foreach场景下如何结合transition和animateTo实现组件的转场动画效果,下文将学习弹簧曲线动画。

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

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

相关文章

vulhub靶场-matrix-breakout-2-morpheus

下载&部署 从官网中下载 https://www.vulnhub.com/entry/matrix-breakout-2-morpheus,757/ 下载完成后,在vmware中打开,选择刚刚下载的ova文件 vmware打开文件后需要将刚导入的机器重新启动 再检查下网卡是否是和kali在同一张网卡下就可以开始打靶了…

C++ set 容器

1.6 C set 容器 一般性的 Set 实现而言,是无序的,在 C 中,std::set 是有序的容器,它基于红黑树(Red-Black Tree)实现,并且会根据元素的键值进行排序。因此,std::set 中的元素总是按…

软件测试工程师职位笔试知识点细节(2)

一、软件测试分为哪几个阶段,生命周期? 软件测试一般分为单元测试、集成测试和系统测试。 需求分析→测试计划→测试设计、软件开发→测试执行→测试评估 二、一条软件缺陷(或者叫Bug)记录都包含了哪些内容? 一条Bug…

设计模式学习笔记 - 规范与重构 - 5.如何通过封装、抽象、模块化、中间层解耦代码?

前言 《规范与重构 - 1.什么情况下要重构?重构什么?又该如何重构?》讲过,重构可以分为大规模高层重构(简称 “大型重构”)和小规模低层次重构(简称 “小型重构”)。大型重构是对系统…

Redis运行原理及基本数据类型

Redis 是一个开源的、基于内存的数据存储系统,它通过键值对的方式存储数据。是单线程的内存数据库,采用事件驱动模型来处理并发请求。它使用非阻塞的 I/O 多路复用机制来实现高性能的并发访问。数据库通常会将数据存储在内存中,这样可以提高数…

系统架构设计基础

本博客地址:https://security.blog.csdn.net/article/details/136542641 一. 软件架构 1、软件架构或称软件体系结构,是指系统的一个或者多个结构,这些结构包括软件的构件(可能是程序模块、类或者是中间件)、构件的外…

谷粒商城【成神路】-【10】——缓存

目录 🧂1.引入缓存的优势 🥓2.哪些数据适合放入缓存 🌭3.使用redis作为缓存组件 🍿4.redis存在的问题 🧈5.添加本地锁 🥞6.添加分布式锁 🥚7.整合redisson作为分布式锁 &#x1f697…

学习大数据,所必需的java基础(完结篇)

文章目录 注解注解的介绍注解的定义以及属性的定义格式注解的使用注解解析的方法----AnnotatedElement接口(扩展) 元注解注解之在此注解 注解 注解的介绍 1.jdk1.5版本的新特性 — 一个引用数据类型 和类,接口,枚举是同一个层次…

【教程】使用小米换机来迁移数据

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] 1、在新旧手机上都下载安装小米换机app:小米换机-小米应用商店 2、在新手机上,选择旧手机类型 3、授予权限 4、在旧手机上,授予权限 4、输入锁屏密码 5、选择发现的新手机 6、等…

EMC整改

EMC包括EMI和EMS,其中EMI由辐射干扰RE、传导干扰CE、谐波电流Harmonics、闪烁Flicker组成,EMS由静电抗扰度ESD、电快速瞬态脉冲群EFT、电压跌落DIP、传导抗扰度CS、辐射抗扰度RS、浪涌抗扰度surge、工频磁场抗扰度PMS。新产品生产出来但凡要做认证&#…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:NavDestination)

作为子页面的根容器,用于显示Navigation的内容区。 说明: 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 该组件从API Version 11开始默认支持安全区避让特性(默认值为:expandSaf…

嘿!AI 编码新玩法上线!

随着 AI 智能浪潮到来,AI 编码助手成为越来越多开发者的必备工具,将开发者从繁重的编码工作中解放出来,极大地提高了编程效率,帮助开发者实现更快、更好的代码编写。 通义灵码正是这样一款基于阿里云通义代码大模型打造的智能编码…

Java学习笔记------拼图游戏

图形化界面GUI GUI:Graphical User Interface(图像用户接口),指采用图形化的方式显示操作界面 两套体系:AWT包中和Swing包中 组件 JFrame:最外层的窗体 JMenuBar:最上层菜单 JLaber&#…

【蓝桥杯】节省时间

一、对于string类型变量的连接,可以直接用“”或者“”来进行字符串的直接连接 string a"1"; string b"2"; string c; cab"12"; string操作符两边既可以都是string类型,也可是string与char类型 注意: (1)“”…

rj45网络变压器作用

WE-MIDC网络变压器是Wrth Elektronik公司生产的一种专业级别的网络变压器,也称为Wrth Elektronik网络变压器。它通常用于工业自动化、医疗保健、军事和航空航天等领域的网络通信应用。 WE-MIDC网络变压器具有以下特点: 电气隔离:WE-MIDC网络变…

一次压测经验过程的经验记录

开篇说明 如果在这里获得过启发和思考,希望点赞支持!对于内容有不同的看法欢迎来信交流。 技术栈 >> java 邮箱 >> 15673219519163.com 描述 通常对于QPS较高的web应用程序在开发完成后,除了功能测试之外还需要做一轮压力测试…

工厂模式~

1. 简单工厂 它的主要特点是需要在工厂类中做判断,从而创造相应的产品。当增加新的产品时,就需要修改工厂类。在简单工厂模式中,增加新的产品需要修改工厂类,这违反了开闭原则(对扩展开放,对修改封闭&#…

计算机网络-H3C 交换机FTP与TFTP

一、FTP与TFTP概述 FTP,全称为File Transfer Protocol,即文件传输协议,是一种用于在Internet上进行文件传输的应用层协议。FTP是基于客户端-服务器架构设计的,并使用TCP作为其传输层协议。TFTP (Trivial File Transfer Protocol) …

java继承,接口,抽象类

目录 目录 1 继承的含义 2 继承的好处 3使类与类之间产生了关系。 看这里继承-------我的理解 代码部分 接口 代码 抽象类 代码 各位友友们大家好呀😊! 今天让我们继续回顾java,看看java中的抽象类以及接口继承是什么&#x1f914…

如何精确计算 π ?

如何精确计算 π ? 01 原本是要回顾一下第六章内容,也就是“间隔性重复”。但我已经迫不及待,想要知道如何精确计算 π ,因此,我们快走一步,来探讨一下 π 的计算。 对于 π 的计算,我从学校时…