GSAP動畫庫入門基礎示例:心愛的小摩託

大家好，在我們談論網頁動畫時，我們第一時間會想到用jQuery的animate()方法或者CSS3的animation和transition。今天的這篇文章，我將給大家推薦另一個可選方案，一款專業的Web動畫庫GSAP，通過這款工具你能做出絢麗複雜的動畫效果，通過本篇文章的學習，你將會學習到什麼是GSAP，以及相關的入門基礎知識。

一、什麼是GSAP？

GSAP全稱是GreenSock Animation Platform，是一個JS動畫框架。

GSAP有兩個版本，一個為ActionScript 版本，已經在flash平臺上運行多年，是一個「輕量級」、「高效率」、強大的2D動畫引擎，一直深受ASer（學ActionScript的人都叫自己 ASer）的歡迎，學AS的人，沒有一個說是不知道、沒使用過GSAP的。

GSAP JS顧名思義是指GSAP的js版本，GSAP JS是GreenSock公司新出的一個2D動畫引擎，可以說是AS版本的移植版，雖然功能還不夠AS版本的完善，但是一樣是非常強大、高效、好用的，據說它的運行速度是JQuery的20倍（動畫方面的性能）。

有興趣的可以訪問官網，查看更多相關資料：https://greensock.com/

二、 GSAP的特點運行速度快，GSAP專注優化動畫的性能，儘量接近與CSS一致的高性能。輕量與模塊化。將功能進行拆分，讓核心框架保持輕量，TweenLite包非常小，同時提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的動畫模塊，可以按需使用，無需依賴。靈活控制。不用受限於線性序列，可以重疊動畫序列，你可以通過精確時間控制，靈活地使用最少的代碼實現動畫。

說了這麼多我們來看官方的視頻介紹吧（英文原聲視頻，沒有字幕翻譯，請大家多多包涵），順便練練英語聽力。

三、 如何安裝與引用？

GSAP既然這麼好，我們如何安裝和引用呢？

去官網下載核心庫的JS文件：gsap.min.js，目前版本大小不到60K。        https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js通過npm或yarn安裝，安裝命令分別如下：npm install gsapyarn add gsap四、入門案例：心愛的小摩託

說了這麼多，我們來看看如何使用，這裡介紹的是JS原生的使用方式，如果你感興趣 React、Vue 、Angular 的使用方式，請訪問官網。這裡我將通過心愛的小摩託示例，帶著大家熟悉下最基礎最核心的API。在介紹之前我們來聽一段前段時間很火的音樂：我騎上心愛的小摩託，作為課前的案例預熱，😁😁😁

1、準備基礎環境

首先我們需要引用核心的JS文件：gsap.min.js其次再引用一個簡易版的常用圖標CSS庫，這裡有我們心愛的小摩託:   https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

<div class="sky">
<i class="fa fa-motorcycle"></i>
</div>
<div class="ground"></div>

i 標籤的內容就是引入 font-awesome 圖標庫的小摩託圖標

body { margin: 0; }

.fa-motorcycle {
color: #333;
font-size: 50px;
line-height: 30px;
margin-top: 68px;
margin-left: 20px;
}

.sky {
background-color: #adf;
height: 100px;
}

.ground {
background-color: #778;
width: 100%;
height: 30px;
}

淡藍色好比天空，灰色好比地面，地面上停了一輛酷酷的黑色摩託車，準備工作到此完成，我們來利用 GSAP 的 API 開動摩託車吧！

2、使用 gsap.to() 方法，讓小摩託向前600px

gsap.to() 就是告訴動畫對象，最終要達到的運動狀態，這個函數有兩個關鍵參數：

第二個參數就是要告知動畫最終效果的對象：動畫時長、是旋轉還是位移變化、或者其它屬性的變化

js的代碼文件如下：

const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle,{
duration:2,
x:"600px"
});

上述代碼告知我們的小摩託，需要在2秒內向前開動600px，duration是動畫時長的設定，x表示在橫軸方向位移，這裡你還可以用left:"600px", 但是你需要在CSS的 .fa-motorcycle 中添加 position: relative 屬性，否則你看不到動畫效果。

3、使用 gsap.from() 方法，讓小摩託向前600px

這個函數的功能與gsap.to()的調用方法一致，你需要告知函數現有的狀態是從原來的哪個狀態轉換過來的，就好像把過去發生的動作回放了一遍 。

首先我們修改 .fa-motorcycle 類 ，讓摩託車先向右移動600px

.fa-motorcycle{
color: #333;
font-size: 50px;
line-height: 30px;
margin-top: 68px;
margin-left: 20px;
position: relative;
left: 600px;
}

接下來我們修改js文件：

const cycle=document.querySelector(".fa-motorcycle");
gsap.from(cycle,{
duration:5,
left:"0px"});

接下來，為了讓我們騎著心愛的小摩託更加拉風，我們讓動畫由遠及近逐漸顯示，同時並非直線騎行，往下移動20px。這些動作都是同時進行的，我們可以同時添加多個gsap.from()或gsap.to()，示例代碼如下：

const cycle=document.querySelector(".fa-motorcycle");
gasp.to(cycle,{
duration:2,
x:"600px"});
gsap.from(cycle,{
duration: 2,
opacity:0});
gasp.to(cycle,{
duration:2,
y:"20px"});

這裡我們用到了opacity 屬性，讓我們的小摩託先隱藏起來,然後逐漸顯示；y:"20px"，其意思就是往下移動20px。

5、多個動畫屬性寫在一起，變成藍色小摩託

黑色的小摩託雖然拉風，偶爾也需要換下口味，我們把灰色的小摩託在運動過程中變成藍色的小摩託，你可以一口氣將想要改變的屬性寫在一個動畫對象裡，示例代碼如下：

const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle,{
duration:2,
x:"600px",
y:"20px",
color:"blue"
});

為了讓運動效果更加自然，我們需要添加一些過渡效果，比如css動畫裡常見的linear,ease-in,ease-out,ease-in-out，這些運動效果，GSAP也是支持的，這裡我使用了 ease-in-out 這個屬性，慢慢加速起來然後慢慢停下來，這樣騎摩託才安全，如下代碼所示：

const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle,{
duration:2,
x:"600px",
ease:Power4.easeInOut
});

這裡你可能注意到了，我們這裡使用了Power4，這個屬性，其實這個屬性有 Power0~4 這幾個屬性，這個屬性從低到高依次增強動畫的運動屬性，感興趣的話可以親自嘗試下。7、添加 Transformation 變換屬性，秀一把車技

學了這麼多，接下來我們秀一把車技，將車把抬高45度，再加一些反彈動效，讓效果更加接近真實的物理世界。這裡我們用到了rotation屬性，進行角度的旋轉，以及Bounce反彈的動效屬性，最後別忘記改變角度旋轉的作用點，是在車後輪，這裡用到了transformOrigin進行更改，最終完成的代碼效果如下圖所示：

const cycle=document.querySelector(".fa-motorcycle");
gsap.to(cycle,{
duration:2,
x:"600px",
ease:Power2.easeOut,
});
gsap.from(cycle,{
duration:1,
rotation:-45,
transformOrigin:"10px bottom",
ease:Bounce.easeOut
});

五、官方入門視頻如果你覺得上面的內容還沒學夠，意猶未盡的話，推薦你看下官方的視頻，內容如下（很抱歉，也是英文原聲，希望你能耐心的看下去）小節今天的內容就和大家分享到這裡，感謝你的閱讀，希望能引起你對 GSAP 的興趣，並能在項目中進行嘗試。如果你喜歡我的分享，麻煩給個關注、點讚加轉發哦，你的支持，就是我分享的動力，後續會持續分享這個庫的案例，歡迎持續關注。

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！