Web Animation Api 入門

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

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

Web Animation Api 入門

在網(wǎng)頁中使用動畫提供了更好的用戶體驗，例如抽屜式菜單。

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

創(chuàng)建動畫

我們分別用css3和web animation api寫個簡單的demo用來展示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ù)組中的每個對象代表一個動畫狀態(tài)

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

控制動畫

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

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

Web Animation Api 提供如下方法：

pause() – 暫停動畫

play() – 播放動畫

reverse() – 反向播放

finish() – 立即結(jié)束動畫

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

具體使用方法請看Demo

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

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

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

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、安卓都不支持，詳情請查看Caniuse

對于不支持的可以是用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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83099.html

發(fā)表評論

登陸后可評論

0條評論

plus2047

男|高級講師

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

TA的文章

tensorflow例子

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

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

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

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

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

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

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Web Animation Api 入門

相關(guān)文章