可以實現前端動畫的七種方法總結（附代碼）

本篇文章給大家帶來的內容是關於可以實現前端動畫的七種方法總結（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1、javascript直接實現

主要思想是通過setInterval或setTimeout方法的回呼函數來持續調用改變某個元素的CSS樣式以達到元素樣式變化的效果。

<div id="rect"></div>     <script>         let elem = document.getElementById('rect');         let left = 0;         let timer = setInterval(function(){             if(left<window.innerWidth-200){                 elem.style.marginLeft = left+'px';                 left ++;             }else {                 clearInterval(timer);             }         },16); </script>

缺點：javascript 實現動畫通常會導致頁面頻繁性重排重繪，消耗效能，一般應該在案頭端瀏覽器。在移動端上使用會有明顯的卡頓。

2、SVG（可伸縮向量圖形）；

3、CSS3 transition；

4、CSS3 animation；

5、Canvas動畫；

6、requestAnimationFrame；

requestAnimationFrame是另一種Web API，原理與setTimeout和setInterval類似，都是通過javascript持續迴圈的方法調用來觸發動畫動作。但是requestAnimationFrame是瀏覽器針對動畫專門最佳化形成的APi，在效能上比另兩者要好。

    <div id="rect"></div>  <script type="text/javascript"> window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;     let elem = document.getElementById("rect");     let left = 0;     //自動執行持久性回調     requestAnimationFrame(step);     //持續該改變元素位置     function step() {         if(left<window.innerWidth-200){             left+=1;             elem.style.marginLeft = left+"px";             requestAnimationFrame(step);         }     } </script>

7、jq動畫

1)顯示隱藏:

.show(ms) .hide(ms) .toggle(ms) 不帶參數時預設瞬間顯示隱藏，不帶動畫，原理: display屬性實現的，帶毫秒數參數: 會有動畫效果。

toggle顯示被隱藏的元素，並隱藏已顯示的元素

2）上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3）淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

2.萬能動畫:

$(…).animate(params,speed,callback)

params:一個包含樣式屬性及值的映射

speed:速度參數[可選]

callback：在動畫完成時執行的函數[可選]，回呼函數中的this，指現正播放動畫的當前DOM元素

8、總結

案頭端瀏覽器推薦使用javascript直接實現動畫或SVG方式；

移動端可以考慮使用CSS3transition、CSS3animation、Canvas或requestAnimationFrame方式