鸿蒙属性动画animation、显式动画animateTo和帧动画组件ImageAnimator

第十章

属性动画animation

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

基本用法

组件
.animation({动画设置,})

常用属性

组件加载自动触发

组件挂载显示时触发是不需要进行点击事件打开是就会自动进行动画

@Entry
@Component
struct Page3 {
  @State x: number = 1
  @State y: number = 1
  @State y1: number = 10
  @State angle: number = 0

  build() {
    Column() {
      Text('全场低至一分购')
        .fontSize(30)
        .fontWeight(900)
        .fontColor(Color.Red)
        .backgroundColor('#e8b66d')
        .padding(10)
        .borderRadius(20)
        .translate({
          y: this.y1
        })
        .rotate({
          angle: this.angle
        })
        .scale({
          x: this.x,
          y: this.y,
        })
        .animation({
          duration: 2000,
          playMode: PlayMode.Alternate,
          iterations: -1,
          curve: Curve.Linear,
        })
        .onAppear(() => {
          this.x = 2
          this.y = 2
          this.y1 = 100
          this.angle = 380
        })
    }
    .padding(20)
    .height('100%')
    .width('100%')
  }
}

显式动画animateTo

基本用法

animateTo({同属性动画animation一样的属性}, () => {
  //状态变量的修改
})

@Entry
@Component
struct Index {
  @State isShow: boolean = false

  build() {
    Column() {
      SideBarContainer(SideBarContainerType.Overlay) {
        Column() {
          Row() {
            Button('X')
              .fontColor(Color.Black)
              .fontSize(20)
              .backgroundColor(Color.White)
              //显式动画animateTo
>              .onClick(() => {
>                 animateTo({ duration: 1000 }, () => {
>                   this.isShow = false
>                 })
>               })
          }
          .justifyContent(FlexAlign.End)
          .padding(5)
          .width('100%')
        }
        .backgroundColor(Color.Green)

        Column() {

        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Pink)
      }
      .controlButton({})
      .showSideBar($$this.isShow)
      .showControlButton(!this.isShow)
      .sideBarPosition(SideBarPosition.End)
      .autoHide(true)
      .minSideBarWidth(200)
      .sideBarWidth(250)
      .maxSideBarWidth(300)

    }
    .height('100%')
    .width('100%')
  }
}

帧动画组件ImageAnimator

提供逐帧播放图片的能力，如同同动画一样的播放

常用熟悉

@Entry
@Component
struct Index {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State img: ImageFrameInfo[] = [
    { src: $r('app.media.loading_dog_0') },
    { src: $r('app.media.loading_dog_1') },
    { src: $r('app.media.loading_dog_2') },
    { src: $r('app.media.loading_dog_3') }
  ]

  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .width(300)
        .height(150)
        .images(this.img)
        .state(this.state)
        .duration(1000)
        .iterations(-1)
        .borderRadius(20)
      Row({ space: 20 }) {
        Button('启动')
          .onClick(() => {
            this.state = AnimationStatus.Running
          })
        Button('暂停')
          .onClick(() => {
            this.state = AnimationStatus.Paused
          })
        Button('停止')
          .onClick(() => {
            this.state = AnimationStatus.Stopped
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}