CSS动画VS. Web动画API

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了CSS动画VS. Web动画API脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!


众所周知,javascript有一个原生动画API,叫做Web Animations API。在接下来的文章中,我们将简称为WAAPI。

在本文中,我们将从各个方面来比较WAPPI和CSS中的动画。各位看官可自行判断其中哪个更好,哪个有所欠缺。

WAAPI的基础知识

如果你曾经使用jQuery .animate(),WAAPI的基本语法应该看起来很熟悉。

var element = document.querySelector('.animate-me');
element.animate(keyframes,1000);

animate方法接受两个参数:keyframes和duration。与jQuery不同的是,它不仅具有内置在浏览器中的优点,而且性能也更好。

第一个参数,keyframes应该是一个对象数组。每个对象都是我们动画中的一个keyframe。这是一个简单的例子:

var keyframes = [
{ opacity: 0 },
{ opacity: 1 }
];

第二个参数,duration,是我们想要动画持续多久。在上面的例子中是1000毫秒。我们来看一个更令人兴奋的例子。

#用WAAPI重新创建animista CSS动画

有一些被称为“模糊的幻灯片”入场动画的东西。看起来很可爱。

以下是CSS中的keyframes:

0% {
transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
transform-origin: 50% 0;
filter: blur(40px);
opacity: 0;
}
100% {
transform: translateY(0) scaleY(1) scaleX(1);
transform-origin: 50% 50%;
filter: blur(0);
opacity: 1;
}

WAAPI中的代码相同:

var keyframes = [
{
transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)',
transformOrigin: '50% 0',filter: 'blur(40px)',opacity: 0
},
{
transform: 'translateY(0) scaleY(1) scaleX(1)',
transformOrigin: '50% 50%',
filter: 'blur(0)',
opacity: 1
}
];

我们已经看到将keyframes应用到要动画的任何元素是多么容易:

element.animate(keyframes,700);

为了简单起见,我只指定了duration。但是,我们可以使用这个第二个参数来传递更多的选项。至少我们也应该指定一个easing。以下是可用选项的完整列表,其中包含一些示例值:

var options = {
iterations: Infinity,
iterationStart: 0,
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 700,
fill: 'forwards',
easing: 'ease-out',
}
element.animate(keyframes,options);

有了这些选项,我们的动画将从头开始,没有任何延迟,循环永远在向前和向后播放。

点我查看代码以及效果!!!

更多请点击这里:http://igeekbar.com/igeekbar/post/245.htm

总结

以上是脚本之家为你收集整理的CSS动画VS. Web动画API全部内容,希望文章能够帮你解决CSS动画VS. Web动画API所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:前端