你的位置:首页 > 软件开发 > 网页设计 > 简单的转盘抽奖——CSS动画优化

简单的转盘抽奖——CSS动画优化

发布时间:2016-05-11 18:00:07
前言前两天去一家公司面试,被问到一些小游戏的东西。面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & 源码)。启动方式:手指在转盘上滑动,转盘转动。这里没有像一般的抽奖程序一样在后 ...

前言

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

 简单的转盘抽奖——CSS动画优化

 

界面

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

 

动效与交互

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

简单的转盘抽奖——CSS动画优化简单的转盘抽奖——CSS动画优化
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 < vendors.length && !window.requestAnimationFrame; ++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 < 10) return;  vspeed = 0.5;    var roll = function () {    angle += speed;    that.style.transform = 'rotateZ(' + angle + 'deg)';    switch (true){      case speed < -0.3:        window.cancelAnimationFrame(timerID);        return;      case speed < 10 && vspeed > 0.1:        speed -= vspeed;        vspeed -= 0.03;        break;      default:        speed -= vspeed;        break;    }    timerID = window.requestAnimationFrame(roll);  };  roll();});

原标题:简单的转盘抽奖——CSS动画优化

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。