HarmonyOS 动画与过渡效果：animateTo 与 transition

适用版本HarmonyOS 6.1API 12及以上验证环境Pura 90 Pro 模拟器HarmonyOS 6.1.1API 24关键概念animateTo、transition、Curve、.animation()、TransitionType前言ArkUI 的动画系统分两类属性动画改变组件属性时平滑过渡和组件过渡组件出现/消失时的动画。本文演示两种最常用的方式animateTo()和transition修饰符。一、animateTo — 属性动画animateTo在闭包内修改状态变量ArkUI 自动在新旧值之间插值渲染帧// 点击按钮时放大方块 Button(放大) .onClick(() { animateTo( { duration: 400, curve: Curve.EaseOut }, // 动画参数 () { this.boxWidth 140 // 这里的赋值会被动画化 this.boxHeight 140 } ) }) // 组件绑定 .animation() 也可以实现同效果更简洁 Text() .width(this.boxWidth) .height(this.boxHeight) .animation({ duration: 500, curve: Curve.EaseInOut })二、animateTo 参数详解animateTo( { duration: 400, // 持续时间毫秒 curve: Curve.EaseOut, // 缓动曲线 delay: 200, // 延迟开始毫秒 iterations: 1, // 重复次数-1 无限循环 playMode: PlayMode.Normal, // Normal | Reverse | Alternate onFinish: () { /* 动画结束回调 */ } }, () { // 在此闭包内修改 State 变量 this.boxColor #e74c3c } )三、常用缓动曲线曲线效果Curve.Linear匀速无缓动Curve.Ease先慢后慢中间快Curve.EaseIn由慢到快Curve.EaseOut由快到慢Curve.EaseInOut先慢后慢对称Curve.FastOutSlowInMaterial Design 标准曲线Curve.Smooth柔和过渡四、transition — 组件出现/消失过渡配合if条件渲染组件挂载/卸载时自动播放过渡动画State showCard: boolean false Button(显示/隐藏卡片) .onClick(() { animateTo({ duration: 350, curve: Curve.EaseInOut }, () { this.showCard !this.showCard }) }) if (this.showCard) { Column() { Text(过渡卡片内容) } .transition({ type: TransitionType.Insert, // 出现时 translate: { y: -20 }, // 从上方 20px 滑入 opacity: 0 // 从透明淡入 }) .transition({ type: TransitionType.Delete, // 消失时 translate: { y: -20 }, opacity: 0 }) }五、序列动画多个 animateTo 配合 delayplaySequence(): void { // 第1步向右移动 animateTo({ duration: 400, curve: Curve.EaseOut }, () { this.translateX 100 }) // 第2步400ms 后放大 半透明 animateTo({ duration: 300, delay: 400, curve: Curve.EaseInOut }, () { this.circleRadius 60 this.opacity 0.5 }) // 第3步700ms 后弹回 animateTo({ duration: 500, delay: 700, curve: Curve.EaseOut }, () { this.translateX -60 this.circleRadius 40 this.opacity 1.0 }) // 第4步1200ms 后归位 animateTo({ duration: 400, delay: 1200, curve: Curve.EaseIn }, () { this.translateX 0 }) }六、常用可动画属性属性说明width、height尺寸变化opacity透明度backgroundColor背景色渐变rotate({ angle })旋转scale({ x, y })缩放offset({ x, y })位移相对原位置borderRadius圆角变化模拟器运行截图初始状态animateTo 选项卡属性动画执行后点击「放大」按钮后方块以 EaseOut 曲线在 400ms 内平滑放大点击「旋转」后方块旋转 90°多次点击可叠加效果。常见问题QanimateTo和.animation()有什么区别AanimateTo命令式精确控制哪次变化要动画、用什么参数适合点击事件触发的动画.animation()声明式绑定在组件上该组件的所有属性变化都走这套动画配置简单但不能逐次区分Q如何实现无限循环动画如旋转 Loading 图标A设置iterations: -1和playMode: PlayMode.AlternateanimateTo({ duration: 1000, iterations: -1, playMode: PlayMode.Alternate }, () { this.rotate this.rotate 360 })Qtransition只支持出现和消失动画能做页面切换吗Atransition适合组件级别。页面级切换动画应使用Navigation组件的navDestination 路由过渡 API或配置router.pushUrl的转场效果。上一篇Provide/Consume 跨组件通信下一篇HTTP 网络请求