TimelineMax: 理解Mechanics

发布于彦子

9 年前

TimelineMax

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

语法

更多的定义来了：语法一词是指直接管理结构的规则和原则。正如我们的前面的教程讨论的，设置TimelineMax动画的JavaScript语法如下：

var config = {};
var tmax_tl = new TimelineMax(config);

在这里我使用TimelineMax()构造器定义了一条新的时间轴，并把config对象作为一个参数传递给它。这个参数，如果你还记得，是被称为包含配置设置的key:value键值对的“对象字面量”。TimelineMax()构造器用来实例化一个新的TimelineMax实例。

当你熟悉了语法之后，下面的这行也是一样的；也就意味着这两句也是一样的（最后一行是为了方便）。

tmax_tl.add(TweenLite.to(element, 1, { left: 100, opacity: 0.5 }));
tmax_tl.to(element, 1, { left: 100, opacity: 0.5 });

配置和属性

如果你和我一样，你可能不会去记住所有TimelineMax配置选项的参数。幸好，配置选项和属性的完整列表可以在这里找到，直接参考使用即可。

除了实际的配置，我们的时间轴也有可用的属性。例如，如果我这样写：

var config = { repeat: -1, delay: 1, repeatDelay: 0 };
var tmax_tl = new TimelineMax(config);
console.log(tmax_tl.vars);

控制台就会将整个config变量（通过tmax_tl.vars显示）作为一个对象打印出来，并允许检查每个已经设置的键/值。针对时间轴还有一个可用的属性列表，你可以点击这里进行进一步探索。

为了增加趣味，我们尝试一下，然后在你的Devtools控制台查看输出：

console.log(tmax_tl.timeline);

你看到的应该和是下面的截图类似的输出：

TimelineMax

尝试在控制台中输出以下这个属性，然后查看（控制台应该会输出一个数值）：

console.log(tl.timeline._timeScale);

位置参数

创建令人惊叹的的动画序列、以及具有精确的时间控制的关键在于理解位置参数。这个参数非常灵活，可以控制补间、标签、回调、暂停甚至嵌套时间轴的位置，也就是说你可以控制所有东西，在任何地方，以任何的序列！

例如，如果我们看看下面的代码，你会看到位置参数是to()方法的最后一个参数。

tmax_tl.to( target, duration, vars, position )

这有一个完整的代码示例。密切注意注释部分，解释了位置参数如何将序列排好。我们还把方法一个接一个放置：也就是所说的链式。

tmax_tl.to(element, 1, { x:200 })
   .to(element, 1, { y:200 }, '+=1') // 在前一个to()补间结束之后1s
   .to(element, 1, { rotation:360 }, '-=0.5') // 前一个to()补间结束之前0.5s
   .to(element, 1, { scale:4 }, 6); // 从时间轴的第6s开始

你可以把位置参数当成控制时间轴上补间位置的一个方法（默认情况下，把它放置在时间轴的末端，表示为'+=0'）。使用数字来表示绝对时间，以秒为单位。'+='或'-='这些前缀表示相对于时间轴末端的插入点。例如，'+=2'表示把补间放到时间轴末端的两秒之后的位置，中间有一个两秒的空隙。

实践挑战及说明，帮助你从GreenSock起步

访问CodePen上动画入门文件的可编辑版本。
点击fork按钮，获取副本。
根据代码中标注的说明。
完成之后，把CodePen链接到@GreenSock。

//补间动画相对于标签的位置插入
var tmax_tl = new TimelineMax();
 
tmax_tl.to('#green', 1, { x: 750 }) // 在green序列结束后1s的位置插入blueGreenSpin标签
    .add('blueGreenSpin', '+=1')
       .to('#blue', 2, { x: 750, rotation: 360 }, 'blueGreenSpin') // 在blueGreenSpin插入标签
       .to('#orange', 2, { x: 750, rotation: 360 }, 'blueGreenSpin+=0.5'); // 在blueGreenSpin标签之后0.5s的位置插入补间

**注意：**大多数方法使用0作为位置参数的默认值（表示为'+=0'）。

如果你定义了一个不存在的标签，在插入补间之前会自动把标签添加到时间轴的末尾，非常方便。

方法

方法可以帮忙完成我们希望的一些操作，换句话说，就是那些我们希望在时间轴上的每个序列发生的动作。

为了科学起见，我们写一个带有id为#objectA的对象的方法，然后把它移动到屏幕的右侧。这是使用to()方法写出的代码：

/*
.to(target:[Object||Array], duration:Number, vars:Object, position:* )
*/
tmax_tl.to($('#objectA'), 1, { left: '100px' });

上面的代码有个重点是，我们需要CSS的帮忙（position:absolute），为了实现我们的需求（移动对象）。Web上的元素有静态定位，也就是说如果你要使用上述方法移动一个对象，你需要确保相应的CSS属性已经到位，否则不会有相应的效果的。

还有？

学习到这里，跃跃欲试了吗？如果有什么东西可以剖析一下就好了，对吧？

下面的Demo使用了to()方法来控制loader的每个圆（你可以使用更简单的方法，但有一个点会比较癫狂）。尝试使用位置时间参数，让外部圆和中间圆的运动错开。这个练习的要点在于如何设置位置参数，让序列间的补间交叠。如下面的.gif所示，每个圆的动画补间都是同时的。尝试给这个动画一些添加一些内容，通过让序列交叠，如本文开头的动图gif那样。好运~

// 最后一个参数是位置时间参数Position Timing.
// 使用这些参数来是外部圆和中间圆的运动错开
tmax_tl.to($('svg > circle:nth-of-type(1)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(2)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(3)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(4)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(5)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(6)'), 1, tween_options_to, 0)
       .to($('svg > circle:nth-of-type(7)'), 1, tween_options_to, 0)

接下来

和之前一样，如果你想要跳着阅读的话，可以查看GreenSock文档——特别注意TweenLite和TweenMax两部分。请继续关注本系列教程，下次见！

本文根据@Dennis Gaebel的《TimelineMax: Understanding the Mechanics》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/articles/timelinemax-understanding-the-mechanics--cms-23296。

彦子

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

如需转载，烦请注明出处：https://www.fedev.cn/css3/timelinemax-understanding-the-mechanics.htmlNike Sb Blazer Zoom Mid Xt Orange White Circuit 876872-819