在這個超長假期中，無聊。。。，所以動手做一個早就計劃要做的小玩意， 水果老虎機 ，嗯，這是一個小程序而不是小游戲...

使用結構還是canvas？

使用模板結構(view)生成水果盤的好處一是用戶可自定義產出 n x n 的定制化老虎機，二是容易通過算法樣式生成布局，三是通過 wx.selectQueryAll 的方法能夠很方便的抓到定位數據。但，問題是動畫性能過于孱弱，如圖構建一個 7x7 的水果盤，動畫性能估計會慘不忍睹，而且純粹模板結構無論使用 animation 動畫方法還是 css 的keyframe的動畫方法得到的動畫效果都非常差(測試過的結論)，還有是已知的動畫方法可控性很差

使用canvas來生成水果盤好處是動畫性能很好(canvas2d)，但是定制性和擴展性比較差

so綜上考慮，使用模板(view)布局，使用canvas來實現動畫。既保證了組件的性能，同時定制型，擴展性也很好

準備計時器方法

動畫的生成離不開計時器方法，settimeout/setinterval這兩兄弟真的不夠看啊，問題還多，做過web開發的一定都知道 window.requestAnimationFrame ，這貨在小程序的計時器方法中不存在，好在 canvas2d 中可以使用 Canvas.requestAnimationFrame(function callback) 方法來實現

準備運動算法

在水果老虎機中，激活狀態會沿著四方的水果盤做非線性運動(easeInOut比較好用)，需要基礎的運動算法來計算實際的運動距離。在 animation 動畫方法中，我們可以使用 ease-in/ease-out 等緩動算法來實現動畫效果，但在這里必須要借助 tween.js 中的緩動算法來實現運動效果(因為需要控制運動節點)。

你會不會想到用css的keyframe動畫來做這個運動效果，經過我的測試，css的動畫和animation的動畫會在每一條邊上實現一次(ease)緩動運動(很奇怪的效果)

推薦這篇文章

使用其中一個，節省代碼量

/* * Tween.js * t: current time（當前時間）； * b: beginning value（初始值）； * c: change in value（變化量）； * d: duration（持續時間）。 */// Quart 四次方的緩動const easeInOutQuart = function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b;}

tween算法是以時間為基準(時間比率 = 距離比率)來計算單位時間的實際運動距離

布局

以上面的圖為例，我們需要做一個 7 x 7 的水果盤，實際有效的獎品格子數為 7*4-4 共24個有效格子

有效格子算法

js

// 0-6 第一行所有格子全部有效 // 21-27 最后一行所有格子全部有效 // 中間部分 i%7===0 和 i%7 === (7-1) 有效// 算法源碼有點無聊，依據上述思路，即可遍歷28個格子并標識獎品格子valide=true// 可以擴展想一想 6x6 5x5，思路是一樣的