Animation
有请猪角Animation 微信提供给我开发者一个开发动画的类，借助它我们就可以画转盘。
第一步:wx.createAnimation方法用于创建Animation类并且设定基础属性。
//创建动画 let animationRun = wx.createAnimation({ duration: 6, timingFunction: 'ease', delay:10, transformOrigin:"'50% 50% 0'" })
看到上面的代码你是否有种似曾相识的感觉，想想，再想想，给你点提示css3。
css3 属性transition语法
transition: property duration timing-function delay;
于是乎我们似乎得到一个结论：当使用wx.createAnimation创建一个动画时，本质就是在构建css3动画字符串。
上面创建动画的代码就转化成
// css动画字符串 <style> transition: 6000ms ease 10000ms; transition-property: transform; transform-origin: 50% 50% 0; -webkit-transition: 6000ms ease 10000ms; -webkit-transition-property: transform; -webkit-transform-origin: 50% 50% 0; </style>
第二步：Animation.rotate 方法用于设定转盘旋转的角度。
let runDeg = 90 animationRun.rotate(runDeg).step();
上面代码会在css动画字符串中增加：
transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); /* Opera */
变成完整的css样式
<style> transition: 6000ms ease 10000ms; transition-property: transform; transform-origin: 50% 50% 0; -webkit-transition: 6000ms ease 10000ms; -webkit-transition-property: transform; -webkit-transform-origin: 50% 50% 0; transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); /* Opera */ </style>
第三步：Animation.step 方法用于结束一组动画，以便开始下一组动画。
animationRun.rotate(runDeg).step()
该方法会将多个动画样式合并。
<style> animation1; animation2; animation3; </style>
第四步：Animation.export 方法用于导出动画队列。
this.setData({ animationData: animationRun.export(), btnDisabled: 'disabled' });
此时本质就是把完整的css3样式赋值到对应的标签style内，打开调试查看wxml。
官方解释：导出动画队列。export 方法每次调用后会清掉之前的动画操作。
但是实际操作发现，在第三步时如果将animationRun赋值可以到达同样的效果，也就是说调用step方法时已经将动画导出。（当然这些是作者结合实践加大胆的猜测，并未得到微信的答复）并且发现export方法也存在问题，并不是官方所说的会清掉之前的动画。查看Wxml会发现样式依旧存在。应该是微信小程序的一个bug,这点也给后续操作带来了一些列的问题。例如动画样式已经是内联样式，自定义样式不易去覆盖。（我们同时先微信团队提出了疑问。）
当我们使用Animation后，如果希望自定义一些css3样式可能会遇到问题，目前建议自己代码清除一些样式。
总结
Animation 本质就是对css3动画样式的基本封装便于在js中灵活控制。
当你看到一大堆简单但是却需要记忆的样式代码时，尝试通过封装之道，让代码变的更加优美。
文章结尾奉献一个转盘组件。完整代码已经附上，喜欢的朋友可以自行引用。
使用场景
抽奖
