手機用戶點我近來看特效
源生JavaScript構造駭客帝國進化版本，
用源生JS寫出高大上，
逼格更高。
這才是最適合程式師體現的一張圖，
我就想問一句，
還有誰？
為什麼說是進化版呢？因為裡面用到源生JS結合canvans寫出來的，
且代碼量少之又少，
130行代碼坐到。
想獲取高大上的逼格代碼，
請搜索web前端交流群：621071874，
裡面可供大家分享的案例更多，
期望各位大佬的加入。
JS源碼想獲取源碼的小夥伴記得來學習群：621071874
知識點：canvas高級繪圖標籤API運用， 陣列方法， js邏輯思維， 代碼性能優化。 定義了一個立即執行函數， 形成具備作用域， 避免污染全域空間。 將功能函數掛在了window。 利用setTimeout和clearTimeout的非同步實現相應的功能， 不是為一種很好的結局方案。
window.requestAnimationFrame()這個API是流覽器提供的js全域方法， 針對動畫效果。
使用用法1：
1
注意函數裡的requestAnimationFrame(animate)
有了這句話， 就形成了遞迴呼叫， 設置應為這個函數多用在持續的動畫中， 可以自由處理要不要這句話。
用法2：
2
優點流覽器可以優化並行的動畫動作， 更合理的重新排列動作序列， 並把能夠合併的動作放在一個渲染週期內完成， 從而呈現出更流暢的動畫效果。 經過流覽器優化， 動畫更流暢窗口沒啟動時；動畫將停止， 省計算資源。
使用場景可以調節重新渲染， 大幅提高網頁性能。 其中最重要的， 它可以將某些代碼放到下一次重新渲染時執行。 避免短時間內觸發大量reflow。
3
頁面滾動事件（scroll）的監聽函數， 就很適合用這個api,推遲到下一次重新渲染。
4
最佳的應用場景還是在幀動畫裡， 可以大幅優化性能；
相容性支援
5
說明：
定義了一個立即執行函數， 形成具備作用域， 避免污染全域空間。
將功能函數掛在了window.
利用setTimeout和clearTimeout的非同步實現相應的功能， 不是為一種很好的結局方案。
最後HTML5/CSS3時代， 我們要在web裡做動畫選擇其實已經很多了:
你可以用CSS3的animattion+keyframes;
你也可以用css3的transition;
你還可以用通過在canvas上作圖來實現動畫， 也可以借助jQuery動畫相關的API方便地實現;
著實裝了一回