前端实现动态流量球效果
前段时间做了个流量球的小功能，现在拿出来小小的和大家分享一下。大致效果如下：
一.实现原理
利用canvas画个圆，下层利用requestAnimationFrame() 将Image图片实现动画的效果。
Image图片如下：
二.HTML部分
先简单的写下html部分代码：
里面input的value用来控制流量球的百分比显示
三.CSS部分
然后是样式部分代码：
四.JS部分
然后是脚本部分代码：
1.先定义一下需要用到的变数
2.然后做一下动画前的预处理
3.最后定义动画动作，循环动画
这里用到了requestAnimationFrame()方法，相比通过setInterval或setTimeout定时修改DOM、CSS实现动画而言，它更为经济、控制动画更加准确，更流畅，更省电(特别是移动端)。而且它在桌面端除了万恶的IE系列低版本9-，移动端除了Opera Mini和Android Browser4.3-其他都支持，总的来说支持率还是很高的。
HTML5 canvas globalCompositeOperation 属性也是一个很好用的属性，在我们作图时，它设置为source-in时可以控制图片显示在我们画的canvas圆内，超出部分不显示。
另外，值得注意的是，在用new Image()做图片载入时，如果需要考虑IE的兼容性，则必须将src属性放到onload的后面，所以最好是统一将src写在onload的后面。
五.最终成了如下的效果：
看著似乎还有点丑~
最后还得再优化一下视觉效果，主要用到了css3的渐变效果，下面是html和`css`代码。
HTML补充
CSS补充
六.效果展示
简单的做了个椭圆渐变的效果，看上去有点立体感了
这是动态效果图：
转自微信号：migufe
推荐阅读：
