HarmonyOS-ArkUI：关键帧动画 keyFrameAnimateTo

上文讲解显式动画的过程中我们提到了显式动画有一个缺点，就是：”显式动画尽管有很多的运动曲线参数可以选择， 但是用户只能控制它开始和结束，并不能对其动画的详细细节做精准的调控。例如对于加速，只能控制先减速后加速这类趋势。但是并不能控制，在运动到20%处猛增速这种比较精微的调控。做不到。” 详见：HarmonyOS-ArkUI: animateTo 显式动画-CSDN博客

那么现在我们就来学习一个可以实现动画的精微调控的方式-关键帧动画。我们首先看看从代码结构上它是如何实现精微调控的：

keyFrameAnimateTo API详解

如图示，图中有每一个参数的解释。及构造。

使用示例

@Entry
@Component
struct KeyFrameAnimateTo1 {
  @State myScale: number = 1.0
  uiContext:UIContext | undefined = undefined
  aboutToAppear(): void {
    this.uiContext = this.getUIContext()
  }

  build() {
    Stack() {
      Circle()
        .width(100)
        .height(100)
        .fill('#46B1E3')
        .scale({x: this.myScale, y:this.myScale})
        .onClick(()=>{
          // 开启动画
          if(!this.uiContext) {
            console.info('no uiContext, keyframe failed')
            return
          }
          this.myScale = 1.0

          this.uiContext.keyframeAnimateTo({
            iterations: 3
          }, [
            {duration: 800, event:()=>{this.myScale = 1.5}, curve: Curve.EaseOut},
            {duration: 500, event:()=>{this.myScale = 1}, curve:Curve.EaseOut},
            {duration: 500, event:()=>{this.myScale = 2.0}, curve:Curve.EaseOut},
            {duration: 500, event:()=>{this.myScale = 1}, curve:Curve.EaseOut}
          ])
        })
    }
    .height('100%')
    .width('100%')
  }
}

展示效果

关键帧动画的优点与缺点

优点

多状态分段控制。以实现复杂路径的动画
复杂动画支持。适用于分段插值的场景， 如物体沿曲线运动，组合动画。支持同时控制多个属性（位移，旋转，缩放等）满足高保真动效需求
灵活的参数配置： 全局生可以控制动画延迟，循环次数。通过其第二个参数–KeygrameState数组可定义关键帧，每个关键帧可以独立设置时间点和目标状态，灵活性比较高
与显示动画互补。可以看做显示动画的加强版，既能处理简单的过度，又能实现显式动画难以完成的复杂动效。如多段路径，非匀速变化等

缺点

代码复杂度较高：需显式定义所有关键帧状态（如时间点、属性值），代码量显著增加，尤其在多属性同步变化时，维护成本较高。
性能消耗较大：若关键帧数量过多或属性变化频繁（如频繁更新布局属性），可能导致渲染压力增大，影响动画流畅度（需结合 renderFit 优化布局类动画）。
适用场景有限：对于简单动画（如单一属性过渡），使用关键帧动画会显得冗余，显式动画（animateTo）代码更简洁且性能更优。
学习成本较高：需要深入理解关键帧的时间分配（fraction）与状态插值机制，对新手开发者不够友好。