greensock下载_使用GreenSock构建可拖动的画布外菜单

最新推荐文章于 2025-11-18 00:44:32 发布

翻译最新推荐文章于 2025-11-18 00:44:32 发布 · 790 阅读

文章标签：

#java #python #javascript #js #vue #ViewUI

本文介绍了如何利用GreenSock的Draggable实用工具创建支持触摸的交互式菜单。通过加载Draggable和相关插件，你可以设置并调试拖动事件，使其适用于鼠标和触摸设备。在教程的下一部分，你将学习如何结合TweenMax和throwPropsPlugin来实现画布菜单的动量效果。

greensock下载

用于GSAP的插件非常不错，但是让我们看一下GreenSock提供的实用程序。特别是称为Draggable的实用程序。使用Draggable，创建支持触摸的交互（也可以与键盘和鼠标一起使用）非常简单。在我们结束GreenSock旅程时，本教程是最后的两部分。我们将从学习Draggable的语法，设置开始，并在下一个教程中以创建可与鼠标和支持触摸的设备一起使用的画布菜单结束！

拖动之前，获得动力

如果您关注自动应用基于动量的自然运动的基于动量的动画，则可以包含ThrowPropsPlugin 。这个特定的插件是Club GreenSock的会员权益，因为它不在任何公共CDN或GitHub存储库中。如果您想演示Draggable，可以使用白色列出的URL（针对CodePen用户）将其用于测试驱动器。 CodePen用户的URL是： https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js ://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js，仅在CodePen上可用。

标记

这是一般的标记，以及它的外观，以便更深入地进入JavaScript部分。在本教程中，我们将重点放在容器上，因为这将是用户可以拖动的主要表面。

从鸟瞰来看，标记是语义的，不需要divs来侵入菜单的布局和位置。最终使该标记具有可移植性，可重用性甚至可扩展性。

可拖动的工作原理

基于定义的自定义指令，Draggable允许任何元素在垂直和水平方向都可以“拖动”。

与任何JavaScript库类似，在进入任何代码或自定义配置之前，我们需要加载脚本。

我们正在使用TweenMax，因此我们首先加载它。但是，在脚本加载顺序方面，作者不必关心依赖关系链。这意味着您可以先加载TweenMax，然后加载Draggable，反之亦然。现在，Draggable将使您能够编写代码，从而使您选择的元素可以轻拂，滑动，旋转甚至拖动！

可拖动的设置

定义并加载了脚本之后，就该编写一些代码了。对于Draggable，我们将定义一个构造函数作为此过程的初始起点。构造函数的语法使您可以传递目标和一系列选项。

Draggable ( target: Object, vars: Object )

除了使用上面的构造函数，您可能会发现以下选项更加灵活：

Draggable.create([obj1, obj2], { option1: value1, option2: value2 })

通常，最好使用Draggable.create()而不是构造函数，因为一次调用可以容纳多个元素。

Draggable.create(target, options)

被称为create方法的target的自变量引用应为可拖动元素。如我们先前所见，它可以是常规DOM元素，jQuery对象或元素数组。 options参数使我们可以传入一个对象常量，其中包含键/值对以及API提供的众多选项。有关选项的完整列表，请参阅官方的GreenSock文档。

测试可拖动

在开始任何项目之前，知道如何调试可拖动事件（万一出了问题）可能是非常有价值的，但是不要试图尝试学习星空下的每个选项而感到不知所措；熟悉基础知识并从那里开始工作。

var container = document.querySelectorAll('.container')[0];

我们将使用伙伴JavaScript开箱即用提供的document.querySelectorAll方法来获取容器。请注意，我们仍在使用我在本教程开始时写的标记。

Draggable.create([container], {});

我们将容器变量添加到数组（ [] ）内，最后传入一个空对象，在该对象中将定义选项用于调试。

Draggable.create([container], {
    onDrag: function() {},
    onDragStart: function() {},
    onDragEnd: function() {}
});

我在对象文字中添加了三行，其中包含我们将要响应的事件。具体来说，我们将使用这三个拖动事件来测试事件的响应时间和响应方式。

var container = document.querySelectorAll('.container')[0];

function kennyLogger(event) {
    console.log(event.type + ' ' + 'fired');
}

Draggable.create([container], {
    onDrag: function(event) {
        kennyLogger(event); // fires 'mousemove' for non-touch devices
    },
    onDragStart: function(event) {
        kennyLogger(event);
    },
    onDragEnd: function(event) {
        kennyLogger(event);
    }
});

这些功能的内容由您自己决定，但现在，我将添加一个控制台日志记录功能，该功能将告诉我们一些有关发生的事件的信息。我称之为“ kennyLogger”事件记录器。

传递选项

现在我们已经进行了测试，我们可以传递更多选项来微调拖动事件。

Draggable.create(container, {
	throwProps: true,
    dragResistance: 0.25,
    edgeResistance: 1,
    throwResistance: 1000
});

这些默认值在GreenSock文档中有很好的解释。您可能已经注意到throwProps键设置为true 。这是因为在我们的下一个也是最后一个教程中，我们将使用throwPropsPlugin在画布关闭菜单打开和关闭时控制其动量。由于throwPropsPlugin是GreenSock成员的权益，因此您可以使用仅可通过CodePen使用的URL，如本教程开头所述。

演示时间

首先包括所有包含throwPropsPlugin，Draggable和TweenMax的脚本（请记住：顺序无关紧要！）。

记住，我们正在加载Draggable，TweenMax和throwPropPlugin。将它们应用于我们的原始标记，并使用命令行进行调试，我们终于可以用鼠标或手指在支持触摸的设备上移动容器了！

随时尝试不同的值和选项。该演示旨在成为一个游乐场，而不是最终的产品，因此，抓紧时间打破东西，然后修复它！

结论

如果您想进一步使用Draggable之外的其他实用程序，可以访问GreenSock的网站以获取更多信息。我建议看一下SplitText，了解一些严肃的印刷风格。

下次，您将获得本系列的最后一个也是最后一个教程，我们在这里总结了画布之外的菜单！

翻译自: https://webdesign.tutsplus.com/tutorials/building-a-draggable-off-canvas-menu-with-greensock--cms-24359

greensock下载