TimelineMax：补间简介

在过去的动画中，补间是一个术语，用于描述逐帧序列，有时也称为“中间”。在那个地方，一个动作导致下一个动作产生一个流畅的动作。对于那些头发灰白的人，您可能会想起Flash；在指代框架运动时使用此术语的应用程序。让我们深入了解一些示例，并为这种补间设计提供良好的大学尝试。

使用TweenMax补间

对于本教程中的两个示例，我将加载TweenMax.min.js ，这将使我们能够访问TimelineMax以及GSAP必须提供的所有其他出色的核心工具。如果回想一下我们的TimelineMax 入门，我讨论了加载TweenMax.min.js的原因，因为它更方便，而且此文件包含了我们几乎需要的所有内容（也是GreenSock在99％的时间里推荐的内容）。

TweenMax扩展了TweenLite ，添加了许多有用的（但不是必需的）功能，例如repeat() ， repeatDelay() ， yoyo() ， updateTo()等。 TweenMax是为方便起见而构建的，它提供了一个JavaScript文件，其中包含动画DOM元素通常需要的所有内容。它本质上允许作者指定单个动作，而TimelineMax将接受链接的方法来创建更复杂的补间/序列集。

加载程序顺序

加载程序是在等待进程加载时提供给用户的那些对象。它们使我们有能力探索可能具有复杂甚至是简单相互作用的微小元素，而且这简直就是爆炸。

快速浏览以下“珍珠串”演示：

让我们分解一下顺序，以更好地理解整个“补间”过程的工作原理。

为了创建此序列，将需要使用staggerTo方法。如果您不记得什么是方法，那么我鼓励您现在就停下来阅读我的力学教程。

根据GreenSock的文档， staggerTo()方法：

“将目标数组调整为一组通用的目标值。

在我们的情况下，这些多个目标将是整个SVG中的每个圆圈。

我们的第一个参数staggerTo接受我们使用了圆选择（在这种情况下circles ）。
第二个参数是我们的持续时间（动画将持续多长时间）。
第三个参数是对象文字，它包含我们想要补间的属性。
最后一个参数将保留我们的交错值（每个动画开始之间的时间）。

这将导致以下情况：假设circles包含三个对象...

1
2
3
4
5

timeline.staggerTo(circles, 15, {x:0}, 0.2)

// circle 1 starts at time 0
// circle 2 starts at time 0.2
// circle 3 starts at time 0.4

加载程序设置

要从头开始，我们需要定义新的时间轴和一些配置设置。

1
2
3
4
5
6
7

var loader = new TimelineMax({ repeat: -1, yoyo: true }),
circles = $('svg circle'),
stagger_options = {
opacity: 0,
y: -800,
ease: Elastic.easeInOut
};

为了使此时间轴反向重复，我使用yoyo键并将其值设置为true 。同样，一旦动画到达其结束帧，这将导致我们的序列以相反的方向播放。触发动画将需要针对SVG中的每个圆圈，以及为什么我们需要使用jQuery的功能进行引用的确切原因。

docs指出了多种传递选择器的方法（请在此处随意阅读有关此内容的更多信息）。对于此示例，我将使用jQuery的典型选择器语法一次选择所有圆。将我们的引用存储在变量中以供以后重用也更快一些，因此circles = $('svg circle') 。

stagger_options变量是一个对象文字，其中包含赋予动画以生命的属性。我们使用y键移动对象，因为GSAP CSSPlugin智能地将transform值转换为等效的matrix并最终为我们加快了速度。与典型CSS转换相比，转换速记属性的优越性要高得多，并且更易于使用：

相当于CSS属性的GSAP

CSS	GSAP
translateX()	x
translateY()	y
translateZ()	z
rotate()	rotation
rotateY()	rotationY
rotateX()	rotationX
scaleX()	scaleX
scaleY()	scaleY
skewX()	skewX
skewY()	skewY

我们还可以控制缓动（动画的感觉）并传递各种运动类型。对于视觉爱好者在那里你可以签出轻松可视化通过使用GreenSock更好地理解为可利用的简化了无数。

创建的最后staggerTo是将staggerTo方法附加到我们的时间轴上，并以该特定方法的正确顺序（元素，持续时间，选项，交错量）插入先前定义的变量。

1	loader.staggerTo(circles, 0.875, stagger_options, 0.025);

链接第二个补间

如果您渴望在完成交错序列后创建另一个序列，则可以肯定地链接另一个方法，例如fromTo这样：

1 2	loader.staggerTo(circles, 0.875, stagger_options, 0.025) .fromTo(target: Object, duration: Number, fromVars:{}, toVars: {});

更进一步

让我们尝试一下我称为“ Polyman”的SVG。最近，我为CSS-Tricks写了一篇有关使多边形动画化的文章，并决定在这里进行另一个补间练习时使用类似的示例。让我们尝试使用staggerFromTo()方法，看看可以产生什么样的效果。

为了便于讨论，下面的SVG输出（XML）略有缩写，但是您将看到我们的SVG包含一些标签；特别是和。还要注意，与男人的脸部相关的路径被分成几部分，以便更好地控制交错（例如，耳朵，眼睛，鼻子……）。

1
2
3
4
5
6
7
8

对于初始时间轴设置，我们将使用对象文字定义全局选项，该对象文字将延迟初始动画，重复序列，在重复播放时延迟动画并最终反向播放动画。

1
2
3
4
5
6

var tmax_options = {
delay: 0.25,
repeat: -1,
repeatDelay: 0.25,
yoyo: true
};

强制转换值

接下来是一个相当新的且未记录的属性，该属性强制将变换值放置在SVG变换属性中（与CSS样式相对）。

1	CSSPlugin.useSVGTransformAttr = true;

添加此属性是为了使开发人员更轻松地解决Safari中的错误，在该错误中结合使用opacity和transforms （例如， transform: scale() ）会产生奇怪的结果。从1.16.0版本开始， useSVGTransformAttr会自动设置为true并且专门针对我们的好朋友Safari，因此不再需要作者按照我的定义进行定义。

由于staggerFromTo方法接受单独的参数from和to位置我喜欢来设置方法以外两个对象常量用于组织和可读性目的。

1
2
3
4
5
6
7
8
9
10
11
12

var stagger_opts_from = {
opacity: 0,
scale: 0,
transformOrigin: 'center center'
};

var stagger_opts_to = {
opacity: 1,
scale: 1,
ease: Elastic.easeInOut,
force3D: true
};

我们定义了两个对象文字，因为我们需要定义所有的from和to属性，以便此动画能够完成其工作。如果不清楚，我们stagger_opts_from定义的值stagger_opts_from并以stagger_opts_to设置的值stagger_opts_to 。

force3D键强制GSAP将3D值应用于元素的变换；意思是matrix3d()代替matrix() ，或者translate3d()代替translate() 。这通常会导致浏览器将目标元素放在其自己的合成器层上，从而可以更有效地更新动画。

默认情况下， force3D设置为auto （自1.15.0起），因此实际上根本不需要使用它（除非您特别希望补间的行为为true而不是auto ）。

1
2
3
4
5
6
7
8
9
10
11
12
13

// layerizes the targets at the start of the tween and
// keeps them that way using a 3D matrix where applicable
// (for 2d and 3d transforms).
force3D:true

// layerizes the targets at the beginning of the tween and
// also de-layerizes them (switching back to a 2D matrix or
// transforms) at the end of the tween too. This prevents you
// from creating and hanging onto hundreds of layered elements
// (which can degrade performance) and also makes sure text
// that may have been rasterized during the tween returns to
// being sharp.
force3D:auto

您可以使用CSSPlugin提供的defaultForce3D属性为所有补间设置全局force3D值：

1 2	// also accepts 'false' or 'auto' CSSPlugin.defaultForce3D = true;

或者，您可以按每个时间间隔进行设置：

1
2
3
4
5

// will keep element layered after tween is complete
timeline.to(element, 1, {x:300, force3D:true);

// will keep element layered after tween is complete
timeline.to(element, 1, {x:300, force3D:false);

在窗口加载时隐藏

如果您的动画试图覆盖CSS属性，则需要确保您的特殊性不会与JavaScript中声明的内容冲突，否则，原生CSS值将占优，并且动画将不会按预期做出反应。

1
2
3
4

/* Required Polyman Styles */
.polyman path {
opacity: 0;
}

上面CSS将在初始窗口加载时隐藏Polyman，因此我们最初不会看到像我们通常称为FOUT（无样式文本的Flash）那样的大胡子。

由于定义了大部分配置，因此我们最终可以开始设置时间轴，以SVG路径为目标，定义一个stagger值（ stagger_val ），并通过定义整个动画将持续多长时间（ duration ）来结束。

1
2
3
4

var tl = new TimelineMax(tmax_options),
path = $('svg.polyman path'),
stagger_val = 0.0125,
duration = 1.25;

就像那样，随着魔杖的微妙波动和少量的独角兽尘埃，我们将定义为参数的所有必需变量传递给staggerFromTo方法！

1	tl.staggerFromTo(path, duration, stagger_opts_from, stagger_opts_to, stagger_val, 0);

中提琴！在一个简单的直线中，Polyman开始呼吸并成为一种真正的生物（不是真的）。太酷了吧？

下次

在我们的TweenMax系列的下一个教程中，我们将研究如何在时间轴上创建一个暂停点，因此动画在到达所需的点时会自动暂停。 addPause（）方法是相对较新的方法，它允许您在时间轴中的任何位置放置暂停。这比使用回调调用函数来暂停该函数（这是在addPause()存在之前必须addPause()要addPause() 。直到下一次快乐补间！

特别感谢那些跟随GreenSock旅程的读者！

翻译自: https://webdesign.tutsplus.com/tutorials/timelinemax-an-introduction-to-tweening--cms-23509