写点什么

HarmonyOS:动画 motionPath 、 animateToImmediately API 自学指南

作者:李游Leo
  • 2025-03-27
    北京
  • 本文字数:2717 字

    阅读完需:约 9 分钟

HarmonyOS:动画 motionPath 、 animateToImmediately API自学指南

在日常的鸿蒙应用开发工作中,我常常遇到需要为应用添加灵动、流畅动画效果的场景,从一个按钮的简单位移,到复杂组件的渐变展示,动画已然成为提升用户体验不可或缺的部分。然而,初涉鸿蒙开发的动画领域时,面对众多的 API 和繁杂的参数设置,我深感迷茫与困惑。为了帮助像曾经的我一样在这方面苦苦摸索的开发者,也为了自己能更好地梳理知识体系,便有了这篇技术博客。


今天,我想重点分享两个在鸿蒙开发中非常实用的动画相关 API:​​motionPath​​​ 和 ​​animateToImmediately​​。这两个 API 涵盖了从基础的位移动画路径设定,到进阶的显式动画立即下发功能,掌握它们,能让你的应用瞬间 “活” 起来。

一、​​motionPath​​ API 详解

从 API Version 7 开始支持,它允许我们精细地控制组件的运动路径,为用户带来别具一格的视觉体验。

1. 基本语法

​motionPath(value: MotionPathOptions)​​​,这里的 ​​value​​ 是关键,它承载了所有关于运动路径的设置信息。

2. 参数剖析

  • ​value​​​:必填项,类型为 ​​MotionPathOptions​​,它就像是一个装满动画路径秘密的宝箱。


  • ​MotionPathOptions​​ 自身又包含多个重要参数:


  • ​path​​​:字符串类型,必填。这是定义组件运动轨迹的核心,使用 svg 路径字符串来描绘。例如 ​​'Mstart.x start.y L50 50 Lend.x end.y Z'​​​,这里巧妙地用 ​​start​​​ 和 ​​end​​ 替代了起点和终点坐标,让路径设定更灵活,参考绘制路径文档能解锁更多玩法。当设置为空字符串时,相当于关闭路径动画,组件就会乖乖待在原地啦。

  • ​from​​​:数字类型,非必填,默认值是 ​​0.0​​​,取值范围在 ​​[0, 1]​​​。它指定了运动路径的起点位置比例,若输入小于 0 或大于 1 的值,系统会智能地将其按默认值 ​​0​​ 处理。

  • ​to​​​:数字类型,非必填,默认值 ​​1.0​​​,取值范围同样是 ​​[0, 1]​​​。它代表运动路径的终点位置比例,要注意设置时需满足 ​​to​​​ 值 >= 异常值处理后的 ​​from​​ 值,否则可能得不到预期效果。

  • ​rotatable​​​:布尔类型,非必填,默认值为 ​​false​​​。当设为 ​​true​​ 时,组件会如同灵动的舞者,跟随路径旋转,增添动态美感。

3. 示例代码解读

以下是一个生动的示例,展示如何让按钮组件沿着设定好的路径欢快 “奔跑”:


// xxx.ets@Entry@Componentstruct MotionPathExample {  @State toggle: boolean = true
build() { Column() { Button('click me').margin(50) // 执行动画:从起点移动到(300,200),再到(300,500),再到终点 .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) .onClick(() => { animateTo({ duration: 4000, curve: Curve.Linear }, () => { this.toggle =!this.toggle // 通过this.toggle变化组件的位置 }) }) }.width('100%').height('100%').alignItems(this.toggle? HorizontalAlign.Start : HorizontalAlign.Center) }}
复制代码



在这段代码中,我们创建了一个按钮,点击它后,按钮会沿着 ​​'Mstart.x start.y L300 200 L300 500 Lend.x end.y'​​​ 的路径移动,从起点(默认 ​​0.0​​​ 比例处)稳步迈向终点(默认 ​​1.0​​​ 比例处),并且在移动过程中欢快旋转(因为 ​​rotatable​​​ 设为 ​​true​​​),同时借助 ​​animateTo​​ 控制动画时长为 4000 毫秒,曲线为线性,让整个动画流畅自然。


另外,从 API version 11 开始,该接口支持在元服务中使用,这无疑为元服务开发中的动画需求打开了新大门,让元服务界面也能拥有炫酷动感。

二、​​animateToImmediately​​ API 深度探索

从 API Version 12 开始闪亮登场,它为我们提供了显式动画立即下发的超能力。

1. 语法结构

​animateToImmediately(value: AnimateParam, event: () => void): void​​,简洁的外表下蕴含强大功能。

2. 参数洞察

  • ​value​​​:必填,类型 ​​AnimateParam​​,负责调配动画效果的各种参数,如延迟时间、持续时长等,是动画节奏的指挥官。

  • ​event​​:必填,是一个返回值为空的函数类型,也就是闭包函数。在这个闭包函数里,组件状态的任何改变都会被系统敏锐捕捉,并自动插入过渡动画,让变化丝滑顺畅。

3. 示例实战

看看下面这段代码如何巧用该 API 实现复杂的动画序列:


// xxx.ets@Entry@Componentstruct AnimateToImmediatelyExample {  @State widthSize: number = 250  @State heightSize: number = 100  @State opacitySize: number = 0  private flag: boolean = true
build() { Column() { Column() .width(this.widthSize) .height(this.heightSize) .backgroundColor(Color.Orange) .opacity(this.opacitySize) Button('change size') .margin(30) .onClick(() => { if (this.flag) { animateToImmediately({ delay: 0, duration: 1000 }, () => { this.opacitySize = 1 }) animateTo({ delay: 1000, duration: 1000 }, () => { this.widthSize = 150 this.heightSize = 60 }) } else { animateToImmediately({ delay: 0, duration: 1000 }, () => { this.widthSize = 250 this.heightSize = 100 }) animateTo({ delay: 1000, duration: 1000 }, () => { this.opacitySize = 0 }) } this.flag =!this.flag }) }.width('100%').margin({ top: 5 }) }}
复制代码



这里,点击按钮后,根据 ​​flag​​​ 的状态,首先利用 ​​animateToImmediately​​​ 立即触发透明度变化动画,让组件瞬间显现(设置延迟为 0,持续 1000 毫秒使透明度变为 1),随后通过 ​​animateTo​​​ 按顺序调整组件的宽度和高度,实现一套连贯又富有层次感的动画组合。而且,从 API version 12 起,它也在元服务中有了用武之地,配合元服务的系统能力 ​​SystemCapability.ArkUI.ArkUI.Full​​,为元服务的交互添彩。


最后如果这篇文章对你有帮助,希望您能关注,点赞,加收藏哦~~~~

发布于: 刚刚阅读数: 3
用户头像

李游Leo

关注

全栈开发工程师、全栈讲师、华为HDE 2022-07-14 加入

原百度、时趣互动、乐视高级前端(软件)开发工程师。后在北京一所当地大学任教,主要职务是教学主任,也为网易云课堂微专业的前端课程负责人。

评论

发布
暂无评论
HarmonyOS:动画 motionPath 、 animateToImmediately API自学指南_HarmonyOS_李游Leo_InfoQ写作社区