小程序animate動畫實現(xiàn)直播間點贊

更新時間：2022年07月06日 15:42:08 作者：摯友陽光

這篇文章主要為大家詳細(xì)介紹了小程序animate動畫實現(xiàn)直播間點贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序animate動畫實現(xiàn)直播間點贊的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<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;
? ? ? ? // 隨機(jī)數(shù)
? ? ? ? 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 () {
? ? ? ? ? //動畫完成后的回調(diào)函數(shù)
? ? ? ? }.bind(this))
? ?},

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: