greensock下载

当涉及到SVG和其他复杂的Web动画时，GreenSock一直是并且一直以来是我在这个星球上最喜欢的库之一。对于本文，我很高兴为GSAP平台提供一个名为“ GSDevTools”的精彩补充。这是一系列工具，这些工具肯定会使许多需要接口才能与其GreenSock代码进行交互的GreenSock用户兴奋。让我们更深入地了解一下GreenSock的朋友Jack和Carl所提供的这一出色的新功能。

视觉化

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

GreenSock用户一直表达了他们对高级播放控制器的渴望，以便隔离其动画序列的各个部分。幸运的是，那个时候终于到来了，新的GSAP插件恰当地命名为GSDevTools ；一个回放控制器，它可以使您的序列变得更整齐，还可以隔离场景的回放，以及我们将讨论的许多其他奇妙的选项。让我们深入研究一下GSDevTools的全部内容。

GSDevTools如何工作

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

当然，拥有“可擦除”时间轴是一个了不起的功能，但是GSDevTools还提供了一个选择菜单来隔离运动序列。即使是ID值也是如此。例如，如果要倒带一个动画，则它周围的所有其他内容也会在上下文中倒带。这样，您可以选择该特定元素，它将播放该特定部分。

默认情况下，属性globalSync为true ，这意味着它将动画保留在全局时间轴的上下文中（如果倒带一个动画，则其周围的所有其他内容也会在上下文中倒带）。这是完善动画的一种非常不错的方法。

您还会注意到“最小模式”选项。将窗口拖动到小于600像素的位置，以查看时间轴/滑块是否完美固定。右下角的徽标也链接到文档！

GSDevTools设置

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

<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()即用提供的所有默认值。

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您可以以秒为单位定义时间值，如果动画是时间轴，则可以使用标签。如果您定义了inTime或outTime ，即使在最小模式下也将保持原样，并且如果您离开动画然后从下拉菜单中返回动画，也将记住您的输入/输出点。他们甚至可以识别时间轴的ID和相对偏移量。例如， inTime:"myAnimation-=2"使其在myAnimation之前myAnimation开始，或者inTime:"-=5"观看最后五秒。

`timeScale`

您可以定义一个timeScale来加快或减慢序列。也可以从时间轴UI手动设置。

`container`

如果希望将GSDevTools <div>放入特定的容器元素，选择器文本或实例中，则可以根据需要这样做。

`loop`

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

`persist`

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

键盘快捷键

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

空格键 ：播放/暂停
向上/向下箭头 ：增加/减少时间比例
左箭头 ：倒带
右箭头 ：跳到结尾
L ：切换循环
I ：将入点设置为播放头所在的位置
O ：将播放点设置到播放头所在的位置
H ：显示/隐藏（切换）整个过程。

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

注册场景

如前所述，您可以隔离动画序列的特定场景以进行更好的控制。为了隔离动画序列并从选择菜单中显示它，您需要为序列指定一个ID。

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

为时间轴或补间分配一个ID将使它显示在动画菜单中，从而易于隔离该场景。如此甜蜜！

时间轴洗涤器

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

我敢打赌，您在想自己“我的一生都在哪里？” 这确实是GSDevTools的魔力。您不仅可以进行清理，还可以定义序列的时间戳，放慢速度，加快速度或重复整个目标序列。手动或将选项传递给GSDevTool.create()调用。

补充笔记

请注意以下有关GSDevTools的其他信息：

手动设置输入/输出点将在刷新页面后保留。如果要放大动画的特定部分，注意到需要进行的更改，或者只是需要对代码进行调整，这将非常方便。您不必再次手动重置这些输入/输出点。如果您在GSDevTools.create()中定义一个inTime / outTime ，它将覆盖上述行为。
timeScale和循环状态在页面刷新时保持timeScale 。
双击入点标记或出点标记将同时重置这两个标记（而不是将它们都拖动回到起点/终点，这很快速）。
GSDevTools使用了Draggable，但是由于GreenSock不想让用户不得不单独加载此插件，因此他们将Draggable包含在GSDevTools文件本身中。