小程序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))
? ?},

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

查看更多关于小程序animate动画实现直播间点赞的详细内容...