HarmonyOS鸿蒙NEXT之各类动画实现详解

HarmonyOS鸿蒙NEXT之各类动画实现详解 动画官方链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-V5

1. 渐变动画（淡入淡出）

通过修改组件的透明度实现淡入淡出效果。

代码实现

// FadeAnimation.ets
@Component
struct FadeAnimationExample {
  @State opacityValue: number = 0.2;

  build() {
    Column() {
      Button('点击淡入/淡出')
        .opacity(this.opacityValue)
        .onClick(() => {
          animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
            this.opacityValue = this.opacityValue === 0.2 ? 1 : 0.2;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2. 位移动画（平移）

通过修改组件的位置属性实现水平移动。

代码实现

// TranslateAnimation.ets
@Component
struct TranslateAnimationExample {
  @State translateX: number = 0;

  build() {
    Column() {
      Button('向右移动')
        .translate({ x: this.translateX })
        .onClick(() => {
          animateTo({ duration: 800, curve: Curve.Spring }, () => {
            this.translateX = this.translateX === 0 ? 200 : 0;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 旋转动画

通过修改组件的旋转角度实现旋转效果。

代码实现

// RotateAnimation.ets
@Component
struct RotateAnimationExample {
  @State rotateValue: number = 0;

  build() {
    Column() {
      Image($r('app.media.icon'))
        .width(100)
        .height(100)
        .rotate({ angle: this.rotateValue })
        .onClick(() => {
          animateTo({ duration: 1200 }, () => {
            this.rotateValue += 360;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

4. 组合动画（缩放 + 颜色渐变）

同时修改多个属性实现复合动画效果。

代码实现

// CompositeAnimation.ets
@Component
struct CompositeAnimationExample {
  @State scaleValue: number = 1;
  @State colorValue: Color = Color.Blue;

  build() {
    Column() {
      Text('缩放与变色')
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor(this.colorValue)
        .padding(20)
        .scale({ x: this.scaleValue, y: this.scaleValue })
        .onClick(() => {
          animateTo({ duration: 500 }, () => {
            this.scaleValue = this.scaleValue === 1 ? 1.5 : 1;
            this.colorValue = this.colorValue === Color.Blue ? Color.Red : Color.Blue;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

5. 转场动画（页面切换）

使用 transition 实现组件出现/消失的过渡效果。

代码实现

// TransitionAnimation.ets
@Component
struct TransitionAnimationExample {
  @State isShow: boolean = true;

  build() {
    Column() {
      if (this.isShow) {
        Text('消失动画')
          .fontSize(24)
          .transition({ type: TransitionType.Insert, opacity: 0, translate: { x: 100 } })
      }

      Button(this.isShow ? '隐藏' : '显示')
        .onClick(() => {
          animateTo({ duration: 600 }, () => {
            this.isShow = !this.isShow;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

以上是一些动画小案例，希望可以在项目中有用到，增加一些动感，谢谢！