鸿蒙动画

34 阅读1分钟

属性动画: animation 属性,关注width、height、backgroundColor、opacity、scale、rotate、translate等 opacity 透明度 scale 设置组件缩放。 rotate 设置组件旋转。translate 设置组件平移。

显式动画:animationTo

组件转场动画: transition ,显式调用animationTo

上下跳动动画:

Image($r('app.media.card_rocket'))
  .width(30)
  .height(30)
  .translate({ x: 0, y: this.translateY })
  .animation({
    duration: 1000,
    curve: Curve.EaseInOut,
    iterations: -1, // 无限循环
    playMode: PlayMode.Alternate
  })
  .onAppear(() => {
    // 直接在这里触发动画
    setTimeout(() => {
      this.translateY = -20;
    }, 100);
  })