现代 CSS

TimelineMax：入门

作者：彦子 日期：2015-11-08 点击：12399
TimelineMax
GSAP
Animation

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

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的扩展，提供完全相同的功能的基础上，增加了更多有用的（但非必需）功能，如：

  • repeat
  • repeatDelay
  • yoyo
  • currentLabel()
  • 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。

彦子

在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/timelinemax-a-primer.htmlAir Foamposite One

返回顶部