如何使用Greensock在网上动画

确实有成千上万种在网络上进行动画动画的方法。我们以前介绍了不同动画技术的比较。今天，我们将逐步研究我最喜欢完成的方法之一：使用Greensock。

（他们不付我或任何东西，我真的很喜欢使用它们。）

为什么我更喜欢Greensock而不是其他方法？从技术上讲，这通常是工作的最佳工具。它的使用非常简单，即使对于复杂的运动也是如此。这是我更喜欢使用它的更多原因：

• 您可以在DOM元素以及WebGL/Canvas/Trix.js上下文中使用它们。
• 宽松是非常精致的。 CSS动画仅限于两个更轻松的手柄，这意味着，如果您愿意，例如弹跳效果，则必须在每次通行证上上下上下制作关键帧。 Greensock允许多个Bezer hangers创建高级效果。弹跳是一行代码。您可以通过检查他们的轻松视觉器来理解我的意思。
• 您可以在时间轴上进行序列移动。当您必须一次协调几件事时，CSS动画可能会得到一些意大利面条。 Greensock仍然非常清晰，并允许您控制时间表本身。您甚至可以使动画动画！ ？
• 它将在引擎盖下执行一些计算，以防止奇怪的跨浏览器行为以及规格规定的事物不应该是真实的，就像堆叠变化的方式一样。
• 它提供了许多高级功能，以插件的形式，如果您想将工作进一步发展，则可以使用这些功能，例如变形SVG形状，绘制SVG路径，拖动和掉落，惯性等。

人们有时问我为什么要在所有其他选择中使用这个特殊的库。它比大多数其他人都进一步 - 自从Flash仍然是一回事以来，它们就已经存在了。这个演示卷轴非常鼓舞人心，并且还指出了严肃的网络动画师确实倾向于使用此工具：

接下来的是如何在网络上创建运动，将其提炼到我可以制造的最小单元的细分。让我们开始吧！

动画DOM元素

考虑一下我们用

制作的球，其型号为50％的边界 - 拉迪乌斯值。这是我们将使用Greensock进行扩展和移动的方式：

 <div> </div>

 gsap.to（'。ball'，{
  持续时间：1，
  X：200，
  比例：2
}））

在这种情况下，我们告诉Greensock（GSAP）将元素与ballove it.to.to（）的类别属于（）一些不同的属性。我们已将Transform的CSS属性缩短：Translatex（200px）（200px）：200（请注意，不需要单元，但您可以将它们作为字符串传递）。我们也不是写入Transform：比例（2）。这是您可能想与动画一起使用的转换的引用，及其相应的CSS语法：

 X：100 //转换：Translatex（100px）
Y：100 //变换：转换（100px）
Z：100 //变换：Translatez（100px）
//您不需要Null变换hack或硬件加速度，它随附了
// force3d：是的。如果您想解开此设置，force3d：false
比例：2 //变换：比例尺（2）
scalex：2 //变换：scalex（2）
scaley：2 //变换：scaley（2）
Scalez：2 //变换：Scalez（2）
偏斜：15 //变换：偏斜（15DEG）
skewx：15 //变换：skewx（15deg）
Skewy：15 //变换：偏斜（15DEG）
旋转：180 //变换：旋转（180摄氏度）
rotationx：180 //变换：rotatex（180DEG）
旋转：180 //变换：旋转（180摄氏度）
rotationz：180 //变换：rotatez（180deg）
透视图：1000 //变换：透视（1000px）
变形金学：'50％50％'// Transform-Origin：50％50％

持续时间是您可能认为的：这是一秒钟的时间。

那么，好的，我们如何使SVG动画？让我们考虑上述与SVG相同的代码：

 <svg viewbox="“">
  <circle cx="“" cy="“" r="“"></circle>
</svg>

 gsap.to（'。ball'，{
  持续时间：1，
  X：200，
  比例：2
}））

从动画的角度来看，实际上完全相同。它正在用班级抓住元素，并翻译这些属性。由于SVG实际上是DOM元素，因此我们可以在其中任何一个上打一个班级，并以相同的方式对它们进行动画！

伟大的！我们正在用汽油做饭。

轻松

我之前提到的是我最喜欢的功能之一，让我们看一下如何使用它们。

让我们拿起原始的球。也许我们想尝试使用更独特的反弹之一。这样会这样：

 gsap.to（'。ball'，{
  持续时间：1.5，
  X：200，
  比例：2，
  轻松：“弹跳”
}））

就是这样！此版本的Greensock假定您要使用添加效果（对入口更适合），因此它默认情况下是适用的。您要做的就是将“反弹”指定为弦，而您将参加比赛。

您可能已经注意到我们也稍微延长了持续时间。那是因为球必须在初始状态和最终状态之间进行更多的“工作”。一秒钟的持续时间虽然是线性或正弦宽松的可爱，但对于弹跳或弹性轻松来说太快了。

延迟和时间表

我提到违约措施输出功能适合入口。急诊式出口出口呢？让我们也这样做。

 gsap.to（'。ball'，{
  持续时间：1.5，
  X：200，
  比例：2，
  轻松：“弹跳”
}））

gsap.to（'。ball'，{
  持续时间：1.5，
  延迟：1.5，
  x：0，
  比例：1，
  轻松：'Back.inout（3）'
}））

您可能已经注意到了一些事情。例如，我们没有使用bunce。相反，我们使用了另一个轻松的backforease-in。我们还传递了配置选项，因为您可以使用Greensock的Ease Visualizer工具看到，我们不仅限于默认配置的易用性。我们可以根据我们的需求进行调整。整洁的！

您可能还注意到，我们使用延迟将动画链接在一起。我们花了第一个动画的持续时间的长度，并确保下一个动画的延迟匹配。现在，在这里可以使用，但这很脆弱。如果我们想更改第一个长度怎么办？好吧，现在我们必须重新通过并更改随后的延迟。如果之后我们有另一个动画怎么办？然后另一个？好吧，我们必须返回并计算所有其他延误。这是很多手动工作。

我们可以将工作卸载到计算机上。我一些更复杂的动画是数百种链式动画！如果我完成工作并想在开始时调整一些内容，那么我不想返回所有内容。输入时间表：

 GSAP
  .timeline（）
  .to（'。球'，{
    持续时间：1.5，
    X：200，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。球'，{
    持续时间：1.5，
    x：0，
    比例：1，
    轻松：“ back.inout（3）”
  }）;

这实例化了一个时间轴，然后将两个动画链接起来。

但是我们仍然有一些重复，在每个动画中，我们继续使用相同的持续时间。让我们为此创建一个默认值，作为传递到时间轴的选项。

 GSAP
  .timeline（{
    默认值：{
      持续时间：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    轻松：“ back.inout（3）”
  }）;

太酷了！好吧，您可能开始看到这种方式是如何构建的。尽管在动画中可能没什么大不了的，但在真正复杂的动画中，这个简单的默认和时间表可以真正保持代码可维护。

现在，如果我们想用球朝另一个方向反映这一动作，那怎么办？换句话说，如果我们想要一个循环怎么办？那时我们会添加：-1，可以应用于单个动画或整个时间表。

 GSAP
  .timeline（{
    重复：-1，
    默认值：{
      持续时间：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    轻松：“ back.inout（3）”
  }））
  .to（'。球'，{
    X：-200，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。球'，{
    x：0，
    比例：1，
    轻松：“ back.inout（3）”
  }）;

我们不仅可以重复重复，而且可以像Yoyo一样重复和播放。这就是为什么我们称这个Yoyo：是的。为了明确说明，我们将仅使用第一个动画展示这一点。您可以看到它向前播放，然后它反向播放。

 GSAP
  .timeline（{
    重复：-1，
    Yoyo：是的，
    默认值：{
      持续时间：1.5
    }
  }））
  .to（'。球'，{
    X：200，
    比例：2，
    轻松：“弹跳”
  }））

重叠和标签

我们可以轻松地链接动画真是太好了，但是现实生活中的动作并不能以这种方式奏效。如果您穿过房间喝一杯水，那就不要走路。然后停下来。然后拿起水。然后喝。您更有可能在一个连续的运动中做事。因此，让我们简要谈谈如何重叠运动并立即使事情发射。

如果我们想确定事情在时间轴上彼此之间和之后发射一点，我们可以使用增量器或减少器。如果我们以以下示例显示了三个接一个动画的球，那感觉有点僵硬。

 GSAP
  .timeline（{
    默认值：{
      持续时间：1.5
    }
  }））
  .to（'。球'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。ball2'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。ball3'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }））

如果我们只是使用那些减小器作为字符串经过的那些减小器将动作重叠的话，情况会变得更加顺畅：

 GSAP
  .timeline（{
    默认值：{
      持续时间：1.5
    }
  }））
  .to（'。球'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }））
  .to（'。ball2'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }，' -  = 1'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }，' -  = 1'）

我们可以做到的另一种方法是使用称为标签的东西。标签可以确保在动画播放头的特定时间点上射击。看起来像这样：.add（'labelName'）

 GSAP
  .timeline（{
    默认值：{
      持续时间：1.5
    }
  }））
  .add（'start'）
  .to（'。球'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }， '开始'）
  .to（'。ball2'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }， '开始'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }， '开始'） 

我们甚至可以从标签上增加并减少。实际上，我在动画中做了很多事情。看起来“ start” = 0.25'。

 GSAP
  .timeline（{
    默认值：{
      持续时间：1.5
    }
  }））
  .add（'start'）
  .to（'。球'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }， '开始'）
  .to（'。ball2'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }，'start = 0.25'）
  .to（'。ball3'，{
    X：300，
    比例：2，
    轻松：“弹跳”
  }，'start = 0.5'） 
 

哎呀！我们能够对此做很多事情！这是一个动画的示例，该动画将许多这些前提放在一起，并使用Vanilla JavaScript进行了一些互动。确保点击铃铛。

如果您正在寻找使用Greensock的基于框架的动画，那么我写的是在Vue中涵盖此内容的Anarticle，并且ATALK I GAVETHAT地址反应 - 已经有几年了，但基本的前提仍然适用。

但是，我们还没有涵盖很多东西，包括staggers，变形的SVG，绘制SVG，在屏幕上扔东西，沿着路径移动，动画文字……您可以命名！我建议您浏览Togreensock的文档，以获取这些细节。我还在前端大事上进行了互动，因为我的github上覆盖了所有这些内容，材料源是材料的材料。我也有很多培训，可以为您提供叉子和玩耍。

我希望这能让您开始在网络上使用动画！我等不及要看你做什么了！

以上是如何使用Greensock在网上动画的详细内容。更多信息请关注PHP中文网其他相关文章！