小程序animate动画实现直播间点赞

本文实例为大家分享了小程序animate动画实现直播间点赞的具体代码，供大家参考，具体内容如下

代码：

    
        
    

点赞

.listImg{
    position: relative;
    width: 100px;
    height: 300px;
    border: 2rpx solid red;
}
.heart_img{
    width: 100rpx;
    height: 100rpx;
    display: block;
    opacity: 0;
    position: absolute;
    left: 26rpx;
    transform:translateX(-50%);
    bottom: 0;
    
}
click{
    color: #000;
}

data: {
        list: 9,
        number: -1
    },
  
  randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
            break;
          default:
            return 0;
            break;
        }
  },
   translate() {
      let self = this;
        // 随机数
        let randomNum = this.randomNum(-30, 30);
        let number = this.data.number+1;
        console.log(number)
        // number是控制active的
        this.setData({
          number:number > 9 ? 0:number
        })
        // .active 是选择器
        this.animate('.active', [{
            opacity: 1,
            translateY: 0,
            ease:'else',
            scale: [.6, .6]
          },
          {
            scale: [1, 1],
            translate: [randomNum, -300]
          },
        ], 1500, function () {
          //动画完成后的回调函数
        }.bind(this))
   },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。