Web Animation Api 入門(mén)

plus2047 發(fā)布于2019-08-20 16:42 / 3417人閱讀

摘要：入門(mén)在網(wǎng)頁(yè)中使用動(dòng)畫(huà)提供了更好的用戶(hù)體驗(yàn)，例如抽屜式菜單。目前為止，動(dòng)畫(huà)可以通過(guò)，或者其他的動(dòng)畫(huà)庫(kù)，現(xiàn)在我們可以使用編寫(xiě)更加自由的動(dòng)畫(huà)，那就是。創(chuàng)建動(dòng)畫(huà)我們分別用和寫(xiě)個(gè)簡(jiǎn)單的用來(lái)展示的特性。

Web Animation Api 入門(mén)

在網(wǎng)頁(yè)中使用動(dòng)畫(huà)提供了更好的用戶(hù)體驗(yàn)，例如抽屜式菜單。

目前為止，web動(dòng)畫(huà)可以通過(guò)css3 transitions，css3 keyframes或者其他的動(dòng)畫(huà)庫(kù)（animate.css、Velocity、tween），現(xiàn)在我們可以使用js編寫(xiě)更加自由的web動(dòng)畫(huà)，那就是web animation。

創(chuàng)建動(dòng)畫(huà)

我們分別用css3和web animation api寫(xiě)個(gè)簡(jiǎn)單的demo用來(lái)展示web animation的特性。

Demo

css方法

var square = document.getElementById("square");
    
square.addEventListener("click", function() {
    square.className += " animate";
});

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {
        transform: translateX(0);
    }

    80% {
        transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {
        transform: translateX(100px);
        background-color: #EF5350;
    }
}

Web Animation方法

var moveAndChangeColor = [
    { 
        transform: "translateX(0)",
        background: "#2196F3"    // blue
    },
    { 
        offset: 0.8,
        transform: "translateX(100px)", 
        background: "#2196F3"    // blue
    },
    {
        transform: "translateX(100px)",
        background: "#EF5350"    // red
    }
]; //數(shù)組中的每個(gè)對(duì)象代表一個(gè)動(dòng)畫(huà)狀態(tài)

var circle = document.getElementById("circle");
  
circle.addEventListener("click", function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: "forwards"
    });
});

控制動(dòng)畫(huà)

通過(guò)上面的例子可以簡(jiǎn)單的對(duì)比出，css3方法局限性較大，并不適合復(fù)雜的動(dòng)畫(huà)，也不易于控制，而Web Animation Api適合復(fù)雜動(dòng)畫(huà)，并且易于控制。

var animation = elem.animate(transitions, options);

Web Animation Api 提供如下方法：

pause() – 暫停動(dòng)畫(huà)

play() – 播放動(dòng)畫(huà)

reverse() – 反向播放

finish() – 立即結(jié)束動(dòng)畫(huà)

cancel() – 取消動(dòng)畫(huà)并回到初始狀態(tài)

具體使用方法請(qǐng)看Demo

屬性和事件監(jiān)聽(tīng)

動(dòng)畫(huà)運(yùn)行的過(guò)程中會(huì)通過(guò)animate返回動(dòng)畫(huà)屬性對(duì)象，比如動(dòng)畫(huà)播放速率-playbackrate，移步Demo

此外，我們還可以監(jiān)聽(tīng)finish和cancel事件做點(diǎn)其他有意義的事情

spinnerAnimation.addEventListener("finish", function() {
    // Animation has completed or .finish() has been called.
    doSomething();
});

spinnerAnimation.addEventListener("cancel", function() {
    // Animation has been canceled.    
    doSomething();
});

兼容性

大部分chrome、firefox都支持Web Animation Api，其他的例如ios、安卓都不支持，詳情請(qǐng)查看Caniuse

對(duì)于不支持的可以是用polyfill

相關(guān)資料

Using the Web Animations API

Animatelo

Let’s talk about the Web Animations API

原文地址

Getting Started With The JavaScript Web Animation API

GPU云服務(wù)器云服務(wù)器 web前端入門(mén) Animation web后端入門(mén) web前端怎樣入門(mén)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83099.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

plus2047

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow例子

閱讀 1342·2023-04-26 00:10
如何搭建云主機(jī)-新睿云云主機(jī)怎么搭建網(wǎng)站？

閱讀 2437·2021-09-22 15:38
主機(jī)的用戶(hù)名和密碼是什么-怎樣找回電腦的用戶(hù)名和密碼？

閱讀 3802·2021-09-22 15:13
頁(yè)面頂部背景圖片如何設(shè)置上半部分為毛玻璃效果

閱讀 3518·2019-08-30 13:11
前端核心工具：yarn、npm、cnpm三者如何優(yōu)雅的在一起使用？

閱讀 655·2019-08-30 11:01
CSS中重要的BFC

閱讀 3040·2019-08-29 14:20
CSS盒模型 - 官方文檔總結(jié)

閱讀 3220·2019-08-29 13:27
sass學(xué)習(xí)總結(jié)的幾點(diǎn)

閱讀 1734·2019-08-29 11:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Web Animation Api 入門(mén)

相關(guān)文章