當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

greensock下载_初识GreenSock的“ GSDevTools”

發(fā)布時間：2024/8/1 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 greensock下载_初识GreenSock的“ GSDevTools” 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

greensock下載

當涉及到SVG和其他復雜的Web動畫時，GreenSock一直是并且一直以來是我在這個星球上最喜歡的庫之一。對于本文，我很高興為GSAP平臺提供一個名為“ GSDevTools”的精彩補充。這是一系列工具，這些工具肯定會使許多需要接口才能與其GreenSock代碼進行交互的GreenSock用戶興奮。讓我們更深入地了解一下GreenSock的朋友Jack和Carl所提供的這一出色的新功能。

視覺化

對于熟悉GreenSock的人，您可能熟悉Sara Drasner（ GSAP Player ）和Chris Gannon（ ScrubGSAPTimeline ）當前向公眾提供的時間軸工具。這兩個選項都是很棒的，但是它們有一些共同點。它們僅“擦洗”時間軸序列。

GreenSock用戶一直表達了他們對高級播放控制器的渴望，以便隔離其動畫序列的各個部分。幸運的是，那個時候終于到來了，新的GSAP插件恰當?shù)孛麨镚SDevTools ；一個回放控制器，它可以使您的序列變得更整齊，還可以隔離場景的回放，以及我們將討論的許多其他奇妙的選項。讓我們深入研究一下GSDevTools的全部內容。

GSDevTools如何工作

加載包含插件代碼的簡單JavaScript文件，然后調用GSDevTools.create()可提供具有鍵盤快捷鍵， GSDevTools.create()和GSDevTools.create()出點等的清理器。您甚至可以分離特定序列以進行更好的控制。終于有了GSAP的可視化時間軸工具，它具有用戶友好的UI以及大量的選項來幫助您的動畫工作流程，真是令人驚訝。

當然，擁有“可擦除”時間軸是一個了不起的功能，但是GSDevTools還提供了一個選擇菜單來隔離運動序列。即使是ID值也是如此。例如，如果要倒帶一個動畫，則它周圍的所有其他內容也會在上下文中倒帶。這樣，您可以選擇該特定元素，它將播放該特定部分。

默認情況下，屬性globalSync為true ，這意味著它將動畫保留在全局時間軸的上下文中（如果倒帶一個動畫，則其周圍的所有其他內容也會在上下文中倒帶）。這是完善動畫的一種非常不錯的方法。

您還會注意到“最小模式”選項。將窗口拖動到小于600像素的位置，以查看時間軸/滑塊是否完美固定。右下角的徽標也鏈接到文檔！

GSDevTools設置

在使用GSDevTools注冊任何場景之前，您需要從JavaScript文件（包括插件本身的腳本）中調用GSDevTools 。

當涉及到GSDevTools.create()調用的放置時，建議在創(chuàng)建動畫代碼后執(zhí)行此操作。這使您可以設置可以使用播放控制器進行擦洗的inTime / outTime 。如果在GSDevTools.create()調用之前不存在動畫，則很難將運動序列添加到時間線檢查器中。

現(xiàn)在我們的播放控制器已經(jīng)被召喚了，如果您愿意，可以通過一些選項。所有參數(shù)都是可選的，您只需編寫GSDevTools.create()即可使用GSDevTools.create()即用提供的所有默認值。

GSDevTools.create({animation: tl, // tween or timelinetimeScale: 0.5, // numerical valuepaused: false, // true, falseloop: true, // true, falseglobalSync: true, // true, falseinTime: 0.3, // time or labeloutTime: 1.2, // time or labelcss: { width: "90%", bottom: 30 },container: '#id', // any selector text (class works too)visibility: 'auto', // hidden, visibleminimal: false // true, false });

minimal

將此選項設置為true將提供基本控件，但低于600像素時，它將自動切換到最小模式。

paused

此選項允許時間線自動播放或在初始頁面加載時暫停。

globalSync

如果您定義動畫并想將其從全局時間軸中取消掛起，請通過傳入false禁用此選項。

css

在時間軸檢查器的外部div上設置所需CSS樣式。

animation

如果您定義動畫，例如animation: myTimeline ， animation: myTween或animation: "id" ，則將首先選擇該動畫。默認情況下，將選擇全局時間軸。

visibility

設置為auto ，控件將在您向外部滾動約1.3秒或更長時間時自動隱藏，并在將鼠標再次置于時間軸區(qū)域上時返回。

inTime / outTime

對于inTime和outTime您可以以秒為單位定義時間值，如果動畫是時間軸，則可以使用標簽。如果您定義了inTime或outTime ，即使在最小模式下也將保持原樣，并且如果您離開動畫然后從下拉菜單中返回動畫，也將記住您的輸入/輸出點。他們甚至可以識別時間軸的ID和相對偏移量。例如， inTime:"myAnimation-=2"使其在myAnimation之前myAnimation開始，或者inTime:"-=5"觀看最后五秒。

timeScale

您可以定義一個timeScale來加快或減慢序列。也可以從時間軸UI手動設置。

container

如果希望將GSDevTools <div>放入特定的容器元素，選擇器文本或實例中，則可以根據(jù)需要這樣做。

loop

此屬性使您可以在頁面加載之前手動設置循環(huán)，但是也可以從檢查器UI設置此選項。

persist

將此設置為false將使GSDevTools關閉頁面刷新之間的持久性。

鍵盤快捷鍵

希望本節(jié)的標題能說明一切；您可以使用鍵盤導航和控制時間軸。以下是可能的列表：

空格鍵 ：播放/暫停
向上/向下箭頭 ：增加/減少時間比例
左箭頭 ：倒帶
右箭頭 ：跳到結尾
L ：切換循環(huán)
I ：將入點設置為播放頭所在的位置
O ：將播放點設置到播放頭所在的位置
H ：顯示/隱藏（切換）整個過程。

現(xiàn)在我們了解了鍵盤操作，是時候注冊場景了。

注冊場景

如前所述，您可以隔離動畫序列的特定場景以進行更好的控制。為了隔離動畫序列并從選擇菜單中顯示它，您需要為序列指定一個ID。

var tl = new TimelineLite({ id: 'Leia' });

為時間軸或補間分配一個ID將使它顯示在動畫菜單中，從而易于隔離該場景。如此甜蜜！

時間軸洗滌器

您會非常興奮地看到洗滌器功能還允許您手動隔離進出點。

我敢打賭，您在想自己“我的一生都在哪里？” 這確實是GSDevTools的魔力。您不僅可以進行清理，還可以定義序列的時間戳，放慢速度，加快速度或重復整個目標序列。手動或將選項傳遞給GSDevTool.create()調用。

補充筆記

請注意以下有關GSDevTools的其他信息：

手動設置輸入/輸出點將在刷新頁面后保留。如果要放大動畫的特定部分，注意到需要進行的更改，或者只是需要對代碼進行調整，這將非常方便。您不必再次手動重置這些輸入/輸出點。如果您在GSDevTools.create()中定義一個inTime / outTime ，它將覆蓋上述行為。
timeScale和循環(huán)狀態(tài)在頁面刷新時保持timeScale 。
雙擊入點標記或出點標記將同時重置這兩個標記（而不是將它們都拖動回到起點/終點，這很快速）。
GSDevTools使用了Draggable，但是由于GreenSock不想讓用戶不得不單獨加載此插件，因此他們將Draggable包含在GSDevTools文件本身中。

結論

這肯定是一個功能強大的實用程序，它與DrawSVG和MorphSVG等其他出色的GSAP附加功能一起首次亮相。如果您想知道如何獲取自己的GSDevTools副本，它是Club GreenSock會員資格（令人震驚的綠色或更高）的一部分，并且可以免費在CodePen和JSFiddle上使用。

最后，GSDevTools將需要GSAP 1.20.3或更高版本，您可以在GreenSock的網(wǎng)站上閱讀有關它的更多信息以及可在CodePen上查看的演示。我還要特別感謝GreenSock的Carl和Jack創(chuàng)造了令人敬畏的產品并一直努力突破極限。編碼愉快！

翻譯自: https://webdesign.tutsplus.com/tutorials/a-first-look-at-gsdevtools-by-greensock--cms-29531