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。
如需转载,烦请注明出处:http://www.w3cplus.com/css3/timelinemax-a-primer.html