前端實現動態流量球效果
前段時間做了個流量球的小功能，現在拿出來小小的和大家分享一下。大致效果如下：
一.實現原理
利用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
推薦閱讀：
