抽獎動畫
之前寫過一篇 按概率抽取 文章，今天來講講當你拿到後端返回的中獎信息將如果以動畫的形式展現給用戶。
1、素材選取
此處用到的圖片素材是出自組裏視覺大大之手，我只是將圖片改了一下。在此感謝視覺大大。
2、頁面搭建
根據視覺大大給的視覺稿先搭建一個頁面，如下：
<style>
html, body{
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#22a29d, #0d6964)
}
.g-wrap{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card-box{
display: inline-block;
position:relative;
}
</style>
<div class="g-wrap">
<div class='u-cards J_cards'>
<div class="card-box">
<img src="./static/images/card1.png">
</div>
<div class="card-box">
<img src="./static/images/card2.png">
</div>
<div class="card-box">
<img src="./static/images/card3.png">
</div>
<div class="card-box">
<img src="./static/images/card4.png">
</div>
<div class="card-box">
<img src="./static/images/card5.png">
</div>
</div>
</div>
整體的頁面效果如下：
挑剔的視覺大大，看了我的還原說我牌周邊的光圈不太明顯（png圖片帶的）。好吧，那我給你加一下。
使用 css 僞元素來添加光圈，光圈使用 box-shadow 來實現。
.card-box.card-normal:after {
position: absolute;
left: 7px;
top: 1px;
display: block;
width: 193px;
height: 263px;
content: '';
transition: all 0.5s ease; // 爲後面動畫做準備
border-radius: 7px;
box-shadow: 0 3px 10px 5px #3cdad4;
}
添加完光圈後如下圖：
效果是比之前明顯了。同理添加，蒙層和選中的狀態：
.card-box.card-mask:after{
position: absolute;
left: 7px;
top: 1px;
display: block;
width: 193px;
height: 263px;
background-color: rgba(0, 0, 0, 0.3);
content: '';
transition: all 0.5s ease;
border-radius: 7px;
}
.card-box.card-checked:after{
position: absolute;
left: 7px;
top: 1px;
display: block;
width: 193px;
height: 263px;
content: '';
transition: all 0.5s ease;
border-radius: 7px;
box-shadow: 0 0 8px 8px #f9f5e9;
}
說有情況頁面效果如下：
至此，頁面勉強過了視覺大大的法眼，接下來我們實現最重要的動畫部分。
3、動畫製作
一般抽獎動畫爲，開始時速度很快，然後變慢。我們可以是使用定時器 setTimeout 來實現動畫，速度調節可以通過增加定時時長來降低速度。每次通過定時給元素添加 class name 來實現動畫效果，爲了不讓每次添加 class name 時看着很生硬，前面給每個僞元素添加了 transition 屬性。
-
定初始速時長和每次增加時長
var startTimeout = 100; // 初始定時器時長 var _breakTime = 10, // 每次增加的時長 -
何時停止動畫，定義要滾動的輪數
var _circleTimes = 3; // 需要轉幾輪 var _allNum = 5; // 總共有幾個獎品 // id 爲後端傳回來的用戶抽到的獎品，_stepNum 爲動畫總共執行多少次。 var _stepNum = _allNum * _circleTimes + id; var lotteryNum = 0; // 當前位置（每執行一次，會加1，也可理解當前執行次數） if (lotteryNum >=_stepNum) {停止動畫} -
動畫開始時爲所有卡片添加蒙層，去掉正常態
card-normal、選中態card-checked類名，添加蒙層card-mask類名。$('.J_cards .card-box') .removeClass('card-normal') .removeClass('card-checked') .addClass('card-mask'); -
爲當前元素添加選中態，去掉蒙層
card-mask類名，添加選中態card-checked類名$('.card-box' + (lotteryNum % _allNum)) .removeClass('card-mask') .addClass('card-checked'); -
定時啓動動畫
scrollTimeout = setTimeout(function(){ lottery(id, callback); }, startTimeout+_breakTime); // 定時爲卡片改變 類名，來模擬動畫 lotteryNum++; // 當前位置加1 ， startTimeout+=_breakTime; // 增加定時時長，來降低速度。 -
當執行次數等於總次數時，清除定時器即可停止動畫。
if(lotteryNum >=_stepNum){ clearTimeout(scrollTimeout); lotteryNum = 0; startTimeout = 100; if(callback){ callback(); } } -
代碼大致如下：
var lotteryNum = 0; startTimeout = 100, _circleTimes = 3, _breakTime = 10, _allNum = 5; function lottery(id, callback){ var _stepNum = _allNum * _circleTimes + id; // 加蒙層 $('.J_cards .card-box').removeClass('card-normal').removeClass('card-checked').addClass('card-mask'); // 讓當前元素爲選中態 $('.card-box' + (lotteryNum % _allNum)).removeClass('card-mask').addClass('card-checked'); scrollTimeout = setTimeout(function(){ lottery(id, callback); }, startTimeout+_breakTime); lotteryNum++; startTimeout+=_breakTime; if(lotteryNum >=_stepNum){ clearTimeout(scrollTimeout); lotteryNum = id; startTimeout = 100; if(callback){ callback(); } } } -
模擬抽獎
添加一個按鈕 <div class="gf-ft"> <a href="javascript:void(0)" class="gf-btn J_getGf">立即翻牌 ></a> </div> 添加事件 $('.J_getGf').on('click', getGift); 事件處理 function getGift(){ // 請求抽獎 fetch('getGift',function(_data){ var giftId = _data.data; lottery(giftId, function(){}); }) }