GSDevTools

gsap.registerPlugin(GSDevTools) 

GSDevTools.create();

描述​

GSDevTools为你提供了一个可视化界面用于交互和调试GSAP动画，配备高级播放控制、键盘快捷键、全局同步等功能。跳转到特定场景、设置入点/出点、以慢动作播放以显示细节，甚至可以在小屏幕上切换至“精简”模式。GSDevTools让构建和审查GSAP动画变得非常愉快。

开始使用​

虽然我们建议将其与特定的动画实例关联，因为这样GSDevTools就不需要处理所有全局同步的问题。你可以通过设置dev tools实例的animation值来实现：

var tl = gsap.timeline();
tl.to(...); // add your animations, etc.

// link it to this specific timeline:
GSDevTools.create({animation: tl});

下面的演示展示了GSDevTools在默认设置下运行的情况。它会自动为你提供对全局时间线上每个动画的控制。

按id选择动画​

任何GSAP动画（补间动画或时间线）都可以分配一个id（字符串），这将使其出现在动画菜单中。这让跳转到任意场景变得简单。注意时间线和每个下方的补间动画都有一个被id分配：

//give the timeline and child tweens their own id.
var tl = gsap.timeline({ id: "timeline" });

tl.to(".orange", { duration: 1, x: 700, id: "orange" }).to(".green", {
  duration: 2,
  x: 700,
  ease: "bounce",
  id: "green",
}); //give this tween an id

gsap.to(".grey", { duration: 1, x: 700, rotation: 360, delay: 3, id: "grey" });

//instantiate GSDevTools with default settings
GSDevTools.create();

现在每个id都会显示在动画菜单中（左下角）。

刷新之间的持久化​

为了进一步方便，在UI中手动设置入点/出点、动画、timeScale或循环状态时，它们会在刷新之间持久保留。这意味着你可以拖动入点/出点以隔离特定部分，然后调整代码，点击刷新，并立即在裁剪区域内看到更改。任何通过GSDevTools.create({...})方法设置的值都将覆盖手动选择。设置persist: false以禁用持久性。如果你遇到持久性污染问题（例如在一个中设置timeScale影响另一个），只需为GSDevTools实例分配一个唯一的id（记录的值按id、会话和域隔离）。

配置对象​

GSDevTools可以进行广泛配置。可在配置对象中选择性定义以下任一属性：

属性

描述

• animation

  [字符串 | 动画] - 如果你定义了一个动画，如animation: myTimeline, animation: myTween或者animation: "id"，该动画将被初始选中。默认情况下，会选择全局时间线。

• container

  [字符串 | 元素] - 指定GSDevTools的容器元素，比如："#devTools"或者document.getElementById ("devTools").

• css

  [对象 | 字符串] - 你希望在外层div上应用的CSS，比如{width: "50%", bottom: "30px"}或者一段CSS字符串，比如"width: 50%; bottom: 30px".

• globalSync

  布尔值 - 动画可以保持上下文并与根时间线同步（滑动其中一个会同时滑动全部）。要启用此功能，请设置globalSync: true以将其连接到全局时间线。

• hideGlobalTimeline

  布尔值 - 如果true，全局时间线将从动画菜单中移除。

• id

  字符串 - 用来标识GSDevTools实例的唯一字符串。

• inTime

  [数字 | 字符串] - 入标记的位置（时间，以秒为单位，或者动画的标签或id）。

• keyboard

  布尔值 - 如果true（默认值），则键盘快捷键将生效。注意：只有一个GSDevTools实例能监听键盘快捷键。

• loop

  布尔值 - 初始循环状态。

• minimal

  布尔值 - 如果true，UI将只显示最简控制（滑块、播放/暂停和时间缩放）。注意：当屏幕宽度小于600像素时，它会自动切换到最小模式。

• outTime

  [时间 | 标签] - 出标记的位置（时间，以秒为单位，或者标签，或动画id）。

• paused

  布尔值 - 初始暂停状态。

• persist

  布尔值 - 默认情况下，GSDevTools会在同一域会话中的刷新之间记住入点、出点、所选动画、时间缩放和循环状态，但你可以通过设置persist: false.

• timeScale

  数字 - 初始时间缩放timeScale.

• visibility

  字符串 -"auto"导致控件在鼠标离开大约1秒后自动隐藏，并在鼠标再次移动到区域上时返回。

使用技巧与诀窍​

• 几乎总是最好直接定义一个动画，如GSDevTools.create({ animation: yourAnimation... });这样它就无需担心合并所有全局动画的问题。

• 点击GSAP标志（右下角）可直接前往文档!

• 双击入点/出点标记可立即重置两者。

• 如果播放控件遮挡了你的动画部分，只需按下"H"键即可隐藏它（再按一次可恢复）-即使它不可见，你仍然可以使用所有键盘快捷键。

高级示例​

我们有意为上面的演示选择了非常基本的动画，但这里有一个示例说明GSDevTools如何使控制和调试复杂动画序列变得如此简单。

方法​

常见问题​

GSDevTools.create({id:"main"})

GSDevTools.getById("main").kill()