鸿蒙应用开发-动画

目录

• 属性动画
• 显示动画
• 元素共享转场
• 拖动手势-阻尼和磁吸

1. 属性动画

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。

• 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

@Entry
@Component
struct Index {
  @State
  widthSize: number = 100
  @State
  heightSize: number = 40

  build() {
    Column({ space: 15 }) {
      Button('元素动画')
        .width(this.widthSize)
        .height(this.heightSize)
        .onClick(() => {
          this.widthSize = 200
          this.heightSize = 100
        })
        .animation({
          // 动画时间
          duration: 1000,
          // 执行次数
          iterations: -1,
          // 动画曲线
          curve: Curve.Ease,
          // 延时时间
          delay: 1000,
          // 播放模式
          playMode: PlayMode.Alternate
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2. 显示动画

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

@Entry
@Component
struct Index {
  @State
  heightSize: number = 40

  build() {
    Column() {
      Text('一级菜单')
        .height(40)
        .onClick(() => {
          animateTo({
            duration: 200
          }, () => {
            this.heightSize = this.heightSize === 40 ? 0 : 40
          })
        })
      Column() {
        Text('一级菜单')
          .height(this.heightSize)
        Text('一级菜单')
          .height(this.heightSize)
      }
    }
    .backgroundColor('#069')
  }
}

3. 元素共享转场

当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

38.ec831dd9.gif

• Index.ets

import router from '@ohos.router'
@Entry
@Component
struct Index {
  build() {
    Row({ space: 15 }) {
      Column({ space: 10 }){
        Image($rawfile('apple.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('apple', { duration: 500 })
        Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
          .sharedTransition('text', { duration: 500 })
      }
      .padding(15)
      .width('50%')
      .onClick(() => {
        router.pushUrl({
          url: 'pages/DetailPage'
        })
      })
    }
    .width('100%')
  }
}

• DetailPage.ets

@Entry
@Component
struct DetailPage {
  build() {
    Column({ space: 15 }) {
      Column({ space: 10 }){
        Image($rawfile('apple.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('apple', { duration: 500 })
        Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
          .fontSize(18)
          .sharedTransition('text', { duration: 500 })
      }
      .padding(15)
    }
    .height('100%')
    .width('100%')
  }
}

4. 拖动手势-阻尼和磁吸

拖动手势（PanGesture）

• 拖动手势用于触发拖动手势事件，滑动达到最小滑动距离（默认值为5vp）时拖动手势识别成功。

实现下拉刷新效果：
1.使用 Stack 堆叠下拉刷新容器和列表容器
2.使用手势事件 PanGesture 实现拖动列表容器
3.使用 animateTo 实现磁吸动画效果
4.拖动距离超出阀值，模拟开启加载效果，控制文字显示和动画

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
  @State
  translateY: number = 0
  @State
  text: string = '下拉即可刷新'
  @State
  loading: boolean = false

  ease (originValue: number = 0) {
    const space = 60
    const damp = 0.3
    if ( originValue > space ) {
      return space + ( originValue - space ) * damp
    }
    return originValue
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Row() {
        if (this.loading) {
          LoadingProgress()
            .width(32)
            .aspectRatio(1)
        }
        Text(this.text)
          .fontColor('#999')
          .width(100)
      }
      .height(100)

      List() {

      }
      .backgroundColor('#fff')
      .height('100%')
      .width('100%')
      .translate({ y: this.translateY })
      .gesture(
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            this.translateY = this.ease(event.offsetY)
            if ( this.translateY > 100 ) {
              this.text = '释放立即刷新'
            }
          })
          .onActionEnd((event: GestureEvent) => {
            if (this.translateY > 100) {
              this.loading = true
              this.text = '正在刷新中...'
              animateTo({ duration: 300 }, () => {
                this.translateY = 100
              })
              // 加载数据
              setTimeout(() => {
                this.loading = false
                this.text = ''
                animateTo({ duration: 300, onFinish: () => this.text = '下拉即可刷新' }, () => {
                  this.translateY = 0
                })
                promptAction.showToast({ message: '刷新成功' })
              }, 2000)
            } else {
              animateTo({ duration: 300 }, () => {
                this.translateY = 0
              })
            }
          })
      )
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f3f4f5')
  }
}