greensock下載

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

視覺化

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

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

GSDevTools如何工作

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

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

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

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

GSDevTools設置

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

<script src="GSDevTools.min.js"></script> <script>// Animation code goes gbove this lineGSDevTools.create({}); </script>

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

現在我們的播放控制器已經被召喚了，如果您愿意，可以通過一些選項。 所有參數都是可選的，您只需編寫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秒或更長時間時自動隱藏，并在將鼠標再次置于時間軸區域上時返回。

inTime / outTime

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

timeScale

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

container

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

loop

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

persist

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

鍵盤快捷鍵

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

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

現在我們了解了鍵盤操作，是時候注冊場景了。

注冊場景

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

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

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

時間軸洗滌器

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

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

補充筆記

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

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

結論

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

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

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

greensock下載

總結

以上是生活随笔為你收集整理的greensock下载_初识GreenSock的“ GSDevTools”的全部內容，希望文章能夠幫你解決所遇到的問題。

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