隨著互聯網的普及和技術的不斷發展,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 行業最具爆發力的領域之一,正重塑著世界的方方面面,從醫療保健到金融服務,從智能交通到娛樂產業,其影響力無處不在。若想成為這一充滿魅力與挑戰領域中的佼佼者 —— 極具競爭力的人工智能工程師,需要在多個維度精心打磨自己。