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