斯坦福大学公开课:量子力学_TimelineMax：了解力学

最新推荐文章于 2026-06-19 17:00:49 发布

翻译最新推荐文章于 2026-06-19 17:00:49 发布 · 352 阅读

标签

#python #java #javascript #js #css

本文深入探讨了使用TimelineMax创建复杂动画序列的技术细节，讲解了关键概念如位置参数、标签和方法，以及如何通过精确控制补间动画的位置和时间来实现专业级动画效果。

斯坦福大学公开课:量子力学

准备好一些定义了吗？力学定义为与受力或位移的对象的行为以及这些对象对其环境的后续影响有关的区域。 时间线是一种按时间顺序显示事件列表的方法，有时也称为项目工件。让我们在这两个领域之间架起桥梁，以学习如何控制和配置动画，就像我们实际上知道自己在做什么一样。

句法

即将出现更多定义：语法一词直接指控制结构的规则和原则。正如我们在上一教程中讨论的那样，用于设置TimelineMax动画JavaScript语法如下：

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

在这里，我使用TimelineMax()构造函数定义了新的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);

您应该看到与以下屏幕截图类似的输出：

尝试在控制台中报告该下一个属性，并注意一下（控制台应报告一个数值）：

console.log(tl.timeline._timeScale);

位置参数

以精确的时机构建惊人的动画序列的真正秘诀是了解位置参数。这个超灵活的参数控制补间，标签，回调，暂停甚至嵌套的时间线的位置，因此您可以在任何地方，以任何顺序放置任何东西！

例如，如果我们看下面的代码，您将看到position参数是to()方法的最后一个参数。

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

这是所有情况的示例。请密切注意说明位置参数如何排列序列的注释。我们还将方法放在另一个位置：所谓的链接。

tmax_tl.to(element, 1, { x:200 })
   .to(element, 1, { y:200 }, '+=1') // 1 second after end of previous to() tween
       .to(element, 1, { rotation:360 }, '-=0.5') // 0.5 seconds before end of previous to() tween
       .to(element, 1, { scale:4 }, 6); // Exactly 6 seconds from beginning of timeline

您可以将position参数视为控制补间在时间轴上的位置的一种方法（默认情况下，它是时间轴的末端，并表示为'+=0' ）。使用数字表示绝对时间（以秒为单位）。诸如'+='或'-='类的前缀有助于使插入点相对于时间轴的末端偏移。例如， '+=2'将在补间结束后两秒钟放置补间，留下两秒钟的间隔。

练习挑战和说明，以帮助您从GreenSock开始

在CodePen上访问动画启动器文件的可编辑版本。
单击fork按钮以制作自己的副本。
请遵循代码中指出的说明。
完成后，将CodePen链接推到@greensock，以使您倍感特别。

//tweens are inserted at and relative to a label's position
var tmax_tl = new TimelineMax();

tmax_tl.to('#green', 1, { x: 750 }) // Add blueGreenSpin label 1 second after end of the green sequence.
   .add('blueGreenSpin', '+=1')
       .to('#blue', 2, { x: 750, rotation: 360 }, 'blueGreenSpin') // Add tween at blueGreenSpin label
       .to('#orange', 2, { x: 750, rotation: 360 }, 'blueGreenSpin+=0.5'); // Insert tween 0.5 seconds after blueGreenSpin label

注意：大多数方法都将零作为位置参数的默认值（ '+=0' ）。

如果定义的标签尚不存在，它将在插入补间之前自动添加到时间线的末尾，这可能非常方便。

方法

方法有助于实现所需动作的目的，或者换句话说，就是我们希望针对时间轴上的每个序列执行的动作。

仅仅为了科学起见，让我们编写一个方法，该方法接受ID为#objectA的单个对象，并将其移动到屏幕的右侧。使用to（）方法的外观如下：

/*

.to(target:[Object||Array], duration:Number, vars:Object, position:* )

*/
tmax_tl.to($('#objectA'), 1, { left: '100px' });

基于上面的代码要注意的重要一点是，我们还需要CSS（ position:absolute ）的帮助才能执行我们的请求（移动对象）。请记住，web land中的元素处于静态位置，这意味着如果您希望使用上述方法移动对象，则需要确保相应CSS属性到位，否则将不会发生任何事情。

想要更多？

现在是时候进行其他剖析了，不是吗？

下面的演示使用to()方法来控制加载程序的每个循环（您可以使用更简单的方法，但是有一点可以说明这种疯狂）。尝试使用位置定时参数使外圆和中圆的运动错开。练习的重点是从视觉上了解位置参数如何允许补间在序列中重叠。正如您在以下.gif文件中看到的那样，每个圆圈的补间在同一时间触发。尝试重叠动画中的动画gif序列，为动画赋予一些趣味性。祝您好运，让我们知道您的生活！

// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
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上阅读。请继续关注本系列的下一期，涵盖补间的美好世界！我希望很快能在见到你！

翻译自: https://webdesign.tutsplus.com/articles/timelinemax-understanding-the-mechanics--cms-23296

斯坦福大学公开课:量子力学