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

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

效果如下：

 

代码：

.wxml:

 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;  // 持续时间
   var b = 0; // 初始值
   var c = newValue + max * 10; // 变化量
   function tick(){
    var value = Tween.Sine.easeOut(t, b, c, d);
    t += 1;
    var index = parseInt(value % max); // 取余
    elements.forEach(function(e, i){
     if(i === index){
      elements[i].addClass('focus')
     } else {
      elements[i].removeClass('focus')
     }
    })
    if(t <= d){
     ownerInstance.requestAnimationFrame(tick);
    } else {
     // 动画完成
    }
   }
   tick();
  }
 }



    
      
        
          
        
      
    
  

change:prop="{{handle.indexObserver}}" prop="{{prizeIndex}}"   监听prop的值发生变化，对应indexObserver函数中的newValue值，即触发handle.indexObserver函数,动画开始执行

Tween.Sine.easeOut(t, b, c, d)表示先快后慢的动效，动画库请参照tween.js   https://github.com/zhangxinxu/Tween/blob/master/tween.js

 

.js:通过点击事件drawPrize改变prizeIndex的值：this.setData({ prizeIndex: 3 })

 

.wxss:  动画显示效果

.focus { background: radial-gradient(#fff, rgb(207, 110, 86)); }