个人前端故事----轮盘转起来(+﹏+)~

       转眼间，立刻又到了中秋了，突然想到了有到了作活动的日子了~每逢佳节必活动的传统一直是咱们前端的职责所在，去年我介绍了游戏机，大富翁，那今年的活动就来个轮盘开奖吧~其实这个东西在 pc 端上已经烂大街了，无数的 demo，插件能够帮助咱们实现这个功能，因此我也就随大流的去找了个知名的 jQuery 插件去实现这个功能，惋惜我作的是移动端的开发。。。平时基本都是原生 javaScript 作开发，顶多上一个 zepto，为了这个功能上一个 jQuery 总以为不是那么地道，不过如今的jquery压缩下来只有38K，想了想仍是尝试尝试，结果发现卡的要死。。。轮盘在 iOS 设备上转起来还能看，到了一些安卓上就简直不能看了，为此被运营的吐槽了很多。。。因此干脆决定本身搞一个算了，我就不信一个轮盘能这么卡！

       说干就干，由于平时是采用以前说的nuts作脚手架的，因此js上面能够使用ES6来作开发，所以个人这个插件也一样采用ES6语法来写的，详细的使用方法请参考这里。个人这个插件支持两个方法，rotate() 方法用来对元素进行操做，而 getRotateAngle() 能够取到元素最后停下来的角度。

      简单的来讲，使用起来仍是很直观的，在初始化的时候设置起始角度，转动角度和转动时间，就能够等着回调函数按时执行了~原理你们应该都懂，那么它又是怎么能在移动端上保证高性能呢？其实就是用到了以前我介绍到的requestAnimationFrame 来作这个动画~

 

     首先，咱们先初始化变量，我先用ele来缓存传入的元素节点，接下来再拿到浏览器的样式 styles，旋转动画我仍是使用的 transform 属性来作，为了兼容性，我须要知道当前浏览器支持的是什么前缀的 transform，为了便于存储，我先将因此的 transform 用字符串的形式存储下来，而后在 filter 方法中遍历出浏览器支持的具体属性，而且保存在 supportedCSS 变量中。

      这两句十分的关键！由于咱们采用3D变换，因此须要这两个属性来加速咱们的动画，其实原理也是很简单的，经过这两个属性，咱们可让咱们的动画调用设备的GPU来进行渲染，这会大大的提升渲染效果。

这个是基于 requestAnimationFrame 的转动函数，它不停的递归执行动画，直到知足条件后退出，在这个函数中咱们须要传入参数来控制它的变换曲线，关于曲线变换的知识点，以前圆里的大神有很详细的介绍，感兴趣的能够去搜索一下~在这个函数中我并无直接去操做dom节点，而是经过 _animate() 去进行真正的旋转的。

       最后咱们返回两个函数，咱们能够在这两个函数这里对传入的参数进行一些预处理或者校验等等，我在这里其实除了拼装对象外，并无作过多的处理，感兴趣的同窗能够本身去改一改试试~

       处处为止~这个简单的轮盘组件就作完啦~很简单吧~思路仍是比较清晰的，关键的亮点在于使用请求动画帧来作旋转逻辑，另外就是经过style的属性让动画启用GPU进行渲染，这两点在移动端上能够大大的提高咱们组件的性能，好了~今天就到这里吧~何时我想到了更好玩的活动再记录下来吧~(￣︶￣)↗

源代码请见GitHub：https://github.com/F-happy/mobile-wheel-of-fortune