歡迎您訪問八維職業學校-創新教育 引領未來
隨著互聯網的普及和技術的不斷發展，web前端開發工程師在當今互聯網行業中的重要地位，Web前端開發工程師作為一個專業技術崗位，需要掌握多種技術來構建現代化的網頁和應用程序，今天八維職業學校和大家一起來看看Web前端開發工程師常用的三種前端動畫效果的實現方式是什么？希望對想要學習和了解web前端開發工程師這個行業的同學有所幫助。
一、JavaScript 動畫
因為沒有其它可用的實現方式，最初的前端動畫都是JS來實現，實現上就是通過一個定時器setInterval 每隔一定時間來改變元素的樣式，動畫結束時clearInterval即可。早期的類庫包括 jquery、prototype、mootools 等等都是這種方式。
盡管這種方式動畫的可控性很強，但是問題也很明顯：
· 性能不佳，因為需要不斷獲取和修改Dom的布局，所以導致了大量頁面重排(repaint)
· 缺乏標準，不同的庫使用了不同的API，導致即使是簡單的動畫也有各不相同的實現方式，調整起來比較耗時
· 帶寬消耗，相對豐富的動畫庫代碼量都很大，結果就是增加了http請求的大小，降低了頁面的載入時間
二、CSS3 動畫
css3 加了兩種動畫的實現方式，一種是 transition， 一種是 animation。
transition 包含4種屬性：transition-delay transition-duration transition-property transition-timing-function，對應動畫的4種屬性： 延遲、持續時間、對應css屬性和緩動函數，
transform 包含7種屬性：animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state，它們可以定義動畫名稱，持續時間，緩動函數，動畫延遲，動畫方向，重復次數，填充模式。
總的來書，css 動畫相比與JS更輕量，性能更好，更易于實現，同時也不必擔心缺乏標準和增加帶寬消耗的問題。animation 相比 transtion 使用起來更為復雜，但也提供了更多的控制，其中最重要的就是 frame 的支持，不過通過一些簡單的JS庫，例如 TJ 的 move.js, 我們也能在JS中通過 transition 來實現更復雜的控制。
三、Html5 動畫
Html5 定義了三種繪圖的方式，canvas svg Webgl，其中svg做為一種可縮放矢量圖形的實現是基于xml標簽定義的，它有專門的 animate 標簽來定義動畫。而為 canvas 或者 Webgl 實現動畫則需要通過 requestAnimationFrame (簡稱 raf) 來定期刷新畫布。盡管說 raf 的方式會讓代碼變得復雜，但是因為不需要那么多的文檔對象(通常瀏覽器只需要管理一個畫布)，它的性能也好很多，尤其是在內存吃緊的移動端上面。
通過新的 raf 接口以及一些改進手段我們也可以用JS來實現高性能的動畫。主要手段如下：
1. 減少 Dom 樣式屬性查詢，Dom 樣式屬性的查詢會導致頁面重排，從而消耗性能，通過將屬性保存在JS變量中就可以避免在動畫時去查詢，從而減少卡頓。
2. 使用性能更好的 css transform 替代改變絕對定位元素的定位屬性
3. 在移動設備上使用 3d 硬件加速，最簡單辦法就是添加 -Webkit-transform: translateZ(0)，原因是移動端的顯卡有很強的圖形渲染能力，而每個應用的 WebvieW 內存卻是極其有限的。
使用JS的動畫可控性更好，比如說通過事件捕捉可以很容易的設定不同參數。這方面做的最全面的有 Velocity.js，它可做為jquery 插件使用，對于初學者很友好。
學制學費
學習時間
近期活動
開班信息
課程內容
就業情況
津公網安備12011302141430
如何成為IT行業中有競爭力的人工智能工程師？
在當今數字化浪潮洶涌澎湃的時代，人工智能作為 IT 行業最具爆發力的領域之一，正重塑著世界的方方面面，從醫療保健到金融服務，從智能交通到娛樂產業，其影響力無處不在。若想成為這一充滿魅力與挑戰領域中的佼佼者 —— 極具競爭力的人工智能工程師，需要在多個維度精心打磨自己。