greensock下載

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

拖動(dòng)之前，獲得動(dòng)力

如果您關(guān)注自動(dòng)應(yīng)用基于動(dòng)量的自然運(yùn)動(dòng)的基于動(dòng)量的動(dòng)畫，則可以包含ThrowPropsPlugin 。 這個(gè)特定的插件是Club GreenSock的會(huì)員權(quán)益，因?yàn)樗辉谌魏喂睠DN或GitHub存儲(chǔ)庫(kù)中。 如果您想演示Draggable，可以使用白色列出的URL（針對(duì)CodePen用戶）將其用于測(cè)試驅(qū)動(dòng)器。 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)記，以及它的外觀，以便更深入地進(jìn)入JavaScript部分。 在本教程中，我們將重點(diǎn)放在容器上，因?yàn)檫@將是用戶可以拖動(dòng)的主要表面。

……

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

可拖動(dòng)的工作原理

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

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

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

可拖動(dòng)的設(shè)置

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

Draggable ( target: Object, vars: Object )

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

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

通常，最好使用Draggable.create()而不是構(gòu)造函數(shù)，因?yàn)橐淮握{(diào)用可以容納多個(gè)元素。

Draggable.create(target, options)

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

測(cè)試可拖動(dòng)

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

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

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

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

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

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

我在對(duì)象文字中添加了三行，其中包含我們將要響應(yīng)的事件。 具體來(lái)說(shuō)，我們將使用這三個(gè)拖動(dòng)事件來(lái)測(cè)試事件的響應(yīng)時(shí)間和響應(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)在，我將添加一個(gè)控制臺(tái)日志記錄功能，該功能將告訴我們一些有關(guān)發(fā)生的事件的信息。 我稱之為“ kennyLogger”事件記錄器。

傳遞選項(xiàng)

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

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

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

演示時(shí)間

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

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

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

結(jié)論

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

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

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

greensock下載

總結(jié)

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

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