鸿蒙进阶篇-属性动画-animateTo转场动画

大家好啊,这里是鸿蒙开天组,今天我们来学习属性动画-animateTo&转场动画,咱们先来学习属性动画-animateTo

属性动画-animateTo

属性动画 animation是作为属性使用,而animateTo显示动画是一个系统的内置函数,可以直接调用。功能上和 animation一致,适合于给多个元素应用同一套动画的场景

核心用法

和 animation 的核心用法步骤类似,第三步的语法需要调整

  1. 声明相关状态变量
  2. 将状态变量设置到相关可动画属性接口
  3. 通过属性动画接口开启属性动画(在属性动画上面的属性会应用动画)
  4. 通过状态变量改变UI界面
// 参数 1 动画选项 和 animation 相同
// 参数 2 箭头函数,状态变量的修改写在里面
animateTo({}, () => {// 第 4 步写到这里
})

来试一下

  1. 基于基础模版给页面中的尺寸添加旋转动画
  2. 思考如果用 animation 需要如何编码?

这里给出基础模板

@Entry
@Component
struct Page06_animateTo {// 1. 声明相关状态变量@State rotateAngle: number = 0build() {Column() {// 4个齿轮Flex({ wrap: FlexWrap.Wrap }) {Image($r('app.media.ic_gear1')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear2')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear3')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear4')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })}Button('点击旋转齿轮').onClick(() => {})}.width('100%').height('100%').backgroundColor(Color.Orange)}
}

tips:

绝大多数情况下 animation 和 animateTo可以互相替代,当多个元素应用同一个动画时,用 animateTo 会更为适合

来揭晓参考答案吧~

@Entry
@Component
struct Page06_animateTo {// 1. 声明相关状态变量@State rotateAngle: number = 0build() {Column() {// 4个齿轮Flex({ wrap: FlexWrap.Wrap }) {Image($r('app.media.ic_gear1')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear2')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear3')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })Image($r('app.media.ic_gear4')).width(150)// 2. 将状态变量设置到相关可动画属性接口.rotate({ angle: this.rotateAngle })}Button('点击旋转齿轮').onClick(() => {// 3. 通过属性动画接口开启属性动画(在属性动画上面的属性会应用动画)animateTo({ iterations: -1, curve: Curve.Linear }, () => {// 4. 通过状态变量改变UI界面this.rotateAngle = 360})})}.width('100%').height('100%').backgroundColor(Color.Orange)}
}

案例-折扣信息

还是之前的那个折扣信息案例,咱们通过 animateTo 来实现一次,来看看是否可以用 animateTo 一样的效果

需求:

  1. 将原模版中的 animation 替换为 animateTo

核心步骤:

  1. 将 animation 设置的动画属性,通过 animateTo 设置
  2. 调整状态变量的代码写到 animateTo 的回调函数中即可

基础代码前面的文章中已经给出,这里直接提供实现后的代码

@Entry
@Component
struct Page07_animateToDemo {// 1. 声明相关状态变量@State scaleX: number = 1@State scaleY: number = 1build() {Column({ space: 50 }) {Text('全场低至一分购').fontSize(30).fontWeight(900).fontColor(Color.Red).backgroundColor('#e8b66d').padding(10).borderRadius(20)// 2.将状态变量设置到相关可动画属性接口.scale({x: this.scaleX,y: this.scaleY}).onAppear(() => {// 3. 通过属性动画接口开启属性动画animateTo({duration: 1000,curve: Curve.EaseInOut,playMode: PlayMode.Alternate,iterations: -1}, () => {// 4.通过状态变量改变UI界面this.scaleX = 1.3this.scaleY = 1.3})})}.width('100%').height('100%').padding(20)}@StylesfullSize() {.width('100%').height('100%')}
}

转场动画

转场动画是指对将要出现或消失的组件做动画,对始终出现的组件做动画应使用属性动画。

转场动画主要有如下分类:

  1. 出现/消失转场
  2. 导航转场(和路由相关-路由阶段讲解)
  3. 模态转场(全模态、半模态弹框,还有一些其他的弹出菜单-链接)
  4. 共享元素转场(和路由相关-路由阶段讲解)

出现消失转场-核心用法

比如点击关闭广告,添加或者删除元素。核心就是元素需要出现或者消失,都可以使用转场动画来添加过渡效果

核心步骤:

  1. 创建TransitionEffect
  2. 将转场效果通过transition接口设置到组件
  3. 新增或者删除组件触发转场
@State isPresent: boolean = true;
...
if (this.isPresent) {Text('test').transition(effect)
}
...
// 控制新增或者删除组件
// 方式一:将控制变量放到animateTo闭包内,未通过animation接口定义动画参数的TransitionEffect将跟随animateTo的动画参数
animateTo({ curve: curves.springMotion() }, () => {this.isPresent = false;
})// 方式二:直接控制删除或者新增组件,动画参数由TransitionEffect的animation接口配置
this.isPresent = false;

出现消失转场-转场效果

转场效果可以通过下列语法随意进行设置,支持通过点语法链式调用

// 设置多个效果 出现和消失均有转场
effect: object = TransitionEffect.OPACITY.animation({}).combine(TransitionEffect.scale({ x: 0, y: 0 }))// 组合 缩放效果.combine(TransitionEffect.rotate({ angle: 90 })) // 组合 旋转效果.combine(TransitionEffect.move(TransitionEdge.END)) // 组合 移动效果// 出现没有转场
// 消失透明度转场
effect2: object = TransitionEffect.asymmetric(TransitionEffect.IDENTITY, // 出现转场TransitionEffect.OPACITY.animation({ // 消失转场duration: 300}))

静态方法:

接口名称

参数类型

是否静态函数

参数描述

opacity

number

设置组件转场时的透明度效果,为插入时起点和删除时终点的值。
取值范围: [0, 1]

translate

TranslateOptions

设置组件转场时的平移效果,为插入时起点和删除时终点的值。

scale

ScaleOptions

设置组件转场时的缩放效果,为插入时起点和删除时终点的值。

rotate

RotateOptions

设置组件转场时的旋转效果,为插入时起点和删除时终点的值。

move

TransitionEdge

指定组件转场时从屏幕边缘滑入和滑出的效果,本质为平移效果,为插入时起点和删除时终点的值。
从API version 10开始,该接口支持在ArkTS卡片中使用。

asymmetric

appear: TransitionEffect

,
disappear: TransitionEffect

指定非对称的转场效果。
第一个参数指定出现的转场效果,第二个参数指定消失的转场效果。
如不通过asymmetric函数构造TransitionEffect,则表明该效果在组件出现和消失时均生效。

combine

TransitionEffect

对TransitionEffect进行链式组合,以形成包含多种转场效果的TransitionEffect。

animation

AnimateParam

指定该TransitionEffect的动画参数。
该参数只用来指定动画参数,其入参AnimateParam的onFinish回调不生效。

静态成员:

静态成员名称

参数描述

IDENTITY

禁用转场效果。

OPACITY

指定透明度为0的转场效果。即相当于TransitionEffect.opacity(0)

SLIDE

指定出现时从左侧滑入、消失时从右侧滑出的转场效果。即相当于TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START), TransitionEffect.move(TransitionEdge.END))

SLIDE_SWITCH

指定出现时从右先缩小再放大侧滑入、消失时从左侧先缩小再放大滑出的转场效果。动画时长600ms,指定动画曲线曲线cubicBezierCurve(0.24f, 0.0f, 0.50f, 1.0f),最小缩放比例为0.8。

如果要组合多个动画效果,可以用如下的方式进行设置,之所以可以一路点下去,是因为这些设置动画的语法,设置之后返回的都是 TransitionEffect,所以继续链式调用

参考代码

@Entry
@Component
struct Page09_transitionEffect {@State isShow: boolean = false//  1. 定义转场效果effect: object = TransitionEffect.OPACITY.animation({}).combine(TransitionEffect.scale({ x: 0, y: 0 })).combine(TransitionEffect.rotate({ angle: 90 })).combine(TransitionEffect.move(TransitionEdge.END))build() {Column() {Button('切换元素').onClick(() => {this.isShow = !this.isShow})// 3. 新增或者删除组件触发转场if (this.isShow) {Text('我是文本框').fontSize(50).fontWeight(FontWeight.Bold)// 2. 添加转场效果.transition(this.effect)}// 我是底部的元素(// 元素是瞬间消失或出现的,所以这个输入框会瞬间上去或下去// 因为通过动画的方式让这一过程更为平滑,所以会出现 Text 上去了,但是消失、出现的动画还在播放// 如果要视觉效果更为美观,可以通过布局的方式让元素的出现或消失不影响布局Text('底部的文本框').fontSize(40)}.width('100%').height('100%')}
}

最后再给大家扩展一个帧动画

ImageAnimator 帧动画组件

供逐帧播放图片的能力,可以方便的控制播放状态:播放,暂停,停止..

核心用法:

ImageAnimator不是容器组件,也不需要传递参数,只需要设置属性即可

ImageAnimator().属性()

用例

@Entry
@Component
struct Page12_ImageAnimator {// 需要动画的图片// 两套动画素材// ic_animator_coin1(1-6 硬币)// ic_animator_dog1(1-4 狗狗)images: ImageFrameInfo[] = [{ src: $r('app.media.ic_animator_dog1') },{ src: $r('app.media.ic_animator_dog2') },{ src: $r('app.media.ic_animator_dog3') },{ src: $r('app.media.ic_animator_dog4') },]// 需要控制动画状态 定义状态变量 默认状态@State aniStatus: AnimationStatus = AnimationStatus.Initialbuild() {Column({ space: 10 }) {// 动画组件ImageAnimator().animatorFancy().iterations(-1)// 动画次数.duration(400)// 持续时间.height(150).images(this.images)// 动画图片.state(this.aniStatus) // 动画抓个状态// 按钮控制区域Row({ space: 20 }) {Button('启动').onClick(() => {this.aniStatus = AnimationStatus.Running // 播放})Button('暂停').onClick(() => {this.aniStatus = AnimationStatus.Paused // 暂停:停在触发的瞬间})Button('停止').onClick(() => {this.aniStatus = AnimationStatus.Stopped // 停止:直接到最后一张图})}}.width('100%').height('100%').padding(10)}// 抽取的通用属性@StylesanimatorFancy() {.width(300).backgroundColor(Color.Gray).padding(10).borderRadius(10)}
}

参数名称

参数类型

参数描述

images

Array<ImageFrameInfo>

设置图片帧信息集合。
说明:
不支持动态更新。

state

AnimationStatus

默认为初始状态,用于控制播放状态。

duration

number

单位为毫秒,默认时长为1000ms;duration为0时,不播放图片;值的改变只会在下一次循环开始时生效;当images中任意一帧图片设置了单独的duration后,该属性设置无效。
默认值:1000
从API version 10开始,该接口支持在ArkTS卡片中使用。

iterations

number

默认播放一次,设置为-1时表示无限次播放。
默认值:1

。。。。

好啦,今天的内容就到这里了,这里是鸿蒙开天组~喜欢的话可以点点收藏!感谢大家~

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

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

相关文章

[CKS] K8S ServiceAccount Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于Rolebinding的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] K8S Netwo…

Autosar CP DDS规范导读

Autosar CP DDS 主要用途 数据通信 中间件协议&#xff1a;作为一种中间件协议&#xff0c;DDS实现了应用程序之间的高效数据通信&#xff0c;能够在不同的软件组件和ECU之间传输数据&#xff0c;确保数据的实时性和可靠性。跨平台通信&#xff1a;支持在AUTOSAR CP平台上的不同…

wafw00f源码详细解析

声明 本人菜鸟一枚&#xff0c;为了完成作业&#xff0c;发现网上所有的关于wafw00f的源码解析都是这抄那那抄这的&#xff0c;没有新东西&#xff0c;所以这里给出一个详细的源码解析&#xff0c;可能有错误&#xff0c;如果有大佬发现错误&#xff0c;可以在评论区平和的指出…

字节、快手、Vidu“打野”升级,AI视频小步快跑

文&#xff5c;白 鸽 编&#xff5c;王一粟 继9月份版本更新之后&#xff0c;光锥智能从生数科技联合创始人兼CEO唐家渝朋友圈获悉&#xff0c;Vidu大模型将于本周再次进行版本升级&#xff0c;Vidu-1.5版本即将上线。 此版本更新方向仍是重点延伸大模型的泛化能力和主体…

LeetCode【0036】有效的数独

本文目录 1 中文题目2 求解方法&#xff1a;python内置函数set2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 请根据以下规则判断一个 9 x 9 的数独是否有效。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线…

STM32 GPIO 配置

GPIO 八种工作模式 STM32的GPIO八种模式明解STM32—GPIO理论基础知识篇之八种工作模式stm32cubemx hal学习记录&#xff1a;GPIO输入输出[STM32G4系列] GPIO筆記 - CubeMX GPIO整理與應用 模拟量输入输出 ADC 【STM32】HAL库 STM32CubeMX教程九—ADC[通俗易懂] DAC STM32C…

Xcode 16 使用 pod 命令报错解决方案

原文请点击这个跳转 一、问题现象&#xff1a; 有人会遇到 Xcode 升级到 16 后&#xff0c;新建应用然后使用 pod init 命令会报错如下&#xff1a; Stack Ruby : ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-darwin23]RubyGems : 3.5.22Host : macOS 15.0 (24A335…

使用 Flask 和 ONLYOFFICE 实现文档在线编辑功能

提示&#xff1a;CSDN 博主测评ONLYOFFICE 文章目录 引言技术栈环境准备安装 ONLYOFFICE 文档服务器获取 API 密钥安装 Flask 和 Requests 创建 Flask 应用项目结构编写 app.py创建模板 templates/index.html 运行应用功能详解文档上传生成编辑器 URL显示编辑器回调处理 安全性…

机器学习——损失函数、代价函数、KL散度

&#x1f33a;历史文章列表&#x1f33a; 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…

vxe-table 3.10+ 进阶高级用法(一),根据业务需求自定义实现筛选功能

vxe-table 是vue中非常强大的表格的&#xff0c;公司项目中复杂的渲染都是用 vxe-table 的&#xff0c;对于用的排序。筛选之类的都能支持&#xff0c;而且也能任意扩展&#xff0c;非常强大。 默认筛选功能 筛选的普通用法就是给对应的列指定参数&#xff1a; filters&#…

推荐一款好用的postman替代工具2024

Apifox 是国内团队自主研发的 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;是非常好的一款 postman 替代工具。 它通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好接口文档&#xff0c;接口调试、数据 Mock、接口…

MTSET可溶于DMSO、DMF、THF等有机溶剂,并在水中有轻微的溶解性,91774-25-3

一、基本信息 中文名称&#xff1a;[2-(三甲基铵)乙基]甲硫基磺酸溴&#xff1b;MTSET巯基反应染料 英文名称&#xff1a;MTSET&#xff1b;[2-(Trimethylammonium)ethyl]methanethiosulfonate Bromide CAS号&#xff1a;91774-25-3 分子式&#xff1a;C6H16BrNO2S2 分子量…

如何为电子课程创造创意

为电子课程创造一个想法&#xff0c;首先要深刻理解是什么让知识对学习者既相关又吸引人。第一步是专注于可以分解为可教部分的特定技能或专业领域。通常&#xff0c;人们从他们熟悉的东西开始&#xff0c;但真正的挑战在于将这些知识转化为一种可访问且引人入胜的学习体验。这…

安全生产管理的重要性:现状、痛点与改进之路

当前&#xff0c;安全生产管理已经成为企业管理中的关键环节&#xff0c;但现实中仍然存在诸多痛点。近年来&#xff0c;随着工业化和现代化的快速推进&#xff0c;企业在追求效益的同时&#xff0c;忽视安全管理的现象屡见不鲜。据统计&#xff0c;安全事故的发生频率仍然较高…

深度学习之 LSTM

1.1 LSTM的产生原因 ​ RNN在处理长期依赖&#xff08;时间序列上距离较远的节点&#xff09;时会遇到巨大的困难&#xff0c;因为计算距离较远的节点之间的联系时会涉及雅可比矩阵的多次相乘&#xff0c;会造成梯度消失或者梯度膨胀的现象。为了解决该问题&#xff0c;研究人…

机器学习基础02_特征工程

目录 一、概念 二、API 三、DictVectorize字典列表特征提取 四、CountVectorize文本特征提取 五、TF-IDF文本1特征词的重要程度特征提取 六、无量纲化预处理 1、MinMaxScaler 归一化 2、StandardScaler 标准化 七、特征降维 1、特征选择 VarianceThreshold 底方差…

Linux第四讲:Git gdb

Linux第四讲&#xff1a;Git && gdb 1.版本控制器Git1.1理解版本控制1.2理解协作开发1.3Git的历史1.4Git的操作1.4.1仓库创建解释、仓库克隆操作1.4.2本地文件操作三板斧1.4.3文件推送详细问题 2.调试器 -- gdb/cgdb使用2.1调试的本质是什么2.2watch命令2.3set var命令…

react的创建与书写

一&#xff1a;创建项目 超全面详细一条龙教程&#xff01;从零搭建React项目全家桶&#xff08;上篇&#xff09; - 知乎 1.创建一个文件夹&#xff0c;shift鼠标右键选择在此处打开powershell 2.为了加速npm下载速度&#xff0c;先把npm设置为淘宝镜像地址。 npm config s…

黄色校正电容102j100

1. 普通电容主要用于交流回路中的信号耦合或滤波。它们通常没有极性&#xff0c;容量较小&#xff0c;通常在几百皮法拉范围内。普通电容在电路中用于信号耦合或直流电路的电源滤波&#xff0c;而电解电容一般用于直流电路&#xff0c;容量较大&#xff0c;从几微法到数千微法…

DApp开发:定制化解决方案与源码部署的一站式指南

去中心化应用&#xff08;DApp&#xff09;随着区块链技术的发展&#xff0c;成为众多行业探索与创新的重要方向。无论是金融、供应链、游戏&#xff0c;还是社交和艺术市场&#xff0c;DApp都为传统业务模式带来了全新可能。然而&#xff0c;开发一款DApp并非易事&#xff0c;…