Web Animation Api 入门

Sunxb 发布于2019-08-29 12:37 / 2646人阅读

摘要：入门在网页中使用动画提供了更好的用户体验，例如抽屉式菜单。目前为止，动画可以通过，或者其他的动画库，现在我们可以使用编写更加自由的动画，那就是。创建动画我们分别用和写个简单的用来展示的特性。

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前端怎样入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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