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下載

總結

以上是生活随笔為你收集整理的greensock下载_使用GreenSock构建可拖动的画布外菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。