TimelineMax:入门

发布于 彦子

TimelineMaxGASP的一部分,用于制作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前缀)、RoundPropsPluginDirectionalRotationPluginAttrPluginBezierPlugin这样的主要插件,都在TweenMaxTimelineMax中引入。因为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的入门文档。请继续查看本次动画冒险的系列教程,我将会讲解到labeloffsetpause、参数以及学习如何调整选项。下次见!

本文根据@Dennis Gaebel的《TimelineMax: A Primer》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/timelinemax-a-primer--cms-23064

彦子

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

如需转载,烦请注明出处:https://www.fedev.cn/css3/timelinemax-a-primer.htmlAir Foamposite One