简单的转盘抽奖CSS动画优化-茄果

前言

前两天去一家公司面试，被问到一些小游戏的东西。面试官提到了刷红包还有抽奖这些怎么实现，当时简单说了下思路，回来之后想想还是说的太轻描淡写了，干说不做就是耍流氓，所以就做了一个（Demo & 源码）。启动方式：手指在转盘上滑动，转盘转动。这里没有像一般的抽奖程序一样在后台指定抽奖结果，结果完全由你的手速决定的（老板哭了。。。）

界面

界面很简单，网上搜个图片或者直接搜个 demo 就有了，当然自适应也是必须的。这里用了 Rem 来实现自适应，所有尺寸单位均用 rem，改变 html 节点的 font-size 即可实现全屏缩放，这里设置的是当屏幕宽度小于420px的时候转盘尺寸与屏宽城正比，当屏宽大于420px的时候转盘尺寸固定。更多关于rem实现自适应的内容，可以看看这里： Here 。

动效与交互

网上看到的demo大多数是点击启动的，就想着换个交互方式，用触屏滑动的方式启动。这里很容易就能想到以滑屏速度转动转盘，转动时给一个负加速度就可以实现减速了。这里要注意用户体验，为了让人有一个顺畅的感觉，启动的速度必须要相当的快，结尾的时候要慢慢的减速，营造抽奖的紧张气氛。所以加速度是有一个先大后小的变化，跟CSS中的 ease-out 一样的效果。代码如下：

 var  rotate = document.getElementById('imgs' );
  var  speed = vspeed = 0 ,
    x0  = y0 = t0 = x1 = y1 = t1 =  null  ;

(  function  (){
      var  lastTime = 0 ;
      var  vendors = ['ms', 'moz', 'webkit', 'o' ];
      for ( var  x = 0; x  x){
        window.requestAnimationFrame  = window[vendors[x]+'RequestAnimationFrame' ];
        window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame' ];
    };
    
      if (! window.requestAnimationFrame){
        window.requestAnimationFrame  =  function  (callback, element){
              var  currTime =  new   Date().getTime();
              var  timeToCall = Math.max(0, 16 - (currTime -  lastTime));
              var  id = window.setTimeout( function () { callback(currTime +  timeToCall); }, timeToCall);
            lastTime  = currTime +  timeToCall;
              return   id;
        };
    };
    
      if  (! window.cancelAnimationFrame){
        window.cancelAnimationFrame  =  function  (id){
            clearTimeout(id);
        };
    };
})();   //   Setup requestAnimationFrame when it is unavailable. 
 
document.addEventListener( 'touchmove',  function   (e) {
    e.preventDefault();
});

rotate.addEventListener( 'touchstart',  function   (e) {
      if  (e.touches.length == 1 ) {
        x0  = e.targetTouches[0 ].clientX;
        y0  = e.targetTouches[0 ].clientY;
        t0  =  new   Date().getTime();
    }
});

rotate.addEventListener( 'touchend',  function   (e) {
      var  that =  this  ,
        l  = 0 ,
        angle  = 0 ,
        timerID  =  null  ;
    x1  = e.changedTouches[0 ].clientX;
    y1  = e.changedTouches[0 ].clientY;
    t1  =  new   Date().getTime();
    l  = Math.sqrt(Math.pow(x1-x0,2) + Math.pow(y1-y0,2 ));
    speed  = l/(t1-t0)*20;
     if  (speed  return  ;
    vspeed  = 0.5 ;
    
      var  roll =  function   () {
        angle  +=  speed;
        that.style.transform  = 'rotateZ(' + angle + 'deg)' ;
          switch  ( true  ){
              case  speed  :
                window.cancelAnimationFrame(timerID);
                  return  ;
              case  speed   0.1 :
                speed  -=  vspeed;
                vspeed  -= 0.03 ;
                  break  ;
              default  :
                speed  -=  vspeed;
                  break  ;
        }
        timerID  =  window.requestAnimationFrame(roll);
    };
    roll();
});  

查看更多关于简单的转盘抽奖CSS动画优化-茄果的详细内容...