greensock下載

用于GSAP的插件非常不錯，但是讓我們看一下GreenSock提供的實用程序。 特別是稱為Draggable的實用程序。 使用Draggable，創(chuàng)建支持觸摸的交互（也可以與鍵盤和鼠標(biāo)一起使用）非常簡單。 在我們結(jié)束GreenSock旅程時，本教程是最后的兩部分。 我們將從學(xué)習(xí)Draggable的語法，設(shè)置開始，并在下一個教程中以創(chuàng)建可與鼠標(biāo)和支持觸摸的設(shè)備一起使用的畫布菜單結(jié)束！

拖動之前，獲得動力

如果您關(guān)注自動應(yīng)用基于動量的自然運動的基于動量的動畫，則可以包含ThrowPropsPlugin 。 這個特定的插件是Club GreenSock的會員權(quán)益，因為它不在任何公共CDN或GitHub存儲庫中。 如果您想演示Draggable，可以使用白色列出的URL（針對CodePen用戶）將其用于測試驅(qū)動器。 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上可用。

標(biāo)記

這是一般的標(biāo)記，以及它的外觀，以便更深入地進入JavaScript部分。 在本教程中，我們將重點放在容器上，因為這將是用戶可以拖動的主要表面。

……

從鳥瞰來看，標(biāo)記是語義的，不需要divs來侵入菜單的布局和位置。 最終使該標(biāo)記具有可移植性，可重用性甚至可擴展性。

可拖動的工作原理

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

與任何JavaScript庫類似，在進入任何代碼或自定義配置之前，我們需要加載腳本。

我們正在使用TweenMax，因此我們首先加載它。 但是，在腳本加載順序方面，作者不必關(guān)心依賴關(guān)系鏈。 這意味著您可以先加載TweenMax，然后加載Draggable，反之亦然。 現(xiàn)在，Draggable將使您能夠編寫代碼，從而使您選擇的元素可以輕拂，滑動，旋轉(zhuǎn)甚至拖動！

可拖動的設(shè)置

定義并加載了腳本之后，就該編寫一些代碼了。 對于Draggable，我們將定義一個構(gòu)造函數(shù)作為此過程的初始起點。 構(gòu)造函數(shù)的語法使您可以傳遞目標(biāo)和一系列選項 。

Draggable ( target: Object, vars: Object )

除了使用上面的構(gòu)造函數(shù)，您可能會發(fā)現(xiàn)以下選項更加靈活：

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

通常，最好使用Draggable.create()而不是構(gòu)造函數(shù)，因為一次調(diào)用可以容納多個元素。

Draggable.create(target, options)

被稱為create方法的target的自變量引用應(yīng)為可拖動元素。 如我們先前所見，它可以是常規(guī)DOM元素，jQuery對象或元素數(shù)組。 options參數(shù)使我們可以傳入一個對象常量，其中包含鍵/值對以及API提供的眾多選項。 有關(guān)選項的完整列表，請參閱官方的GreenSock文檔 。

測試可拖動

在開始任何項目之前，知道如何調(diào)試可拖動事件（萬一出了問題）可能是非常有價值的，但是不要試圖嘗試學(xué)習(xí)星空下的每個選項而感到不知所措； 熟悉基礎(chǔ)知識并從那里開始工作。

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

我們將使用伙伴JavaScript開箱即用提供的document.querySelectorAll方法來獲取容器。 請注意，我們?nèi)栽谑褂梦以诒窘坛涕_始時寫的標(biāo)記。

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

我們將容器變量添加到數(shù)組（ [] ）內(nèi)，最后傳入一個空對象，在該對象中將定義選項用于調(diào)試。

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

我在對象文字中添加了三行，其中包含我們將要響應(yīng)的事件。 具體來說，我們將使用這三個拖動事件來測試事件的響應(yīng)時間和響應(yīng)方式。

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);} });

這些功能的內(nèi)容由您自己決定，但現(xiàn)在，我將添加一個控制臺日志記錄功能，該功能將告訴我們一些有關(guān)發(fā)生的事件的信息。 我稱之為“ kennyLogger”事件記錄器。

傳遞選項

現(xiàn)在我們已經(jīng)進行了測試，我們可以傳遞更多選項來微調(diào)拖動事件。

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

這些默認(rèn)值在GreenSock文檔中有很好的解釋。 您可能已經(jīng)注意到throwProps鍵設(shè)置為true 。 這是因為在我們的下一個也是最后一個教程中，我們將使用throwPropsPlugin在畫布關(guān)閉菜單打開和關(guān)閉時控制其動量。 由于throwPropsPlugin是GreenSock成員的權(quán)益，因此您可以使用僅可通過CodePen使用的URL，如本教程開頭所述。

演示時間

首先包括所有包含throwPropsPlugin，Draggable和TweenMax的腳本（請記住：順序無關(guān)緊要！）。

記住，我們正在加載Draggable，TweenMax和throwPropPlugin。 將它們應(yīng)用于我們的原始標(biāo)記，并使用命令行進行調(diào)試，我們終于可以用鼠標(biāo)或手指在支持觸摸的設(shè)備上移動容器了！

隨時嘗試不同的值和選項。 該演示旨在成為一個游樂場，而不是最終的產(chǎn)品，因此，抓緊時間打破東西，然后修復(fù)它！

結(jié)論

如果您想進一步使用Draggable之外的其他實用程序，可以訪問GreenSock的網(wǎng)站以獲取更多信息。 我建議看一下SplitText，了解一些嚴(yán)肅的印刷風(fēng)格。

下次，您將獲得本系列的最后一個也是最后一個教程，我們在這里總結(jié)了畫布之外的菜單！

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

greensock下載

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。