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
相关推荐
Ladyseven 2020-10-22
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18