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

编程问答

greensock下载_GreenSock动画平台初学者指南

發布時間：2024/8/1 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 greensock下载_GreenSock动画平台初学者指南小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

greensock下載

by Nicholas Kramer

尼古拉斯·克拉默(Nicholas Kramer)

GreenSock動畫平臺初學者指南 (The Beginner’s Guide to the GreenSock Animation Platform)

在不了解JavaScript的情況下創建基于時間軸的動畫的入門 (A primer to creating timeline based animations without knowing JavaScript)

介紹 (Introduction)

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

GreenSock動畫平臺(簡稱GSAP )是一個功能強大JavaScript庫，使前端開發人員和設計人員可以創建基于時間軸的強大動畫。這允許對更多涉及的動畫序列進行精確控制，而不是CSS有時提供的約束keyframe和animation屬性。

The best part about this library is that it’s lightweight and easy to use.

關于這個庫最好的部分是它輕巧且易于使用。

With GSAP, you can start creating engaging animations with little to no knowledge of JavaScript.

使用GSAP，您幾乎不需要JavaScript就可以開始制作引人入勝的動畫。

This guide will show how to set up and use GSAP’s TweenMax feature and also dive into a bit of Club GreenSock’s DrawSVG plugin. Each of the examples below has a corresponding CodePen link so you can follow along in another tab.

本指南將說明如何設置和使用GSAP的TweenMax功能，并深入介紹Club GreenSock的DrawSVG插件。下面的每個示例都有一個對應的CodePen鏈接，因此您可以在另一個選項卡中進行操作。

入門 (Getting Started)

Before coding, we first need to add the GSAP library to our HTML file. To do this, you will need to grab the CDN link to the TweenMax library. You can find links to TweenMax and other GSAP CDNs here.

在編碼之前，我們首先需要將GSAP庫添加到我們HTML文件中。為此，您將需要獲取到TweenMax庫的CDN鏈接。您可以在此處找到指向TweenMax和其他GSAP CDN的鏈接。

Note: CDN stands for Content Delivery Network. This means that instead of hosting the JavaScript files on your site, an outside source like CloudFlare can host them for you.

注意：CDN代表內容交付網絡。這意味著，像CloudFlare這樣的外部資源可以為您托管它們，而不是在您的站點上托管JavaScript文件。

Once you have the CDN link, insert it in a <script> tag at the bottom of your HTML file like so:

獲得CDN鏈接后，將其插入HTML文件底部的<scri pt>標記中，如下所示：

That’s all you need to get started! If you’re using an online development environment like CodePen, you can install GSAP by editing the Pen Settings.

這就是您入門所需的一切！如果您使用的是CodePen之類的在線開發環境，則可以通過編輯筆設置來安裝GSAP。

了解補間 (Understanding Tweens)

Tweens are the basic animation functions from within GSAP. To animate any HTML object, we must call the object, define the properties that we are going to animate, the duration of the animation, the animation’s easing, and any other parameters like delay timing.

補間是GSAP中基本的動畫功能。要設置任何HTML對象的動畫，我們必須調用該對象，定義要設置動畫的屬性，動畫的持續時間，動畫的緩動以及其他任何參數，例如延遲時間。

For example, if we were to change a red rectangle’s color to black while also moving it down and to the right, the Tween would look like this in JavaScript:

例如，如果我們要將紅色矩形的顏色更改為黑色，同時又將其上下移動，則Tween在JavaScript中將如下所示：

TweenLite.to(“#rectangle”, 2, { left:100, top: 75, backgroundColor:"#000000", ease: Power4.easeIn});

Let’s break this down:

讓我們分解一下：

TweenLite lets our JavaScript file know that we want to animate using GSAP. The .to method immediately after signifies that we want our object to animate from its original static state defined by our HTML and CSS to the final animated state defined by our JavaScript.

TweenLite 讓我們JavaScript文件知道我們要使用GSAP進行動畫處理 。之后的.to方法表示我們希望對象從HTML和CSS定義的原始靜態動畫到JavaScript定義的最終動畫狀態。

You can use the .from method instead to reverse this. We’ll cover this a little later on in this article.

您可以改用.from方法來反向執行此操作。我們將在本文的稍后部分介紹。

Next, we define the object that we want to animate. In our case, it’s an HTML object with the ID of rectangle. This looks like “#rectangle”, in our code. We must make sure that we have our object wrapped in quotes and that we use the # to denote that we’re calling an ID. Any ID could go here as long as it’s an element defined in your HTML. Also, note that the comma following the end quote is important as well. Without it, the animation will not run.

接下來，我們定義要設置動畫的對象。 在我們的例子中，它是一個ID為矩形HTML對象。在我們的代碼中“#rectangle”,它看起來像“#rectangle”, 。我們必須確保將對象括在引號中，并使用#表示正在調用ID。只要它是HTML中定義的元素，任何ID都可以在此處使用。另外，請注意，引號后面的逗號也很重要。沒有它，動畫將無法運行。

The 2, after the element’s ID defines the duration of the animation in seconds. So in this instance, we’re defining the animation’s duration as 2 seconds long. If we wanted it to be a half-second long, we would change the value to 0.5, instead.

在 2, 該元素的ID之后 定義了以秒的動畫的持續時間。 因此，在這種情況下，我們將動畫的持續時間定義為2秒長。如果我們希望將其設置為半秒長，則可以將其更改為0.5, 。

The parameters inside the brackets represent any of the properties you’d like to animate. In this example, we’re animating the left top and background-color CSS properties. Notice how each of these different properties use camelCase to call them instead of the typical hyphen notation used with CSS. You can add as many different properties here as you’d like as long as you separate them with commas after their value.

方括號內的參數代表您要設置動畫的任何屬性。 在這個例子中，我們的動畫left top和background-color CSS屬性。請注意，這些不同屬性中的每一個如何使用camelCase來調用它們，而不是CSS使用的典型連字符表示法。您可以在此處添加任意多個不同的屬性，只要在它們的值后用逗號分隔即可。

The last property called is the animation's ease. GSAP comes packaged with a bunch of different easing options that you can add to your animations.

最后調用的屬性是動畫的ease 。 GSAP附帶了許多不同的緩動選項，您可以將它們添加到動畫中。

In our animation above, we call the Power4 ease and have it set to easeIn to the animation. You can see the full range of easing options in the documentation here. If you’re unfamiliar with easing, be sure to check out a previous article that explains different easing functions in depth.

在上面的動畫中，我們將Power4稱為Power4并將其設置為easeIn 。您可以在此處的文檔中看到所有寬松選項。如果您不熟悉緩動，請務必閱讀以前的文章，該文章深入介紹了不同的緩動功能。

Finally, you must close the parenthesis and the brackets of the Tween to prevent any errors and allow the animation to run. Don’t forget to include the semicolon to end the JavaScript function.

最后，必須關閉補間的括號和括號以防止出現任何錯誤并允許動畫運行。 不要忘記添加分號來結束JavaScript函數。

The Tween is the basic foundation for GSAP animations. You can experiment with an example of this Tween in CodePen here.

補間是GSAP動畫的基本基礎。您可以使用此吐溫在CodePen的示例實驗在這里。

Tweens are great if you want to do one-off animations but if you’d like to create multi-step sequences, timelines are the best alternative.

如果您要一次性創建動畫，則補間效果很好，但是如果您想創建多步序列，則時間軸是最好的選擇。

時間軸動畫 (Timeline Animations)

If you’ve ever used an animation or prototyping software like After Effects or Principle, you’re already familiar with timeline animations. Traditional timelines are usually a series of animations that occur one at a time or concurrently. Timelines in GSAP are not any different.

如果您曾經使用過After Effects或Principle等動畫或原型制作軟件，則已經熟悉時間軸動畫。傳統的時間軸通常是一次或同時發生的一系列動畫。 GSAP中的時間表沒有什么不同。

To call a timeline, you must first define a variable at the top of your JavaScript file as a new TimelineLite:

要調用時間軸，您必須首先在JavaScript文件頂部定義一個變量作為新的TimelineLite ：

var tl = new TimelineLite;

To break this line of code down piece by piece, know that var is short for variable. If you’re unfamiliar with what a variable is, think of it as shorthand for a larger piece of code. In this case, we defined a new variable as tl and set it equal to new TimelineLite. This means that every time that we input tl in our code, it will stand for a new TimelineLite.

要逐步將這一行代碼分解，請知道var是變量的縮寫。如果您不了解變量是什么，可以將其視為更大代碼段的簡寫。在這種情況下，我們將新變量定義為tl ，并將其設置為等于new TimelineLite 。這意味著，每當我們在代碼中輸入tl時，它將代表一個新的TimelineLite 。

Note that we can substitute tl for any shorthand text we’d like. I’m using tl because it’s short for timeline. This is useful because if we have multiple timelines in our file, we can give each one a unique variable to prevent confusion.

請注意，我們可以將tl替換為我們想要的任何速記文本。我使用tl是因為它是timeline的縮寫。這很有用，因為如果文件中有多個時間軸，則可以為每個時間軸分配一個唯一的變量以防止混淆。

Let’s now recreate our first animation using TimelineLite instead of TweenLite to see how this works.

現在，使用TimelineLite而不是TweenLite重新創建我們的第一個動畫，以了解其工作原理。

var tl = new TimelineLite;tl.to(“#rectangle”, 2, { x:100, y:75, backgroundColor: “#000000”, ease: Power4.easeIn})

You’ll notice that this is not much different than our TweenLite animation from above. The only real difference is that instead of stating TweenLite.to we are using tl.to instead. You’ll also notice that we are now using x and y coordinates instead of left and top CSS properties. These more or less behave the same way.

您會注意到，這與我們上面的TweenLite動畫沒有太大區別。唯一真正的區別是，我們沒有使用tl.to聲明TweenLite.to 。您還將注意到，我們現在使用的是x和y坐標，而不是left和top CSS屬性。這些或多或少的行為相同。

Also, notice how there is no semicolon at the end of the parenthesis. This is because we are going to add a second animation to this timeline, tethering them together.

另外，請注意括號的末尾沒有分號。這是因為我們將向此時間軸添加第二個動畫，將它們捆綁在一起。

For this second animation, let’s make the rectangle scale up 150% and turn gray after the first animation is complete. To do this, we will add another block of code under our first animation. Altogether it will look like this:

對于第二個動畫，讓我們將矩形放大150％，并在第一個動畫完成后將其變為灰色。為此，我們將在第一個動畫下添加另一個代碼塊。總共看起來像這樣：

var tl = new TimelineLite;tl.to(“#rectangle”, 2, { x:100, y: 75, backgroundColor: “#000000”, ease: Power4.easeIn}).to(“#rectangle”, 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: “#454545”, ease: Back.easeOut.config(1.7)});

You can see that this second block of code doesn’t have the tl.to at the beginning of the timeline. Instead, it only has .to.

您會看到第二個代碼塊在時間軸的開頭沒有tl.to 相反，它只有.to 。

This is because multiple animations in one timeline can be tethered together as long as there’s no semicolon separating them.

這是因為只要沒有分號就可以將一個時間軸中的多個動畫捆綁在一起。

A semicolon signifies the end of a timeline and should only be used at the end of the last animation within a timeline.

分號表示時間軸的結尾，并且只能在時間軸中最后一個動畫的結尾使用。

You’ll also notice that we’re using two new properties, scaleX and scaleY. These properties behave exactly how they sound, they increase an object’s size by a percent amount. In this case, 1.5 is equivalent to 150%.

您還將注意到，我們正在使用兩個新屬性， scaleX和scaleY 。這些屬性的行為與聲音完全相同，它們將對象的大小增加了一個百分比。在這種情況下，1.5等于150％。

Finally, we’re using a unique easing function here called Back.easeOut.config(1.7). This ease gives a natural rhythm to our animation by overshooting the intended value and then coming back down to the final value. We can see in this animation’s case how the rectangle grows slightly bigger than 150% and then scales itself back down afterward.

最后，我們在這里使用了一個稱為Back.easeOut.config(1.7)的獨特緩動函數。這種輕松通過使目標值超調然后返回到最終值，使動畫具有自然的節奏。在此動畫的情況下，我們可以看到矩形如何逐漸增大到大于150％，然后再向后縮小。

使用TimelineLite對多個對象進行動畫處理 (Animating Multiple Objects with TimelineLite)

Timelines are not limited to animating one object. You can animate multiple objects in a timeline by adding their corresponding IDs in different functions.

時間軸不限于為一個對象設置動畫。您可以通過在不同功能中添加多個對象的相應ID來在時間軸中設置動畫。

For example, if we were to create an HTML object of a circle and have it fade in after our rectangle scales larger, our code would look like this:

例如，如果我們要創建一個圓形HTML對象，并在矩形變大后使其淡入，我們的代碼將如下所示：

We’ve added a third code block to our animation that calls the circle.

我們在動畫中添加了第三個代碼塊，稱為圓。

Also note how we’re now using the .from method. This means that our circle animation starts at 0% opacity and then goes to 100% opacity.

還要注意我們現在如何使用.from方法。這意味著我們的圓形動畫從0％不透明度開始，然后變為100％不透明度。

You can see this in action when our animation has the circle hidden because it starts at 0% opacity. After the rectangle changes color and scales up, the circle fades in at 100% opacity, just as intended.

當我們的動畫將圓隱藏起來時，您可以看到它的作用，因為它的透明度從0％開始。矩形更改顏色并按比例放大后，圓會按照預期以100％不透明度淡入。

You can see how TimelineLite works in this CodePen example here. I encourage you to try and add new elements to the HTML and try to create more complicated and unique sequences with the provided tools. You can also take a look at the full GSAP TimelineLite documentation here to learn about other methods and properties.

你可以看到TimelineLite如何在這個CodePen例子在這里。我鼓勵您嘗試向HTML中添加新元素，并嘗試使用提供的工具創建更復雜和獨特的序列。您還可以在此處查看完整的GSAP TimelineLite文檔，以了解其他方法和屬性。

繪圖SVG (DrawSVG)

Along with the free TweenLite and TimelineLite features, GSAP also offers premium content that allows you to manipulate SVGs with ease. Luckily, these plugins are available to play around with for free on CodePen by searching for them in the pen settings (the gear icon next to the JS text editor).

除了免費的TweenLite和TimelineLite功能之外，GSAP還提供了高級內容，使您可以輕松地操作SVG。幸運的是，通過在筆設置(JS文本編輯器旁邊的齒輪圖標)中搜索它們，可以在CodePen上免費使用這些插件。

The DrawSVG plugin makes it easy to animate the lines of an SVG. To show this, we’re going to have an SVG of a unicorn in a hoodie draw itself. You can follow along with the corresponding CodePen here.

DrawSVG插件可輕松為SVG的線設置動畫。為了說明這一點，我們將在連帽衫中繪制出獨角獸的SVG。您可以在此處跟隨相應的CodePen。

First, we need to export our SVG and import it into our text editor.

首先，我們需要導出SVG并將其導入到文本編輯器中。

For a comprehensive breakdown on how to properly export SVGs, check out a previous article here.

有關如何正確導出SVG的全面細分，請在此處查看上一篇文章。

Next, we need to give each of our individual paths an ID so that we can call each one in our timeline. This may take some time if you have a complicated SVG with a series of different animating lines. For the sake of simplicity, I’m going to name the first path #unicorn1 and name the next path #unicorn2 and so on until they all have a unique ID.

接下來，我們需要為每個路徑指定一個ID，以便我們可以在時間軸中調用每個路徑。如果您具有包含一系列不同動畫效果線的復雜SVG，則可能需要一些時間。為了簡單起見，我將命名第一個路徑#unicorn1并命名下一個路徑#unicorn2 ，依此類推，直到它們都具有唯一的ID。

<!––An example of a path with an ID--><path id=”unicorn1" class=”st0" d=”M371.8,252.4c0,0,2.8,1.8,5,1.2"/>

Now that all our paths have an ID, we can jump in and begin developing our timeline animation. Like before, we need to create a variable will function as our TimelineLite variable:

現在我們所有的路徑都有一個ID，我們可以進入并開始開發時間軸動畫。像以前一樣，我們需要創建一個將用作我們的TimelineLite變量的變量：

var unicorndraw = new TimelineLite();

In this case, we’re going to be using the variable unicorndraw.

在這種情況下，我們將使用變量unicorndraw 。

The last step we need to do is to create a TimelineLite animation that calls each of the individual paths:

我們需要做的最后一步是創建一個TimelineLite動畫，該動畫調用每個單獨的路徑：

unicorndraw.from(“#unicorn1, #unicorn2, #unicorn3, #unicorn4, #unicorn5, #unicorn6, #unicorn7, #unicorn8, #unicorn9, #unicorn10, #unicorn11, #unicorn12, #unicorn13, #unicorn14, #unicorn15, #unicorn16, #unicorn17, #unicorn18, #unicorn19, #unicorn20, #unicorn21, #unicorn22, #unicorn23, #unicorn24, #unicorn25, #unicorn26, #unicorn27, #unicorn28, #unicorn29, #unicorn30, #unicorn31, #unicorn32, #unicorn33, #unicorn34, #unicorn35, #unicorn36, #unicorn37, #unicorn38, #unicorn39, #unicorn40, #unicorn41, #unicorn42, #unicorn43, #unicorn44, #unicorn45, #unicorn46, #unicorn47, #unicorn48, #unicorn49, #unicorn50, #unicorn51, #unicorn52, #unicorn53, #unicorn54, #unicorn55, #unicorn56, #unicorn57, #unicorn58, #unicorn59, #unicorn60, #unicorn61, #unicorn62, #unicorn63”, 3, {drawSVG:”0", delay:”1"})

You can see how this is like our previous .from TimelineLite animation from before. We’re calling our individual objects (in this case, we’re calling more than one at a time so that they all animate at once) and we define the duration of the animation as 3 seconds.

你可以看到這是如何像我們以前.from TimelineLite動畫從之前。我們要調用單個對象(在這種情況下，我們一次要調用多個對象，以便它們一次都可以進行動畫處理)，并將動畫的持續時間定義為3秒。

The only difference is that inside the brackets, we’re now using drawSVG: “0”. This calls the drawSVG plugin and defines each path to have a value of 0. Because we’re using a .from method, the paths start with a value of 0 and then animate to 100% in 3 seconds.

唯一的區別是，在方括號內，我們現在使用drawSVG: “0” 。這將調用drawSVG插件并定義每個路徑的值均為0。因為我們使用的是.from方法，所以路徑的起始值為0，然后在3秒內設置為100％的動畫。

The other piece of code inside the brackets is delay: “1”. This determines how long the animation will wait to execute in seconds. In this case, we’re stating that the animation will wait 1 second before executing.

方括號內的另一段代碼是delay: “1” 。這確定了動畫將等待執行多長時間(以秒為單位)。在這種情況下，我們要說明動畫將在執行之前等待1秒鐘。

This is the fastest way to get started with the drawSVG plugin but you can manipulate the values in many different ways to get some interesting effects. To learn more about this plugin, check out GSAP’s site.

這是開始使用drawSVG插件的最快方法，但是您可以通過許多不同的方式來操縱值以獲得一些有趣的效果。要了解有關此插件的更多信息，請訪問GSAP 網站。

最后的想法 (Final Thoughts)

GSAP makes it easy to create and manipulate your own timeline animations even if you have little to no understanding of JavaScript. This was a small amount of the different animations you can do with GSAP. Check out Greensock’s site to learn more about the library and experiment with different animation techniques.

即使您對JavaScript的了解很少甚至根本不了解，GSAP仍可輕松創建和操縱自己的時間軸動畫。這是您可以使用GSAP進行的少量不同動畫處理。請訪問Greensock的網站，以了解有關該庫的更多信息并嘗試使用不同的動畫技術。

Nicholas Kramer is a designer currently working at Barrel in New York City. He solves design problems for businesses by helping them simplify ideas and communicate their value to customers.

Nicholas Kramer是一名設計師，目前在紐約市的Barrel工作。他通過幫助企業簡化構想并將其價值傳達給客戶來解決企業的設計問題。

Stay in Touch! Dribbble | LinkedIn | Website

保持聯系！ 盤帶領英網站

翻譯自: https://www.freecodecamp.org/news/the-beginners-guide-to-the-greensock-animation-platform-7dc9fd9eb826/