這篇文章主要介紹了javascript?中動(dòng)畫(huà)制作方法?animate()屬性，animate是所有dom元素都有的方法，可以用來(lái)最做過(guò)度動(dòng)畫(huà)，關(guān)鍵幀動(dòng)畫(huà)，下面文章的相關(guān)介紹需要的小伙伴可以參考一下

animate是個(gè)非常冷門的方法，以至于百度和手冊(cè)上都找不到相關(guān)的資料。當(dāng)然通過(guò)一個(gè)小小的demo，我還是發(fā)現(xiàn)了方法的一些屬

animate是所有dom元素都有的方法，可以用來(lái)最做過(guò)度動(dòng)畫(huà)，關(guān)鍵幀動(dòng)畫(huà)。這個(gè)方法可以更方便的讓我們制作動(dòng)

animate共有兩個(gè)參數(shù) (很可惜似乎沒(méi)有回調(diào)函數(shù)，沒(méi)發(fā)現(xiàn))

關(guān)鍵幀 (參數(shù)可以是數(shù)組或?qū)ο?，?shù)組內(nèi)包裹的也必須是對(duì)象)
對(duì)象里的屬性就是css屬性和值了

動(dòng)畫(huà)屬性設(shè)置 {參數(shù)數(shù)字或者對(duì)象}

目前發(fā)現(xiàn)的屬性有以下：

duration：動(dòng)畫(huà)時(shí)長(zhǎng) (單位毫秒)
iterations ：重復(fù)次數(shù)(默認(rèn)1) 數(shù)字（無(wú)限循環(huán)：‘Infinity’） [非必須]
fill ：結(jié)束時(shí)復(fù)位 [不復(fù)位：forwards, 復(fù)位(默認(rèn)值)：none] [非必須]
delay ：設(shè)置動(dòng)畫(huà)延遲時(shí)長(zhǎng) (單位毫秒) [非必須]
easing ：設(shè)置動(dòng)畫(huà) 運(yùn)動(dòng)速率 [esse(默認(rèn))：慢-快-慢，linear: 勻速， ease-in: 慢-勻速， ease-in-out 慢-勻速-慢] [非必須]

通過(guò)兩個(gè)案例說(shuō)明一下:

過(guò)度動(dòng)畫(huà)即第一個(gè)參數(shù)直接為對(duì)象{}

<div id="box" style=”width: 200px;height: 200px;background: red;border-radius:50% 50% 0 0;”></div>

    <script>
            // 獲取元素對(duì)象
       var box = document.getElementById("box");

 		box.animate(
        { // 對(duì)象
           transform:'rotate(360deg)'
        },
        { 
            duration: 1000,  //  動(dòng)畫(huà)時(shí)長(zhǎng)  (單位毫秒)
            easing:'linear',		// 平滑
            iterations: Infinity,  //  重復(fù)次數(shù)  （無(wú)限循環(huán)：Infinity）
            
        },
       ); 
 </script>

第二個(gè)小盒子移動(dòng)，第一個(gè)參數(shù)是數(shù)字，數(shù)組包裹著對(duì)象(每個(gè)對(duì)象就算一個(gè)關(guān)鍵幀)[{},{}]

<style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background: red;
			position: absolute;
			border-radius:50% 50% 0 0;
        }
</style>
<div id="box"></div>
<script>
      box.animate(
        [  //關(guān)鍵幀（數(shù)組包裹對(duì)象）
        		{transform:'translate3d(0px, 0px, 0)',opacity:'1'},     // 第一幀
        		{transform:'translate3d(50px, 0px, 0)',opacity:'.8'},   // 第二幀
     		{transform:'translate3d(150px, 100px, 0)',opacity:'.5'}, // 第三幀
        ],
        { 
            duration: 1000,  //  動(dòng)畫(huà)時(shí)長(zhǎng)  (單位毫秒)
            iterations: 1,  //  重復(fù)次數(shù)  （無(wú)限循環(huán)：Infinity）
            fill:'forwards',  //結(jié)束時(shí)不復(fù)位
            delay:0,   // 設(shè)置動(dòng)畫(huà)延遲時(shí)長(zhǎng) (單位毫秒)
            easing:'linear'  //設(shè)置動(dòng)畫(huà) 運(yùn)動(dòng)速率  (linear: 勻速)
        },
       );
</script>

到此這篇關(guān)于javascript 中動(dòng)畫(huà)制作方法 animate()屬性的文章就介紹到這了,更多相關(guān)javascript animate()屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: