1. 需求

上次講到lao虎機抽獎，通過jquery.animate修改background-prosition-y來修改背景圖片實現上下滾動動畫，本文介紹一種左右滾動的動畫，原理是一樣的，這里通過修改background-prosition-x來實現動畫，同時也要注意獎品圖片的尺寸問題，這里姑且叫它滾動抽獎。先看高保，如下圖1：

圖1
需求如下：

1. 獎品圖片橫排列。
2. 用戶點擊抽獎，獎品依次向左滾動，先空轉2圈。
3. 請求抽獎接口，待接口有返回后，根據接口返回的結果固定在某個獎品上。

注意這里每個獎品圖片的寬度要是固定的，否則在計算獎品圖片位置的時候對不準，這個要和UI設計人員事先約定，做好溝通。

2. 整體思路

2.1 獎品順序

為了最后選中獎的獎品，要按照圖片的順序定義獎品數據的順序，最后使用獎品數組的index來計算滾動位置并播放第二個動畫，所以定義獎品數組的時候要按照獎品的背景圖片中的殊勛保持一致，方便動畫定位。

2.2 background-prosition-x

background-position為每一個背景圖片設置初始位置。 這個位置是相對于由background-origin定義的位置圖層的。background-origin有三種取值，如下：

1. border-box
   背景圖片以border區域為參考，默認值
2. padding-box
   背景圖片以padding區域為參考
3. content-box
   背景區域以content區域為參考

background-position定義一對x/y坐標，來放置背景圖片，它可以被定義成一個值或兩個值，如果被定義成兩個值，第一個值代表水平位置，第二個代表垂直位置。如果只指定一個值，則第二個值為center。
也可以單獨設置x坐標或y坐標，例如background-position-x用來設置背景圖片水平方向的位置。
background-position-x為0時，背景圖片與容器左邊界對齊，如果background-position-x為20px時，圖片相對容器向右偏移20px，前面20px是空白，看上去是一個放在容器中間的圖片。如下圖2

圖1
相反，如果background-position-x為-20px時，背景圖片從向左偏移20px，圖片有20px被遮蓋了，如下圖3

圖3
使用jQuery.animate函數來不斷修改background-prosition-x，并且設置repeat，這樣看起來就是圖片在滾動了，這個抽獎動畫的原理就是這樣。

2.3 定位獎品

最后請求接口，通過獎品屬性prizeId找到這個獎品在數組中的下標index，根據index和圖片寬度計算background-position-x。

3. 實現過程

3.1 布局

UI提供了背景圖片和獎品圖片，這里主要使用relative，absolute定位的方式來布局。如下圖4首先使真個抽獎塊的背景圖。注意從高保中可以看到整個空白的框中的長度是2個獎品圖片的長度，這個在后后面給獎品圖片定位的時候會用到。

圖3
然后再把獎品圖片作為背景圖片放在這個框中。這個獎品圖片如下圖4

圖4
放在抽獎框中的效果如下圖5

圖4
然后修飾一下，在兩邊用陰影，讓它看起來像有一個弧度，類似手機上的曲面屏，如下圖5。

圖5
最后給加上抽獎按鈕和指針圖片，效果如下圖6

圖6

3.2 獎品順序

上圖4中UI給出了獎品順序，那定義獎品數組的時候就要按照這個順序來了。注意獎品圖片中“謝謝合作”和“無線耳機”重復出現了2次，這是為了使背景滾動起來看上去連貫一點，沒有什么用，實際獎品是從“無線耳機”開始到“謝謝參與”結束，定義數據如下：

prizeList: [
  {prizeId: '100860911', index: 0, prizeName: 'AirPods2代無線耳機'},
  {prizeId: '100860910', index: 1, prizeName: '20元優惠'},
  {prizeId: '100860909', index: 2, prizeName: '10元優惠'},
  {prizeId: '100860908', index: 3, prizeName: '5元優惠券'},
  {prizeId: '100860907', index: 4, prizeName: '2元現金加贈券'},
  {prizeId: '100860904', index: 5, prizeName: '1元優惠券'},
  {prizeId: '100860903', index: 6, prizeName: '1元優惠券'},
  {prizeId: '100860902', index: 7, prizeName: '5元滿減券'},
  {prizeId: '100860901', index: 8, prizeName: '2元滿減券'},
  {prizeId: '100860906', index: 9, prizeName: '0.5元現金券'},
  {prizeId: '100860905', index: 10, prizeName: '0.2元現金券'},
  {prizeId: '100860900', index: 11, prizeName: '謝謝參與'}
]

3.3 初始位置

獎品圖片的初始位置要落在第一個獎品“無線耳機”，要根據獎品圖片的大小來計算。定義兩個變量來記住圖片大小。

let totalLth = 3962               //獎品圖片總長度
let itemLth = totalLth / 14       //每個獎品長度

獎品圖片的初始位置是整個圖片的長度除以14（一共14個小圖片）除以75（postcss-plugin-px2rem中定義的rootValue），再乘以0.5得到半個獎品圖片的長度，單位是rem，要讓圖片向左移動，所以要取負值，這樣正好向左移動半個圖片長度，使第一個獎品正好落在指針正中央。定義變量記住這個初始偏移尺寸，如下：

locationX: -1.8866666666666667              //3962/14/75*0.5

定位結果如下圖7

圖7
這半個圖片長度是根據整個框占2個圖片寬度，獎品在小圖片正中間，第一個獎品圖片前面有個“謝謝參與”，在整個背景的1.5個圖片寬度處，所以2-1.5=0.5，最后正好落在指針處，就是正中間。

3.4 jQuery動畫

jQuery動畫和可以很方便的修改DOM元素的尺寸信息，包含background-position信息，參考jquery文檔如下

Animation Properties and Values(動畫屬性和值)
所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。（例如，width, height或者left可以執行動畫，但是background-color不能，除非使用jQuery.Color()插件。）屬性值的單位像素（px）,除非另有說明。單位em 和 %需要指定使用。

另外jQuery的動畫屬性也可以是一個相對值，這樣我們從接口響應中獲取到獎品信息后，就可以非常方便的播放第二個動畫，參考jQuery文檔如下：

動畫屬性也可以是一個相對值。如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的。

最后jQuery.animate動畫提供complete回調函數指定動畫完成之后要處理的事情，也可以用來按照順序播放動畫，參考jQuery文檔如下：

Complete Function（完成函數）
如果提供complete回調函數將在動畫完成后被執行一次。這對于按順序執行一系列不同動畫時，特別有用。這個回調函數不設置任何參數，但是this會被傳遞到正在執行動畫的DOM元素上，如果多個元素一起做動畫效果，值得注意的是這個回調函數在每個匹配元素上執行一次，不是這個動畫作為一個整體。

3.5 空轉

布局有了，動畫思路也有了，現在可以讓背景動起來了。先讓整個背景轉2圈，模擬開獎，代碼如下：

drawLottery() {
  let totalLth = 3962               //獎品圖片總長度
  let itemLth = totalLth / 14       //每個獎品長度
  let wheel = 2                     //空轉2圈
  //先空轉
  window.jQuery('#slotMachine').css('background-position-x', `${this.locationX}rem`)
  window.jQuery("#slotMachine").animate(
    {backgroundPositionX: `-=${((totalLth * wheel) / 75)}rem`},
    {duration: 5000, easing: 'easeInOutQuint'}
  )
}

注意每次開始播放動畫之前先讓背景回到第一個獎品“無線耳機”上，不然的話連續抽檢的話就對不準了。效果如下圖8：

圖8
從動畫中可以看到，讓背景滾動了2圈，2*整個背景的長度，最后正好回到原點。但是為了方便我們最后計算獎品位置，要讓背景回到background-position-x: 0的位置，這樣最后計算的時候可以直接用index來計算，便于理解。這里只要在backgroundPositionX基礎上減去半個圖片尺寸就好，如下：

圖9

3.6 請求接口&第二個動畫

第一個動畫空轉，設置的時間是5秒，動畫播放完就要定位獎品了，這里和后端約定好，抽獎接口5秒內一定要返回結果，否則第二個動畫就無法定位。
最后使用Complete Function來處理接口返回的結果。代碼如下：

window.jQuery("#slotMachine").animate(
  {backgroundPositionX: `-=${((totalLth * wheel - (itemLth / 2)) / 75)}rem`},
  {duration: 5000, easing: 'easeInOutQuint', complete: function() {
    getPrizeInfo(window.jQuery(this))
  }}
)

注意在complete回調函數中this是正在執行動畫的DOM元素，正好可以用來用這個DOM播放第二個動畫。這里complete不能使用箭頭函數，否則this會指向當前vue組件。
getPrizeInfo()方法處理接口結果，并播放動畫，代碼如下：

//抽獎
let getPrizeInfo = slotMachine => {
  let chooseIndex = this.getRandomIntInclusive(0, this.prizeList.length - 1)
  console.log(JSON.stringify(this.prizeList[chooseIndex]))
  slotMachine.animate(
    {backgroundPositionX: `-=${((chooseIndex + 0.5) * itemLth / 75)}rem`},
    {duration: (chooseIndex + 1) * 800, easing: 'swing'}
  )
}

這里我們用一個隨機函數取出獎品結果。代碼如下：

//返回隨機數，大于等于min，小于等于max
getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值 
}

注意chooseIndex+0.5也是為了調整獎品圖片的對應位置。最后動畫效果如下圖10

圖10

4. 總結

本文介紹了另外一種方式的抽獎動畫，和lao虎機很類似，只不過是左右滾動，原理依然是使用jQuery.animate修改background-position-x屬性來實現滾動。