鸿蒙中显式动画animateTo和animation

星辰大海Amy

于 2024-07-25 21:53:41 发布

阅读量1k

点赞数 25

分类专栏：鸿蒙开发学习笔记前端学习笔记文章标签：鸿蒙 android 鸿蒙系统

本文链接：https://blog.csdn.net/m0_61426556/article/details/140700819

版权

今天给大家带来鸿蒙中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({
      dur