众所周知,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