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

文章目录运动路径动画核心1. 组件作用2. 核心适用场景3. 官方标准参数示例代码解析1 状态变量定义2 运动路径动画核心配置对应功能解析3 动画触发逻辑对应功能4 布局控制运行效果完整代码总结运动路径动画核心1. 组件作用motionPath是 ArkUI 提供的运动路径动画属性用于让组件沿着预设的 SVG 路径规则移动支持起点/终点自动绑定、路径插值、自动旋转朝向等能力。2. 核心适用场景按钮/图片沿曲线/直线移动引导动画、轨迹动画配合animateTo实现可控运动过渡支持自动旋转、路径起点终点自适应3. 官方标准参数参数含义path运动路径支持 SVG 路径语法M起点L直线end终点from动画起始位置0~1to动画结束位置0~1rotatable沿路径移动时是否自动旋转朝向示例代码解析1 状态变量定义Statetoggle:booleantrue;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.etsEntryComponentstruct MotionPathExample{Statetoggle:booleantrue;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)}}运行效果如图总结motionPath 必须配合状态变化使用仅通过属性无法自动播放需要状态变量驱动位置更新。path 支持 SVG 标准路径指令M起点、L连线、C曲线、Q二次曲线等均可使用。rotatable: true 实现自动朝向是运动路径动画的核心特性之一。animateTo 控制动画速度与曲线与 motionPath 组合是官方推荐用法。路径中 start / end 关键字自动绑定组件的初始位置与最终位置无需写死坐标。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力