微信小程序实现九宫格抽奖动画

由于工作需求需要在微信小程序实现九宫格抽奖动画，第一反应是想通过定时器setData去切换高亮的奖品，但是频繁setData必定导致小程序卡顿，也可能会出现兼容性问题，其次，定时器setData不方便实现先快后慢的动画效果，于是改用Tween.js动画库实现

效果如下：

 

代码：

.wxml:

<wxs module="handle">
 var Tween = {
  Sine: {
   easeOut: function(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
   },
  }
  
 }
 var current = -1;
 module.exports = {
  indexObserver: function(newValue, oldValue, ownerInstance, instance){
   if(typeof oldValue === 'undefined' && newValue === -1) return;
    console.log(newValue, oldValue)
   var elements = ownerInstance.selectAllComponents('.border-box');
   var max = 8; // 9宫格的最大值（中间不算）

   var t = 0; // 当前时间
   var d = 200;  // 持续时间