Web Animation Api 入門

Sunxb 發布于2019-08-29 12:37 / 2643人閱讀

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

Web Animation Api 入門

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

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

創建動畫

我們分別用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
    }
]; //數組中的每個對象代表一個動畫狀態

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

控制動畫

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

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

Web Animation Api 提供如下方法：

pause() – 暫停動畫

play() – 播放動畫

reverse() – 反向播放

finish() – 立即結束動畫

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

具體使用方法請看Demo

屬性和事件監聽

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

此外，我們還可以監聽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

相關資料

Using the Web Animations API

Animatelo

Let’s talk about the Web Animations API

原文地址

Getting Started With The JavaScript Web Animation API

GPU云服務器云服務器 web前端入門 Animation web后端入門 web前端怎樣入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112028.html

Web Animation Api 入門

摘要：入門在網頁中使用動畫提供了更好的用戶體驗，例如抽屜式菜單。目前為止，動畫可以通過，或者其他的動畫庫，現在我們可以使用編寫更加自由的動畫，那就是。創建動畫我們分別用和寫個簡單的用來展示的特性。 Web Animation Api 入門在網頁中使用動畫提供了更好的用戶體驗，例如抽屜式菜單。目前為止，web動畫可以通過css3 transitions，css3 keyframes或者其...

plus2047 2019-08-20 16:42 評論0 收藏0
2017-06-29 前端日報

摘要：前端日報精選如何在非項目中使用知乎專欄編碼規范最常被遺忘的性能優化瀏覽器緩存個人文章譯統一樣式語言掘金新的開發者提及最多的個視頻眾成翻譯中文第期在中使用譯統一樣式語言掘金前端現狀答題救不了前端新人相學長懟前端歲以 2017-06-29 前端日報精選如何在非 React 項目中使用 Redux - 知乎專欄Javascript編碼規范 - Clearlove - SegmentFau...

gaosboy 2019-08-20 17:37 評論0 收藏0
【譯】React Native 動畫 API 入門實例

摘要：簡而言之，它將對動畫中變化的屬性數值做插值運算并且刷新視圖。注意我們所建立的的是的一個實例。最后我們使用，表示這個組件是可動畫組件。一直不停動動畫序列的方法可以傳一個回調函數，在動畫全部執行完時觸發。翻譯自 React-native Animated API Basic Example 翻譯過程中有刪改簡介本文是探索 react-native 中實現的的 Animated AP...

qianfeng 2019-08-19 17:54 評論0 收藏0
2017-07-05 前端日報

摘要：前端日報精選你可能不知道的前端知識點譯在服務端渲染的實現掘金小前端創建或文件并瀏覽器導出下載張鑫旭鑫空間鑫生活代理服務器淺析知乎專欄快速打造簡易高效的配置掘金中文譯組件解耦之道楓上霧棋的日志第期什么樣的工程師才能算老司機 2017-07-05 前端日報精選你可能不知道的前端知識點[譯] React 在服務端渲染的實現 - 掘金小tip:JS前端創建html或json文件并瀏覽器導出...

ISherry 2019-08-20 17:46 評論0 收藏0
程序員練級攻略（2018）：前端 UI/UX設計

摘要：前端還有一個很重要的事就是設計。，中文版譯名為認知與設計理解設計準則。實驗室是布拉德弗羅斯特依照這個設計系統所建立的一套工具，可以前往的來試試。中文翻譯為流暢設計體系，是微軟于年開發的設計語言。微軟于年月日的開發者大會上公開了該設計體系。 showImg(https://segmentfault.com/img/bVbkgFI?w=1142&h=640); 想閱讀更多優質文章請猛戳Gi...

dongfangyiyu 2019-08-02 12:09 評論0 收藏0