OpenHarmony动画有哪些常用组件

OpenHarmony常用动画能力与组件

一 属性动画与显式动画

• 属性动画：对组件的通用属性变化添加过渡效果，常用属性包括width、height、backgroundColor、opacity、scale、rotate、translate等，适合大多数 UI 状态变化场景。
• 显式动画接口：通过全局 animateTo 将一段状态变更“包裹”为动画，统一配置时长、曲线、延时、次数、播放模式等参数；组件内也可通过 animation 属性为指定属性绑定动画参数，二者常配合使用。
• 典型用途：按钮交互反馈、数值变化过渡、布局形变等。

二 组件内置动画组件

• ImageAnimator：用于实现逐帧帧动画，可配置图片帧列表、每帧时长、播放顺序、循环次数、填充模式等；支持事件如onStart、onPause、onRepeat、onCancel、onFinish，便于控制播放流程与交互联动。
• Lottie（@ohos/lottieETS）：用于渲染 Lottie 动画（基于 JSON 的矢量动画），通过 lottie.loadAnimation 加载并控制播放，适合复杂动效与品牌一致性的可视化呈现。

三 转场与路径动画

• 页面间转场：通过 pageTransition 配置页面入场/退场的自定义转场动效，统一把控页面切换体验。
• 组件内转场：通过 transition 属性为容器子组件的插入/删除配置过渡，通常需要与 animateTo 配合使用以驱动动效参数。
• 共享元素转场：在页面跳转时，为关键元素设置共享元素的转场动效，提升页面间元素关联感知。
• 路径动画：为组件位移指定运动路径，实现沿路径的运动效果。

四 Canvas与像素级动画

• Canvas 搭配 ImageBitmap / ImageData 可实现像素级绘制与图像处理，适合实现自定义绘制动效、粒子系统、图像滤镜等高性能渲染场景。
• ImageBitmap：承载 canvas 渲染的像素数据，支持从指定路径创建位图，并提供 width/height 等属性与资源释放能力。
• ImageData：存储矩形区域的像素数据（width、height、data），可用于读取与写入像素，实现如图像合成、局部更新等动效。

五 实战选型建议

• 简单属性过渡（颜色、尺寸、透明度、位移）：优先使用 animateTo + animation 属性。
• 复杂矢量动效与品牌一致性：使用 Lottie。
• 序列帧动画（图标、加载动效）：使用 ImageAnimator。
• 自定义绘制/高性能渲染（粒子、滤镜、路径特效）：使用 Canvas + ImageBitmap/ImageData。