鸿蒙中显式动画animateTo和animation

今天给大家带来鸿蒙中animateTo动画

我们先看一下效果

当然这个方法也可以用透明度做 方法有很多种，只要能实现效果就可以 

下面我们来看一下代码是怎么样做的

我这里首先用的是层叠布局先搭好架子

然后再根据x和Y轴 去平移模态框，在设置动画属性animation

 if (this.isShowitem) {
    Column() {
      Row() {
        Image($r('app.media.ch'))
          .width(20)
          .onClick(() => {
            animateTo({ duration: 1000 }, () => {
              this.isShowitem = false
            })
          })
      }
      .width('100%')
      .padding(10)

      Column() {
        Text('内容待完善')
          .animation({ duration: 1000, curve: Curve.EaseIn })
      }
    }
    .translate({
      //动画属性
      x: this.translateX, // 根据x轴去平移模态框
    })
    .animation({
      duration: 2000, //动画的时长
      curve: Curve.Ease, 
      playMode: PlayMode.Alternate,
    })
    .width('50%')
    .height('100%')
    .backgroundColor('#f1f1f1')
  }

}

这一部分是关键代码

下面是点击头像显示模态框

我这里用的是两种属性，可以更直观的看出两种属性的差距

下面是完整代码

点击显示

Row() {
  Image($r('app.media.user_01'))
    .width(20)
    .onClick(() => {
      console.log('2')
      // 显示模态框
      animateTo({ duration: 2000 }, () => { // 这个可以包在点击事情里面
        this.isShowitem = true
        this.translateX = 0
      })
    })
  Image($r('app.media.more_01'))
    .width(20)
    .margin({ left: 15 })
}

点击隐藏

if (this.isShowitem) {
  Column() {
    Row() {
      Image($r('app.media.ch'))
        .width(20)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.isShowitem = false
          })
        })
    }
    .width('100%')
    .padding(10)

    Column() {
      Text('内容待完善')
        .animation({ duration: 1000, curve: Curve.EaseIn })
    }
  }
  .translate({
    //动画属性
    x: this.translateX,
  })
  .animation({
    duration: 2000, //动画的时长
    curve: Curve.Ease,
    playMode: PlayMode.Alternate,
  })
  .width('50%')
  .height('100%')
  .backgroundColor('#f1f1f1')
}