小程序Animation实现圆圈放大后回到原位

最新推荐文章于 2024-05-20 22:23:58 发布

大大。

最新推荐文章于 2024-05-20 22:23:58 发布

阅读量368

点赞数 1

分类专栏：小程序小程序动画文章标签：小程序 css 前端

本文链接：https://blog.csdn.net/weixin_43923808/article/details/127868534

版权

小程序同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

小程序动画

1 篇文章 0 订阅

订阅专栏

点击按钮实现一次放大。

效果如下：

上代码！

 <view class="red_css" animation="{{move}}" bindtransitionend="transitionEnd"></view>

.red_css {
  position: absolute;
  bottom: 120rpx;
  height: 110rpx;
  width: 110rpx;
  border: 1rpx solid #ea4c4c;
  border-radius: 50%;
  z-index: 9999;
  margin-left: 150rpx;
}

     data = {
 move: {},
}

 methods = {
 move1() {
      this.move = wx.createAnimation({ duration: 800 })
      this.$apply()
      this.move
        .opacity(0)
        .scale(3, 3)
        .step()
      this.move = this.move.export()
      this.$apply()
    },
    transitionEnd() {
      // 复位操作
      this.move = wx.createAnimation({ duration: 0 })
      this.move.opacity('').step()
      this.move = this.move.export()
    },
}