学习鸿蒙，我学到的东西与浅显理解（2-3、动画、转场）

动画

属性动画

@Entry
@Component
struct Index {
  @State currentStyleIndex: number = 0

  @Builder
  StyleTitle(text: string, index: number) {
    Text(text)
      .fontSize(22)
      .position({ x: 10, y: 10 })
      .margin(50)
      .scale({ x: this.currentStyleIndex === index ? 1 : 0 })
      .opacity(this.currentStyleIndex === index ? 1 : 0)
      .animation({
        duration: 500,
        curve: Curve.EaseOut
      })
  }

  build() {
    Column() {

      this.StyleTitle('111111', 0)
      this.StyleTitle('222222', 1)
      this.StyleTitle('333333', 2)

      Button('+1').onClick(() => {
        this.currentStyleIndex = (this.currentStyleIndex + 1) % 3
      })
    }
  }
}

加载 gif 图片

@Component
struct MineHeader {
  build() {
    Row() {
      Blank()
      Image($r('app.media.ic_topic'))
        .width($r('app.float.topic_image_size'))
        .aspectRatio(1)
        .margin({ right: $r('app.float.topic_margin_right') })
        .onClick(() => {
          router.pushNamedRoute({ name: 'ThemeSettingPage' });
        })
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(VerticalAlign.Center)
    .margin({ top: AppStorage.get<number>('statusBarHeight') })
    .height($r('app.float.header_height'))
    .width(CommonConstants.FULL_PERCENT)
  }
}

加载 Lottie 库

@Builder
playLottieBuilder() {
  Column() {
    Column() {
      Canvas(this.mainCanvasRenderingContext)
        .height(Constants.PERCENT_50)
        .width(Constants.PERCENT_80)
        .backgroundColor($r('app.color.achieve_background_color'))
        .onReady(() => {
          if (this.clickedItem != null) {
            LottieUtil.loadAnimation({
              container: this.mainCanvasRenderingContext,
              renderer: 'canvas',
              loop: false,
              autoplay: true,
              name: this.clickedItem.pathId,
              path: this.clickedItem.lottiePath
            })
          }
        })
        .onClick(() => {
          this.isShow = false;
        })
    }

    Column() {
      Button($r('app.string.achieves_button'))
        .onClick(() => {
          this.isShow = false;
        })
    }
  }
  .justifyContent(FlexAlign.Center)
  .backgroundColor($r('app.color.achieve_background_color'))
  .width(CommonConstants.FULL_PERCENT)
  .height(CommonConstants.FULL_PERCENT)
}

转场

没有实际代码，详情 请参考

系列文章

• 学习鸿蒙，我学到的东西与浅显理解（目录）

参考资料

• <HarmonyOS第一课>合理使用动画和转场

写在最后

• 不是教程，只是学习记录
• 包含了一些自己的理解，一边学一边写的，难免有不对的地方
• 写出来希望能与大家探讨，看到有错误的地方，望大家指正~