转眼间，马上又到了中秋了，忽然想到了有到了做活动的日子了~每逢佳节必活动的传统一直是我们前端的职责所在，去年我介绍了游戏机，大富翁，那今年的活动就来个轮盘开奖吧~其实这个东西在 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

我的前端故事----轮盘转起来(+﹏+)~