一、前言
流畅动画是提升App交互质感的关键，弹窗弹出、按钮点击反馈、页面切换、列表加载动效、图片轮播都离不开动画。鸿蒙ArkTS提供四类原生动画能力，但很多开发者使用时频繁踩坑：动画卡顿、多次触发叠加、页面销毁动画未停止造成内存泄漏、动效代码重复难以复用。
本文全覆盖鸿蒙四大动画体系：内置过渡动画、animateTo属性动画、帧动画、路由转场动画，从基础用法、实战案例、商用封装、性能避坑全方位讲解，所有代码开箱即用，适配API10+商用项目。
二、鸿蒙四大动画体系对比
先搞懂选型，告别乱用动画导致的性能问题。
动画类型 | 核心能力 | 性能 | 适用场景 |
|---|
内置过渡动画 | 组件属性自动过渡 | 极高，系统原生优化 | 显隐、尺寸、颜色、透明度渐变 |
animateTo 属性动画 | 代码手动驱动动画，自由度高 | 高 | 点击动效、弹窗缩放、位移、旋转、组合动效 |
帧动画（ImageAnimator） | 多张图片逐帧播放 | 一般，依赖图片资源 | 加载动画、礼物动效、表情包、动态图标 |
页面转场动画 | 路由页面切换过渡 | 极高 | 页面跳转、返回、模态弹窗过渡 |
三、最简单好用：内置过渡动画
鸿蒙所有组件自带.transition() 过渡属性，属性变化自动补帧动画，无需手动写动画逻辑，是性价比最高的动效方案。
3.1 显隐渐变+缩放动画实战
@Entry@Componentstruct TransitionDemo { @State show: boolean = false build() { Column({ space: 30 }) { Button('显示/隐藏弹窗') .onClick(() => { this.show = !this.show }) if (this.show) { Text('过渡动画弹窗') .width(200) .height(100) .backgroundColor('#007DFF') .fontColor(Color.White) .textAlign(TextAlign.Center) // 透明度 + 缩放过渡 .transition({ opacity: 0, scale: { x: 0.8, y: 0.8 } }) } } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
原理：组件插入/销毁时，自动从设置的初始值过渡到默认状态，系统自动补帧，性能零损耗。
四、核心重点：animateTo 属性动画
animateTo 是项目中使用最多的动画API，支持手动控制动画时长、曲线、延迟、循环，可实现任意组合复杂动效。
4.1 基础语法规则
animateTo(动画参数, 状态变更回调)：通过修改State变量，驱动组件属性渐变。
4.2 按钮点击缩放动效（商用高频）
@Entry@Componentstruct AnimateToDemo { @State scaleSize: number = 1 build() { Column() { Text('点击缩放动效') .scale({ x: this.scaleSize, y: this.scaleSize }) .width(200) .height(80) .backgroundColor('#1677ff') .fontColor(Color.White) .textAlign(TextAlign.Center) .onClick(() => { animateTo({ duration: 150, // 动画时长 curve: Curve.Ease,// 动画曲线 playMode: PlayMode.Normal }, () => { this.scaleSize = 0.9 }) // 回弹 animateTo({ duration: 150 }, () => { this.scaleSize = 1 }) }) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
4.3 常用动画参数说明
五、帧动画 ImageAnimator 实战
帧动画用于多张图片逐帧播放，适合加载、动画表情、动态图标场景。
@Entry@Componentstruct FrameAnimDemo { // 图片资源数组 private frameImages: Resource[] = [ $r('app.media.frame1'), $r('app.media.frame2'), $r('app.media.frame3') ] build() { Column() { ImageAnimator() .images(this.frameImages) .duration(600) // 总时长 .iterations(-1) // 无限循环 .fixedSize(true) .width(100) .height(100) .start() } }}
避坑：页面销毁必须停止动画，防止内存泄漏。
六、页面路由转场动画
默认页面跳转生硬，鸿蒙支持自定义页面入场、出场过渡动画，极大提升页面切换质感。
在路由跳转时配置动画参数，支持平移、透明度、缩放过渡。
// 页面跳转带动画router.pushUrl({ url: 'pages/TargetPage'}, RouterMode.Standard, { transition: TransitionType.SLIDE_RIGHT})
系统内置：左右滑动、上下弹出、渐变缩放等多种转场样式，开箱即用。
七、商用级通用动画工具类封装
避免页面重复写动画代码，全局封装常用动效，统一参数、统一规范。
