原文地址:→传送门

写在前面

之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以说是动效。CSS动画君居然强大,但是缺陷也很多啊,有的时候没法满足要求,定时器用在动画中就更不使用了,但是requestAnimationFrame也是个很强大的东西,具体详情移步到window.requestAnimationFrame关于动画,你需要知道的requestAnimationFrame-张鑫旭这几篇文章。下面做的笔记是关于Web Animations API (WAAPI)的,也就是js中的animate。

web animations API

对于waapi,可能大家对css animation更熟悉,下面先看下css animation的用法:

.item1{
animation: rotate 4s inifite ease running;
}
@keyframes rotate{
from{
transform:rotate(0);
}
to{
transform:rotate(360deg);
}
}
或者
@keyframes rotate{
0%{
transform:rotate(0);
background-color:red;
}
40%{
background-color:blue;
}
100%{
transform:rotate(360deg);
background-color:red;
}
}

平时用的较多的是百分比类型的,可以定义多个关键帧。下面来看看waapi版本的:

var ani1 = [
{transform:'rotate(0)',backgroundColor:'red'},
{backgroundColor:'blue',offset:0.4},
{transform:'rotate(360deg)',backgroundColor:'red'}
];
var aniOpt1 = {
duration:4000,
iterations:Infinity,
easing:'ease-in-out'
}; document.querySelector(".item1").animate(ani1,aniOpt1);

Element.animate() 元素调用后会立即执行。跟css3动画有点类似但是有很多小区别,列如:

  1. css3动画中用的时间单位为s,而wappi中使用的与setTimeout等定时器的单位及写法一致(单位为ms且可省略)
  2. waapi中关键帧的值传入的是字符串类型,与css3不一样。
  3. waapi中不再有百分数,而是用offset来设置关键帧的位置。
  4. css3动画中animation-duration变为duriation,animation-iteration-count则变成iterations,且其无限次的值由字符串'infinite'变成关键字Infinity。等等还有其他一些元素的改变,从单词来讲变得更简洁了。

如果只需设置duration属性,则可采用下面这种更简洁的方式:

document.querySelector(".item1").animate(ani1,4000);

document.animate()可以应用在任何可以使用CSS动画的DOM元素上,下面是几个waapi更强大的控制方法:

play(),pause(),reverse()和playbackRate控制播放

var rotateAni = document.querySelector(".item1").animate(ani1,aniOpt1);
rotateAni.play() //播放
rotateAni.pause() //暂停

注:在动画执行的时候可以在控制台打印下rotateAni,能够看到rotateAni所带的一些属性值及原型上的方法(此时playbackRate的值为1)。

然后发现除了上面这几个之外还有一些其他的属性及方法,再挑几个说一下:

finish()  //对于有限次的动画而言,直接停止动画,且跳到动画结束位置
cancel() //取消动画过程,直接跳到动画的开始位置
reverse() //让动画反向执行到动画执行的原点,会将playbackTate从1变成-1

playbackRate属性

reverse()方法可将playbackRate的值改变。如果手动将playbackRate改成一个0-1之间的数值,则可将动画慢下来。设成大于1的值则可使动画加速。

获取动画信息

还有一些方法尚在实验中额,等浏览器可支持后再用起来。。。

wappi的事件监听

onfinish:用于注册完成事件,当调用finish()方法是也可以触发。
oncancel:用于注册取消事件,当调用cancel()方法是也可以触发。 rotateAni.onfinish = function(){
doSomething();
}
rotateAni.oncancel = function(){
doSomething();
}

浏览器支持度

一图胜前言can i use

小结

  1. 由于目前浏览器支持度不算高,所以呢还是要慎用。
  2. 在现代浏览器中,使用wappi可以做出很酷的动画,可以多试试。
  3. 本文也只算是学习笔记,所以欢迎大佬们指点额~

参考资料

Web Animations API (JS动画利器)的更多相关文章

  1. 【翻译】CSS Animations VS the Web Animations API:案例学习

    原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...

  2. Web Animations API & SVG & requestAnimationFrame

    Web Animations API WWAPI https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API https:/ ...

  3. Web高性能动画及渲染原理(1)CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  4. 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  5. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  6. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  7. 【Web Audio API】 — 那些年的 web audio

    转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...

  8. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  9. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

随机推荐

  1. Android 串口设置校验位、速率、停止位等参数

    Android 串口通讯设置校验位.速率.停止位等参数 最近业余时间有个android项目需要和硬件进行通信,通讯方式都是通过串口,android串口通讯google有个开源的demo 和很多人一样我 ...

  2. strval

    将变量转成字符串类型. 语法: string strval(mixed var); 返回值: 字符串 函数种类: PHP 系统功能   内容说明 本函数可将数组及类之外的变量类型转换成字符串类型.   ...

  3. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  4. 【Android Developers Training】 90. 序言:解决云储存冲突

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  5. Linux进阶命令-sort、uniq、 cut、sed、grep、find、awk

    命令难度总体来说有简入难,参数都是工作中常常用到的.如果涉及到一些生僻的参数还请百度或man一下. sort(参考学习网站:http://www.cnblogs.com/dong008259/arch ...

  6. Python3组合数据类型(元组、列表、集合、字典)语法

    一.序列类型(字符串,元组(),列表[]) 序列类型支持in,len(),分片[],迭代,5种内置序列类型:bytearray,bytes,list,str,tuple(元组). 1.元组可以嵌套(如 ...

  7. centos 7 yum方式安装MySQL 5.6

    本文根据mysql的官方文档操作:https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 由于Centos7 默认数据库是mariabd(网上 ...

  8. Java通过Axis2发布WebService

    参考文档: http://blog.csdn.net/ghsau/article/details/12714965 http://www.iteye.com/topic/1135747 http:// ...

  9. 跳跳棋(9018_1563)(BZOJ_2144)

    题目: Hzwer的跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 某一天,黄金大神和cjy用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.他们要 ...

  10. 基于PlatinumKit库的DLNA服务端开发

    首先,需要特别感谢蓝斯老师的资料,我这里有很大一部分是参考蓝斯老师的,附上传送门:http://blog.csdn.net/lancees/article/details/9178385 一.DLNA ...