使用ES6实现动画

随着新标准ES6的普及，越来越多的前端应用在使用ES6来开发动画，本文将讲解如何使用ES6实现动画。

动画基础

动画的本质是在某个时间间隔内改变对象的属性，从而达到可视化的效果。在Web开发中，我们最常用的是改变元素的样式(比如位置，大小等)，因此我们可以利用JS来实现这些效果。

实现动画

关键帧动画(Animation)

ES6引入了一个新的APIAnimation来实现动画。使用该API可以通过在该时间线上的关键帧来实现动画效果。

const keyframes = [
  { opacity: 0, transform: 'translateX(-100%)' },
  { opacity: 1, transform: 'translateX(0%)' }
];

const options = {
  duration: 1000,
  iterations: Infinity
};

const animation = elem.animate(keyframes, options);

在上述代码中，我们首先声明keyframes数组，然后定义动画的选项(options)，其中设置了动画的持续时间(duration)和循环次数(iterations)。最后使用animate方法来传递上述选项以及关键帧数组来实现该动画。

时间线动画(Timeline)

TimeLine API是用来联合多个动画实例的。我们可以利用时间线让多个动画同时或者顺序播放。

// 定义关键帧动画

const keyframes1 = [
  { transform: 'rotate(0)' },
  { transform: 'rotate(-360deg)' }
];

const keyframes2 = [
  { transform: 'scale(1)' },
  { transform: 'scale(2)' }
];

// 定义动画选项

const options = {
  duration: 1000,
  easing: 'ease-in-out',
  fill: 'forwards'
};

// 定义动画

const animation1 = document.getElementById('js-animation').animate(keyframes1, options);
const animation2 = document.getElementById('js-animation').animate(keyframes2, options);

// 定义时间线

const timeline = new TimelineMax();

// 添加动画到时间线

timeline.add(animation1, 0);
timeline.add(animation2, 0.3);

// 播放动画

timeline.play();

在上面的代码中，我们定义了两个关键帧动画keyframes1和keyframes2，每个动画都有相同的选项。然后我们使用animate方法来为每个动画创建一个实例，使用new TimeLineMax()来创建一个时间线，并在其中添加动画实例，最后通过调用时间线的play方法来播放动画。

常用的动画库

为了方便开发，我们可以使用一些动画库，比如TweenMax，Velocity.js等。这些动画库具有更多的特性，可以更快速的实现动画效果。

下面是一个例子，展示如何使用TweenMax来实现一个简单的缩放动画。

TweenMax.to('.box', 1, { scale: 1.5 });

上面的代码中，我们将 1 秒内 .box 元素的 scale 属性从 1 缩放到 1.5。

总结

本文介绍了如何使用ES6或动画库来实现动画效果。当然，实现动画除了技术方面的知识，还需要一定的设计理念，需要慢慢摸索，才能得到较好的效果。