TimelineMax：入门
TimelineMax是GASP的一部分，用于制作Web动画。使用TimelineMax可以控制“任何JavaScript可以触及到”的动画序列（如CSS属性和SVG），而且你不需要对JavaScript非常熟练。
本系列教程将从非常基础的知识开始讲起，介绍TimelineMax库和它的基础语法，再到mechanics、tweens、贝塞尔曲线以及很多很多东西。学习的过程中，我们将使用一些实际的demo来辅助大家学习。
什么是TimelineMax？它和其它的GreenSock动画平台（GSAP）的库有什么不同？为什么比起TimelineLite更需要TimelineMax？我该如何去理解TimelineMax的参数？如果你有以上的这些疑问，那你就来对地方了~
欢迎来到由GreenSock提供的讨论TimelineMax的Tut+平台系列基础教程。准备好足够热情，鞠个躬，然后就开始进入这个动画世界的大门吧。
什么是TimelineMax？
TimelineMax是一个JavaScript序列工具，可以充当补间或者其它时间轴的容器，从而更容易把它们作为一个整体来控制，也可以精确地管理它们的时序。TimelineMax提供的方法允许我们访问动画的多个层面。它还可以在运行的时候动态调整时间轴的速度，还有很多很多。
**注意：**tweening是inbetweening的缩写，在动画序列之间的状态创建帧。
TimelineMax是TimelineLite的扩展，提供完全相同的功能的基础上，增加了更多有用的（但非必需）功能，如：
repeatrepeatDelayyoyocurrentLabel()tweenTo()tweenFromTo()getLabelAfter()getLabelBefore()getActive()
优点及功能
TimelineMax允许你作为创作者，在时间轴上创建补间动画交叠，想创建多少就多少。作为动画工作者，你对这些补间放在时间轴的何处有完全的控制权。大多数其他的动画工具基本都可以执行基本的一帧接一帧的序列，但不允许补间动画交叠。想象一下，追加一个移动对象的补间，而且你希望它在补间结束之前的0.5秒开始淡出？有了强大的TimelineMax完全可以实现。
为了方便起见，像CSSPlugin（用于提供CSS前缀）、RoundPropsPlugin、DirectionalRotationPlugin、AttrPlugin和BezierPlugin这样的主要插件，都在TweenMax和TimelineMax中引入。因为TweenMax提供了TimelineMax和所有其它前面列出的东西，GreenSock在大多数使用示例中都建议使用TweenMax。加载TweenMax也非常方便，只需要引入一个文件，就包含了所有你需要的东西。
安装
首先，你需要得到TweenMax的脚本，然后把它加载到你的HTML文件中，放到你的自定义动画脚本前面。CDNJS为我们提供了副本（Github上也有托管）。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="my-timelinemax-animation.js"></script>
</body>
</html>
配置
TimelineMax允许通过使用对象字面量来自定义配置选项。我们来探讨一下它应该是什么样的。
TimelineMax(vars: {})
使用{}括起来的部分是对象字面量，用于放置我们的配置。也就是我们可以将key:value键值对插入大括号中，定义我们的时间轴。TimelineMax(vars: {})这一整句表示引用了TimelineMax文档中“构造器”。
这是整个TimelineMax的配置，每个key都指定了缺省值。把这一段放在你的JavaScript动画文件的前面（这就是我们上面的示例中写的my-timelinemax-animation.js文件中）。我们在这里只是列出了所有的配置，所以你可以看到TimelineMax提供的所有配置选项。通常情况下你的配置对象只需要包含用于调整的属性。你可以在TimelineMax文档中阅读更多关于这些选项的资料。
var tmax_options = {
delay: 0,
paused: false,
onComplete: function() {
console.log('animation is complete');
},
onCompleteScope: {},
tweens: [],
stagger: 0,
align: 'normal',
useFrames: false,
onStart: function() {
console.log('on start called');
},
onStartScope: {},
onUpdate: function() {
console.log('on update called');
},
onUpdateScope: {},
onRepeat: function() {
console.log('on repeat called');
},
onRepeatScope: {},
onReverseComplete: function() {
console.log('on reverse complete');
},
onReverseCompleteScope: {},
autoRemoveChildren: false,
smoothChildTiming: false,
repeat: 0,
repeatDelay: 0,
yoyo: false,
onCompleteParams: [],
onReverseCompleteParams: [],
onStartParams: [],
onUpdateParams: [],
onRepeatParams: []
};
现在你已经配置好了相应的内容，并理解了它都有哪些选项，你可以把你的自定义对象字面量传递给TimelineMax()构造器，所以把下面这行内容添加到你的文件底部：
var tmax_tl = new TimelineMax(tmax_options);
第一个动画
可以使用像to()、from()、staggerFrom()这些方法创建补间动画。正如你前面看到的，我们把我们的选项对象作为参数传递给TimelineMax构造器。现在我们需要移动几个对象来得到效果。为简单起见，我们从视图的左侧和顶部往反方向移动两个圆：
查看上面示例的JS标签页，看看效果是如何实现的。正如前面提到的，我为上述场景设置了TimelineMax构造器，并传入了包含时间轴选项的对象字面量：
tl = new TimelineMax(tmax_options)
每个圆都设置了id，便于我们引用：
var tl = new TimelineMax(tmax_options),
circle_top = $('#circle-top'),
circle_bottom = $('#circle-bottom');
然后to()方法用于控制补间。
tl.to(circle_top, 1, { left: 100 }).to(circle_bottom, 1, { top: 100 });
在to()中，我们通常说“使用作为第一个参数传递的元素，把它往右移动100px。然后使用to()方法，链在第一个to()方法之后，完成相同的工作，但是把元素往下移动100px。”
注意向下移动的圆是在前一个圆移动之后才移动的。我们将在接下来的教程中学习使用position参数，学习如何在不同时间控制元素，以及它沿着时间轴的速度。
接下来
如果你想在这次学习动画的过程中自由地选择学习顺序，可以去查看GreenSock的入门文档。请继续查看本次动画冒险的系列教程，我将会讲解到label、offset、pause、参数以及学习如何调整选项。下次见！
本文根据@Dennis Gaebel的《TimelineMax: A Primer》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/timelinemax-a-primer--cms-23064。
彦子
如需转载，烦请注明出处：https://www.fedev.cn/css3/timelinemax-a-primer.htmlAir Foamposite One