這篇文章主要介紹實現web前端動畫的方法有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、成都網站建設、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的桓臺網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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元素

以上是實現web前端動畫的方法有哪些的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯網站制作公司行業資訊頻道！

文章名稱：實現web前端動畫的方法有哪些-創新互聯
當前路徑：http://www.yijiale78.com/article16/cspjdg.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、云服務器、企業建站、App設計、外貿建站、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯