当前位置：首页 > news >正文

HarmonyOS 6 ArkUI 运动路径动画（motionPath）使用文档

news 2026/5/9 15:03:50

文章目录

- 运动路径动画核心
- - 1. 组件作用
  - 2. 核心适用场景
  - 3. 官方标准参数
- 示例代码解析
- - 1 状态变量定义
  - 2 运动路径动画核心配置
  - - 对应功能解析：
  - 3 动画触发逻辑
  - - 对应功能：
  - 4 布局控制
- 运行效果
- 完整代码
- 总结

运动路径动画核心

1. 组件作用

motionPath是 ArkUI 提供的运动路径动画属性，用于让组件沿着预设的 SVG 路径规则移动，支持起点/终点自动绑定、路径插值、自动旋转朝向等能力。

2. 核心适用场景

按钮/图片沿曲线/直线移动
引导动画、轨迹动画
配合animateTo实现可控运动过渡
支持自动旋转、路径起点终点自适应

3. 官方标准参数

参数	含义
`path`	运动路径，支持 SVG 路径语法（M=起点，L=直线，end=终点）
`from`	动画起始位置（0~1）
`to`	动画结束位置（0~1）
`rotatable`	沿路径移动时是否自动旋转朝向

示例代码解析

1 状态变量定义

@Statetoggle:boolean=true;

toggle是运动动画的控制变量
变量改变 → 组件位置变化 → 触发motionPath动画
配合animateTo实现平滑过渡

2 运动路径动画核心配置

.motionPath({path:'Mstart.x start.y L300 200 L300 500 Lend.x end.y',from:0.0,to:1.0,rotatable:true})

对应功能解析：

path路径语法
- Mstart.x start.y：从组件当前位置开始移动
- L300 200：直线移动到坐标 (300, 200)
- L300 500：直线移动到坐标 (300, 500)
- Lend.x end.y：移动到组件最终位置
from: 0.0
动画从路径起点开始。
to: 1.0
动画执行到路径终点结束。
rotatable: true
组件移动时自动旋转朝向路径方向（官方推荐用法）。

3 动画触发逻辑

.onClick(()=>{this.getUIContext()?.animateTo({duration:4000,curve:Curve.Linear},()=>{this.toggle=!this.toggle;});})

对应功能：

点击按钮触发动画
animateTo显式动画
- duration: 4000：动画时长4秒
- curve: Curve.Linear：匀速运动
this.toggle切换
改变组件对齐方式，驱动路径动画执行。

4 布局控制

.alignItems(this.toggle?HorizontalAlign.Start:HorizontalAlign.Center)

toggle = true：组件居左（起点）
toggle = false：组件居中（终点）
位置变化由motionPath自动生成平滑运动轨迹

运行效果

点击click me按钮
按钮沿轨迹匀速移动：
起点 → (300,200) → (300,500) → 终点
移动过程中自动旋转方向
全程动画时长4000ms
再次点击可往返运动

完整代码

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