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

js的代碼文件如下：

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

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

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

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

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

<code>.fa-motorcycle{
    color: #333; 

    font-size: 50px;
    line-height: 30px;
    margin-top: 68px;
    margin-left: 20px;
    position: relative;
    left: 600px;
}
/<code>

接下來我們修改js文件：

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

4、多個動畫同時執行，讓小摩托更加拉風

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

<code>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"});
/<code>

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

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

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

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

6、添加過渡效果，讓小摩托運動更加自然

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

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

這裡你可能注意到了，我們這裡使用了Power4，這個屬性，其實這個屬性有 Power0~4 這幾個屬性，這個屬性從低到高依次增強動畫的運動屬性，感興趣的話可以親自嘗試下。

7、添加 Transformation 變換屬性，秀一把車技

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

<code>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
});
/<code>

小節

今天的內容就和大家分享到這裡，感謝你的閱讀，希望能引起你對 GSAP 的興趣，並能在項目中進行嘗試。如果你喜歡我的分享，麻煩給個關注、點贊加轉發哦，你的支持，就是我分享的動力，後續會持續分享這個庫的案例，歡迎持續關注。

閱讀更多 前端達人 的文章

關鍵字: jQuery 網頁