[游戏开发]小程序 直播间点赞 animate动画实现

<view class="listImg">
	<block wx:for="{{list}}" wx:key="index">
        <image class="heart_img {{number == index?'active': ''}}"  src="../../utils/image/{{index+1}}.png"></image>
	</block>
</view>
<view class="click" bindtap="translate">点赞</view>

.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))
   },

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖