微信小程序-缩放动画

文档

111.gif

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    scaleAnimation: null, // 缩放动画
    scaleAnimationData: {}, // 缩放动画参数数据
    scaleAnimationTimeout: null, // 缩放动画倒计时
    scaleAnimationSecond: 500, // 缩放动画倒计时秒数
  },
  onLoad: function () {
    // 初始缩放动画
    this.scaleAnimationInit()
    // 启动缩放动画倒计时
    this.scaleAnimationTimeoutBegin()
  },

  onUnload() {
    // 结束缩放动画倒计时
    this.scaleAnimationTimeoutEnd()
  },
  // 初始缩放动画
  scaleAnimationInit() {
    this.data.scaleAnimation = wx.createAnimation()
  },
  // 启动倒计时
  scaleAnimationTimeoutBegin() {
    var that = this
    that.startScaleAnimation()
    that.data.scaleAnimationTimeout = setTimeout(function () {
      if (that.data.scaleAnimationSecond > 0) {
        that.setData({
          scaleAnimationSecond: --that.data.scaleAnimationSecond
        })
        // 循环倒计时
        that.scaleAnimationTimeoutBegin()
      }
      else {
        that.scaleAnimationTimeoutEnd()
        that.setData({
          isUnresponse: true
        })
      }
    }, 2000)
  },
  // 清除倒计时
  scaleAnimationTimeoutEnd() {
    clearTimeout(this.data.scaleAnimationTimeout)
  },
  // 开始缩放动画
  startScaleAnimation() {
    //修改透明度,放大
    this.data.scaleAnimation.opacity(0).scale(1.25, 1.25).step({
      duration: 1000
    });
    this.setData({
      scaleAnimationData: this.data.scaleAnimation.export()
    })
    var that = this
    const timerout = setTimeout(function(){
      that.resetScaleAnimation()
      clearTimeout(timerout)
    },1000)
  },
  // 复原缩放动画
  resetScaleAnimation() {
    this.data.scaleAnimation.opacity(1).scale(1, 1).step({
      duration: 0
    });
    this.setData({
      scaleAnimationData: this.data.scaleAnimation.export()
    })
  },
  move() {
    console.log('不给滚倒计时')
  }
})

<!--index.wxml-->

<view class="cd-cnt">
  <view class="cd-blue-bg-animation" animation="{{scaleAnimationData}}"></view>
  <view class="cd-blue-bg">
  </view>
  <view class="cd-blue-bg-forbid" catchtouchmove="move"></view>
</view>

/**index.wxss**/
.cd-cnt {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;

  height: 400rpx;
}
.cd-blue-bg-animation {
  width:320rpx;
  height:320rpx;
  background:linear-gradient(135deg,rgba(7,216,255,1) 0%,rgba(0,155,255,1) 100%);

  border-radius: 50%;
  position: absolute;
  z-index: 101;
}
.cd-blue-bg {
  width:320rpx;
  height:320rpx;
  background:linear-gradient(135deg,rgba(7,216,255,1) 0%,rgba(0,155,255,1) 100%);

  border-radius: 50%;
  position: absolute;
  z-index: 101;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cd-blue-bg-forbid {
  width:320rpx;
  height:320rpx;
  background: rgba(0,0,0,0);

  border-radius: 50%;
  position: absolute;
  z-index: 102;
}