老司機約戰秋名山之駭客帝國進化版，特效滿天飛，老司機開車還不上車？

手機用戶點我近來看特效

源生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方便地實現;

著實裝了一回