這篇文章主要介紹實(shí)現(xiàn)web前端動(dòng)畫的方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的桓臺(tái)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1、javascript直接實(shí)現(xiàn)

主要思想是通過setInterval或setTimeout方法的回調(diào)函數(shù)來持續(xù)調(diào)用改變某個(gè)元素的CSS樣式以達(dá)到元素樣式變化的效果。

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

缺點(diǎn)：javascript 實(shí)現(xiàn)動(dòng)畫通常會(huì)導(dǎo)致頁面頻繁性重排重繪，消耗性能，一般應(yīng)該在桌面端瀏覽器。在移動(dòng)端上使用會(huì)有明顯的卡頓。

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

3、CSS3 transition；

4、CSS3 animation；

5、Canvas動(dòng)畫；

6、requestAnimationFrame；

requestAnimationFrame是另一種Web API，原理與setTimeout和setInterval類似，都是通過javascript持續(xù)循環(huán)的方法調(diào)用來觸發(fā)動(dòng)畫動(dòng)作。但是requestAnimationFrame是瀏覽器針對(duì)動(dòng)畫專門優(yōu)化形成的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;
 
    //自動(dòng)執(zhí)行持續(xù)性回調(diào)
 
    requestAnimationFrame(step);
 
    //持續(xù)該改變?cè)匚恢? 
    function step() {
 
        if(left<window.innerWidth-200){
 
            left+=1;
 
            elem.style.marginLeft = left+"px";
 
            requestAnimationFrame(step);
 
        }
 
    }
 
</script>

7、jq動(dòng)畫

1)顯示隱藏:

.show(ms) .hide(ms) .toggle(ms) 不帶參數(shù)時(shí)默認(rèn)瞬間顯示隱藏，不帶動(dòng)畫，原理: display屬性實(shí)現(xiàn)的，帶毫秒數(shù)參數(shù): 會(huì)有動(dòng)畫效果。

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

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

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

2.萬能動(dòng)畫:

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

params:一個(gè)包含樣式屬性及值的映射

speed:速度參數(shù)[可選]

callback：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)[可選]，回調(diào)函數(shù)中的this，指正在播放動(dòng)畫的當(dāng)前DOM元素

以上是實(shí)現(xiàn)web前端動(dòng)畫的方法有哪些的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章名稱：實(shí)現(xiàn)web前端動(dòng)畫的方法有哪些-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.rwnh.cn/article16/cspjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、企業(yè)建站、App設(shè)計(jì)、外貿(mào)建站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)