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动效，同时保证性能表现。