小程序animate动画实现直播间点赞
本文实例为大家分享了小程序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))
},
