关键帧动画简易使用

一、概述

在 HarmonyOS 中，通过 UIContext 提供的 keyframeAnimateTo 接口可以指定若干个关键帧状态，从而实现分段的动画效果。该接口从 API Version 11 开始支持，在元服务中从 API version 12 开始支持使用，系统能力要求为 SystemCapability.ArkUI.ArkUI.Full。

二、使用步骤

（一）获取 UIContext 实例

在组件的生命周期函数（如 aboutToAppear）中获取 UIContext 实例对象，例如：

uiContext: UIContext | undefined = undefined;
aboutToAppear() {
    this.uiContext = this.getUIContext?.();
}

（二）设置关键帧动画

1. 创建关键帧状态数组

   • 每个关键帧状态由 KeyframeState 对象表示，包含 duration（关键帧动画持续时间，单位毫秒，必填且取值范围 [0, +∞)，小于 0 按 0 处理，浮点型向下取整）、curve（动画曲线，默认 Curve.EaseInOut，不支持 springMotion、responsiveSpringMotion、interpolatingSpring 曲线）和 event（在该关键帧时刻要达到的状态闭包函数）。
   • 示例：

[
    {
      // 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
      duration: 800,
      event: () => {
        this.myScale = 1.5;
      }
    },
    {
      // 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
      duration: 500,
      event: () => {
        this.myScale = 1;
      }
    }
]

1. 设置关键帧动画整体参数并调用接口

   • KeyframeAnimateParam 对象包含 delay（动画整体延时时间，单位毫秒，默认 0，delay>=0 为延迟播放，delay<0 表示提前播放且有特殊处理规则）、iterations（动画播放次数，默认 1，-1 表示无限次播放，0 表示无动画效果，取值范围 [-1, +∞)）和 onFinish（动画播放完成回调函数）。
   • 示例：

this.uiContext.keyframeAnimateTo({ iterations: 3 }, keyframesArray);

三、注意事项

1. 布局类改变宽高的动画，内容默认直接到终点状态，若要内容跟随宽高变化，可使用 renderFit 属性配置。
2. 在设置关键帧动画参数时，需注意参数的取值范围和默认值，确保动画效果符合预期。