鸿蒙应用开发-动画

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 特点将该元素标记为同享元素并设置对应的同享元素转场动效。

• 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')
  }
}

重视公众号：Android老皮！！！欢迎大家来找我探讨沟通