频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
WebAnimationsAPI(JS动画利器)
2017-08-10 09:47:02      个评论    来源:Visugar  
收藏   我要投稿

写在前面

之前学习了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动画有点类似但是有很多小区别,列如:

css3动画中用的时间单位为s,而wappi中使用的与setTimeout等定时器的单位及写法一致(单位为ms且可省略) waapi中关键帧的值传入的是字符串类型,与css3不一样。 waapi中不再有百分数,而是用offset来设置关键帧的位置。 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)。
打印正在执行的动画

然后发现除了上面这几个之外还有一些其他的属性及方法,再挑几个说一下:<喎"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:sql;"> 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
浏览器对waapi的支持

小结

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

 

点击复制链接 与好友分享!回本站首页
上一篇:web项目jdk mysql tomcat redis nginx memcache linux部署细节
下一篇:Vue-Cli、VSCode环境配置
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训

版权所有: 红黑联盟--致力于做实用的IT技术学习网站