HarmonyNext动画大全02-显式动画

HarmonyOS NEXT显式动画详解

1. 核心接口

显式动画通过animateTo接口实现，主要特点包括：

• 触发方式：需主动调用接口触发动画

• 参数配置

  ：

  animateTo({
    duration: 1000,  // 动画时长(ms)
    curve: Curve.Ease, // 动画曲线
    delay: 200,     // 延迟时间
    iterations: 3,  // 播放次数
    playMode: PlayMode.Normal // 播放模式
  }, () => {
    // 状态变化代码
  })
  

• 支持能力：从API version 7开始支持，API 11起支持元服务

2. 动画曲线类型

文档中详细列出了12种动画曲线：

曲线类型	效果描述
Linear	匀速运动
Ease	缓入缓出
EaseIn	加速启动
EaseOut	减速停止
Spring	弹性效果
...	...

3. 典型应用场景

1. 组件状态变化：

   animateTo({duration: 500}, () => {
     this.widthSize = 150;
     this.heightSize = 60;
   })
   

2. 转场动画：

   • 页面跳转时添加位移/透明度动画
   • 组件出现/消失时的渐变效果

3. 手势交互反馈：

   .onTouch((event) => {
     animateTo({duration: 100}, () => {
       this.scaleValue = event.type === TouchType.Down ? 0.9 : 1
     })
   })
   

4. 性能优化建议

1. 合并动画：

   // 推荐：合并相同参数的动画
   animateTo(param, () => {
     this.prop1 = newVal;
     this.prop2 = newVal;
   })
   
   // 避免：分开执行多个animateTo
   

2. 帧率控制：

   animateTo({
     expectedFrameRateRange: {
       min: 30,
       max: 60,
       expected: 45
     }
   }, () => {...})
   

3. 注意事项：

   • 避免在aboutToAppear/aboutToDisappear中使用
   • 复杂动画建议使用关键帧动画替代
   • 卡片中动画时长不得超过1000ms

5. 特殊能力

1. 立即执行模式：

   animateToImmediately({...}, () => {...})
   

   • 跳过VSync等待直接执行
   • 适用于需要即时反馈的场景

2. UI上下文绑定：

   this.getUIContext()?.animateTo({...}, () => {...})
   

   • 解决多实例场景下的上下文问题

6. 完整示例

@Entry
@Component
struct AnimationExample {
  @State rotateAngle: number = 0;
  
  build() {
    Column() {
      Button('旋转')
        .rotate({ angle: this.rotateAngle })
        .onClick(() => {
          animateTo({
            duration: 1000,
            curve: Curve.Spring
          }, () => {
            this.rotateAngle = 90;
          })
        })
    }
  }
}

该文档内容显示，HarmonyOS NEXT的显式动画系统提供了丰富的参数配置和优化手段，开发者可以通过合理使用这些接口实现流畅的UI动效，同时保证性能表现。