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

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

1、javascript直接實作

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

<div id="rect"></div>
 
    <script>
 
        let elem = document.getElementById(&#39;rect&#39;);
 
        let left = 0;
 
        let timer = setInterval(function(){
 
            if(left<window.innerWidth-200){
 
                elem.style.marginLeft = left+&#39;px&#39;;
 
                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方式

相關推薦：

##前端開發中的SVG動畫

#Mobile Web 前端開發CSS動畫經驗分享_html/css_WEB-ITnose

行動端 動畫函數的封裝_html/css_WEB-ITnose

以上是可以實現前端動畫的七種方法總結（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！