timelinemax_TimelineMax：补间简介

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中的每个圆圈。

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

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

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

加载程序设置

首先，我们需要定义一个新的时间表和一些配置设置。

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方法附加到我们的时间轴上，并以该特定方法的正确顺序（元素，持续时间，选项，交错量）插入先前定义的变量。

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

链接第二个补间

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

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

更进一步

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

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

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

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

强制转换值

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

CSSPlugin.useSVGTransformAttr = true;

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

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

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 ）。

// 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值：

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

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

// 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值将占优，并且动画将不会按预期做出React。

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

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

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

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

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

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

timelinemax