认识GreenSock 的“GSDevTools”

当涉及到svg和其他复杂的网络动画时，GreenSock 一直是我在这个星球上最喜欢的库之一。在本文中，我很高兴向您介绍 GSAP 平台的一个精彩补充，名为“GSDevTools”。这是一组工具，肯定会激发许多需要接口与 GreenSock 代码交互的 GreenSock 用户。让我们更深入地了解我们的朋友 Jack 和 Carl 在 GreenSock 的这个精彩的新功能。

获得视觉

对于熟悉 GreenSock 的人，您可能熟悉 Sara Drasner ( GSAP Player ) 和 Chris Gannon ( ScrubGSAPTimeline ) 目前向公众提供的时间线工具。这两个选项都很棒，但它们有一些共同点。他们只“擦洗”时间线序列。

GreenSock 用户一直表达他们对高级播放控制器的渴望，以便隔离部分动画序列。幸运的是，那个时候终于到来了，一个新的 GSAP 插件恰当地命名为 GSDevTools；一个播放控制器，它允许您的序列被擦洗，也可以隔离场景的播放，以及我们将讨论的许多其他奇妙的选项。让我们深入了解一下 GSDevTools 的更多细节。

GSDevTools 的工作原理

加载一个包含插件代码的简单javascript文件，然后调用 GSDevTools.create() 提供了一个带有键盘快捷键、入点和出点等的清理器。您甚至可以分离特定序列以进行更精细的控制。最终拥有一个用于 GSAP 的可视化时间线工具真是太棒了，它拥有一个用户友好的 UI 和大量选项来帮助您的动画工作流程。

拥有“可擦洗”时间线无疑是一项了不起的功能，但 GSDevTools 还提供了一个选择菜单来隔离运动序列；甚至是一个 ID 值。例如，如果您要倒带一个动画，它周围的所有其他内容也会在上下文中倒带。这样你就可以选择那个特定的元素，它会播放那个特定的部分。 

默认情况下，该属性 globalSync是true ，这意味着它将您的动画保留在全局时间线的上下文中（如果您倒带该动画，则它周围的所有其他动画也会在上下文中倒带）。这是改进动画的一种非常好的方法。

您还会注意到“最小模式”选项。拖动小于 600 像素的窗口，以查看时间线/scrubber 是否完美支撑。右下角的标志也链接到文档！

GSDevTools 设置

在使用 GSDevTools 注册任何场景之前，您需要 GSDevTools从JavaScript文件中进行调用，包括插件本身的脚本。

<script src="GSDevTools.min.js"></script>
<script>
    // Animation code goes gbove this line
    GSDevTools.create({});
</script>

当涉及到 GSDevTools.create() 调用的位置时，建议您在创建动画代码后这样做。这允许您设置 可以使用播放控制器擦除的inTime/ 。outTime如果在调用之前不存在动画，则 GSDevTools.create() 很难将您的运动序列添加到时间线检查器中。

现在我们的播放控制器已经被召唤了，如果你愿意的话，你可以通过选项。所有参数都是可选的，您可以编写 GSDevTools.create()以使用开箱即用提供的所有默认值。

GSDevTools.create({
  animation: tl, // tween or timeline
  timeScale: 0.5, // numerical value
  paused: false, // true, false
  loop: true, // true, false
  globalSync: true, // true, false
  inTime: 0.3, // time or label
  outTime: 1.2, // time or label  css: { width: "90%", bottom: 30 },
  container: '#id', // any selector text (class works too)
  visibility: 'auto', // hidden, visible
  minimal: false // true, false
});

minimal

将此选项设置为true将提供基本控件，但低于 600 像素时它会自动切换到最小模式。

paused

此选项允许时间线在初始页面加载时自动播放或暂停。

globalSync

false如果您定义动画并希望将其从全局时间轴中解开，则通过传入禁用此选项。

css

div在时间线检查器的外部设置您想要的任何 CSS 样式。

animation

如果您定义了一个动画，例如 animation: myTimeline、 animation: myTween 或 animation: "id"，则最初会选择该动画。默认情况下，选择全局时间线。

visibility

当设置为 auto控件时，当您在它们之外滚动大约 1.3 秒或更长时间时，控件将自动隐藏，当您再次将鼠标放在时间线区域上时返回。

inTime / outTime

对于inTime并且outTime 您可以以秒为单位定义时间值，或者如果动画是时间线，则使用标签。如果您定义inTimeor outTime，即使在最小模式下它也会保持原样，并且如果您从动画切换然后从下拉菜单中返回它，它还会记住您的入/出点。他们甚至可以识别时间线的 ID 和相对偏移量；例如， inTime:"myAnimation-=2"让它提前两秒开始myAnimation，或者inTime:"-=5"观看最后五秒。

timeScale

您可以定义 atimeScale以加快或减慢您的序列。这也可以从时间线 UI 手动设置。

container

如果您希望将 GSDevTools<div>放入特定的容器元素、选择器文本或实例中，您可以根据需要进行操作。

loop

此属性允许您在页面加载之前手动设置循环，但也可以从检查器 UI 设置此选项。

persist

将此设置为false将使 GSDevTools 关闭页面刷新之间的持久性。

键盘快捷键

希望本节的标题能说明一切；您可以使用键盘导航和控制时间线。以下是可能的列表：

• 空格键：播放/暂停

• 向上/向下箭头：增加/减少 timeScale

• 左箭头：倒带

• 右箭头：跳到结尾

• L : 切换循环

• I：将入点设置为播放头所在的位置

• O：将出点设置为播放头所在的位置

• H：显示/隐藏（切换）整个事情。

现在我们了解了键盘操作，是时候注册一个场景了。

注册场景

正如我之前解释的那样，您可以隔离动画序列的特定场景以进行更好的控制。为了隔离您的动画序列并在选择菜单中显示它，您需要为您的序列提供一个 ID。

var tl = new TimelineLite({ id: 'Leia' });

为时间线或补间分配一个 id 将导致它出现在动画菜单中，从而可以轻松隔离该场景；如此甜蜜！

时间线洗涤器

您会非常高兴地看到洗涤器功能还允许您手动隔离入点和出点。

我敢打赌，您一定会问自己“我这辈子在哪里？” 这确实是 GSDevTools 的魔力。您不仅可以擦洗，还可以定义序列的时间戳、减慢速度、加快速度或重复您指定的整个序列；手动或通过将选项传递给GSDevTool.create()调用。

补充说明

这里还有一些关于 GSDevTools 的额外信息需要注意：

• 手动设置入/出点将在页面刷新后持续存在。如果您正在放大动画的特定部分，注意到您需要进行的更改，或者只是需要 对代码进行调整，这将非常方便；您不必再次手动重置这些输入/输出点。如果您 在 其中定义inTime/  ，它将覆盖上述行为。outTimeGSDevTools.create()

• timeScale并且循环状态在页面刷新时持续存在。

• 双击入点或出点标记将重置两者（比将它们都拖回开始/结束更快）。

• GSDevTools 使用 Draggable，但由于 GreenSock 不想让用户不得不单独加载此插件，因此他们将 Draggable 包含到 GSDevTools 文件本身中。

结论

这无疑是一个强大的实用程序，它与DrawsVG和MorphSVG等其他令人惊叹的 GSAP 附加功能一起首次亮相。如果您想知道如何获得自己的 GSDevTools 副本，它是Club GreenSock（Shockingly Green 或更高版本）会员权益的一部分，并且还可以在 CodePen 和 JSFiddle 上免费使用。