ES6 动画

ES6（也称为ES2015）是ECMAScript标准的第六版，它于2015年发布。它引入了许多新的功能，旨在让JavaScript更加简洁、可读、可维护和功能强大。在ES6中，我们可以使用现代JavaScript实现流畅的动画效果。

CSS3 动画

在介绍ES6动画之前，我们先来了解一下CSS3动画。CSS3动画是通过将CSS属性从一个值过渡到另一个值来实现的。我们可以使用@keyframes规则指定动画序列，然后使用animation属性应用该序列。下面是一个简单的CSS3动画示例：

@keyframes example {
  0% {opacity: 0;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}

div {
  animation: example 2s linear infinite;
}

这个动画将使一个div元素从完全透明到完全不透明，在2秒钟内重复循环。

使用ES6实现动画

虽然我们可以使用CSS3动画实现动画效果，但它们有一些限制。例如，我们不能在CSS3动画中更改对象的位置或旋转。另外，CSS3动画需要浏览器支持。

为了解决这些问题，我们可以使用ES6中的requestAnimationFrame方法。该方法可以让我们将动画回调函数挂钩到浏览器的绘图刷新时钟上，从而保证动画的流畅性，并且可以改变元素的属性。

下面是一个使用ES6实现动画的示例：

function animate() {
  let element = document.getElementById('box');
  let position = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (position == 350) {
      clearInterval(id);
    } else {
      position++;
      element.style.top = position + 'px';
      element.style.left = position + 'px';
    }
  }
}

document.getElementById('btn').addEventListener('click', animate);

在这个示例中，我们首先获取了一个元素box和一个按钮元素btn。当按钮被单击时，动画将启动。我们使用setInterval方法创建了一个定时器，计划在每10毫秒执行一次frame函数。在frame函数中，我们使用position变量来跟踪元素的位置，并更新top和left CSS属性。

总结

ES6为JavaScript带来了许多有用的功能，其中之一就是requestAnimationFrame方法，它可以让我们更轻松地实现流畅的动画效果。ES6动画比CSS3动画更灵活，并且在不支持CSS3动画的浏览器中也可以正常工作。如果您想要了解更多如何使用ES6开发动画的知识，请参阅相关的ES6动画教程。