展示型网站首页设计解析/谷歌推广网站

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文件本身中。

结论

这肯定是一个功能强大的实用程序，它与DrawSVG和MorphSVG等其他出色的GSAP附加功能一起首次亮相。 如果您想知道如何获取自己的GSDevTools副本，它是Club GreenSock会员资格（令人震惊的绿色或更高）的一部分，并且可以免费在CodePen和JSFiddle上使用。

最后，GSDevTools将需要GSAP 1.20.3或更高版本，您可以在GreenSock的网站上阅读有关它的更多信息以及可在CodePen上查看的演示。 我还要特别感谢GreenSock的Carl和Jack创造了令人敬畏的产品并一直努力突破极限。 编码愉快！

翻译自: https://webdesign.tutsplus.com/tutorials/a-first-look-at-gsdevtools-by-greensock--cms-29531

greensock下载