手淘用户这几天应该看到了年货节版本，不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画，而这个任务就落在了小生的头上，为了将.gif动效在移动端上实现，着实费劲。那么今天就来介绍这个动画效果是如何实现的？

我们来讨论一下如何给我们设计的作品添加动画，使其和我们品牌标志的某些层面的内容，如字体、颜色、布局以及其它各种东西保持一致。动画是非常有趣的。给我们的设计添加动画可以使其变得有生命，同时也让我们的设计脱颖而出。动画可以是展示设计是如何组合的一起的。它们可以提供上下文帮助大家理解我们的产品。动画往往是我们放在最后的策略。我们在一个模态窗口或滑动菜单上放一个过渡，但是我们通常都不会考虑这个动画是否符合我们整体的设计。

动画在Web上的运用到目前为止已不是新课题。大家常常能看到的Web动画有CSS动画、JavaScript动画、SVG动画和HTML5的Canvas动画。最近开始也有不少同学开始在探讨WebGL动画。随着年关将近，今天决定将Web上使用到的一些动画做一个资源整合(主要是为后期的工作做一些储备，因为未来的一段时间的工作主要会和动画交互关联在一起)。在这个集合中主要涵盖了动画的库、框架、教程和性能等。

CSS animations 用法简洁功能强大，一个完整的动画只需命名、@keyframes 关键帧定义以及绑定到元素三个步骤。虽然 CSS animations 的概念和用法比较简单，但却可以创造复杂精致的动画，比如多步过渡动画，这也是本文关注所要向您介绍的重点。

当你需要一些比较高级的功能的时候，GSAP的插件是非常棒的。我在这篇教程中介绍的BezierPlugin插件，可以使得几乎所有的属性沿着一条由一组点/值定义的贝塞尔曲线路径运动。在正式进入学习之前，我们需要先花点时间来学习贝塞尔曲线到底是什么，以及它是如何诞生的。

在这篇教程中，我们将学习如何控制动画，根据需求，使用一个叫做addPause()的方法。准备好了吗？开始吧！addPause()方法是一种控制方法，允许开发者在时间轴上的任何位置放置一个暂停。这比使用一个回调函数来暂停另一个函数要精确得多（这是在addPause()出现之前大家不得不采用的方法）。这个控制方法还可以插入一个特殊的回调，在特定的时间戳或标签暂停时间轴的播放。这样做有助于确保，如果虚拟播放指针稍微超过了暂停的位置，它可以回到那个设置暂停的位置。

在以前，动画Tweening是描述一帧一帧序列的术语，有时候也被称为in-between。放置在一个运动结束，要进行下一个运动前，中间创建一个流畅的过渡。年纪比较大的同学可能会记得Flash；这个应用程序在引用帧移动时使用了这个术语。我们先来仔细观察几个示例。

先来看一下一些名词定义？Mechanics的定义是：关注对象受力或位移的行为的区域，以及这些对象对周围环境的后续影响。时间轴是按照时间顺序显示事件序列的方法，有时候也被描述为a project artefact。我们结合这两块内容，学习如何控制和配置我们的动画，这样才知道我们要做什么。

TimelineMax是GASP的一部分，用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列（如CSS属性和SVG），而且你不需要对JavaScript非常熟练。本系列教程将从非常基础的知识开始讲起，介绍TimelineMax库和它的基础语法，再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中，我们将使用一些实际的demo来辅助大家学习。什么是TimelineMax？它和其它的GreenSock动画平台（GSAP）的库有什么不同？为什么比起TimelineLite更需要TimelineMax？我该如何去理解TimelineMax的参数？如果你有以上的这些疑问，那你就来对地方了~

我们前面已经讲解了很多内容，而且希望能够解决Web动画API到底是什么的问题。在总结这个系列时，我们将回顾一下我们已经讨论的内容，然后再看一下有哪些内容还没有实现的。