Language

利用GreenSock JS動畫庫製作酷炫的動畫特效（staggerFrom 使用篇）

pig

• 4 min read

GreenSock是一款功能強大的ＪＳ動畫庫，官網中有完整的文檔說明，也有很多的

example使用教學。今天我們就來使用GreenSock來建立簡單的動畫效果。

首先先到官網下載源碼

staggerFrom 使用篇

範例code-1:

<body>   /*接著我們先在html中生成以下demo架構*/
<div id="demo">

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box"></div>
    <div class="box"></div>
    <div id="console">

    </div>
</div>
 <script src="js/jquery-1.11.3.min.js"></script>/*</body>之前引入jquery.js*/
<script src="js/TweenMax.min.js"></script>/*</body>之前引入TweenMax.min.js ( GreenSock 其中之一動畫庫）*/
    <script>
// staggerFrom基本使用方式 
     var tl = new TimelineMax()
    tl.staggerFrom(".box", 0.5, { 
    cycle: {

        backgroundColor: ["red", "white", "#00f"],
        x:[100,200,300]
    }
}, 0.1);

</script>
</body>

實現的效果圖：

範例code-2:

<body>   /*接著我們先在html中生成以下demo架構*/
<div id="demo">

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box"></div>
    <div class="box"></div>
    <div id="console">

    </div>
</div>
   <script src="js/jquery-1.11.3.min.js"></script>/*</body>之前引入jquery.js*/
<script src="js/TweenMax.min.js"></script>/*</body>之前引入TweenMax.min.js ( GreenSock 其中之一動畫庫）*/
    <script>
// staggerFrom基本使用方式 
     var tl = new TimelineMax()
tl.staggerFrom(".box", 0.5, {
    cycle: {
      rotationX:[-90,90],
      transformOrigin:["50% top -100","50% bottom 100"]
    }
}, 0.1);
tl.timeScale(0.5);

</script>
</body>

實現的效果圖：

範例code-3:

<body>   /*接著我們先在html中生成以下demo架構*/
<div id="demo">

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box"></div>
    <div class="box"></div>
    <div id="console">

    </div>
</div>
   <script src="js/jquery-1.11.3.min.js"></script>/*</body>之前引入jquery.js*/
<script src="js/TweenMax.min.js"></script>/*</body>之前引入TweenMax.min.js ( GreenSock 其中之一動畫庫）*/
    <script>
// staggerFrom基本使用方式 
var tl = new TimelineMax()
tl.staggerFrom(".box", 0.5, {
    opacity:0,
    cycle: {
     x:function(){
        return Math.random()*300;
     }
}
    }, 0.1);
tl.timeScale(0.5);

</script>
</body>

實現的效果圖：

範例code-4:

<body>   /*接著我們先在html中生成以下demo架構*/
    <div id="demo">

    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box"></div>
    <div class="box"></div>
    <div id="console">

    </div>
</div>
   <script src="js/jquery-1.11.3.min.js"></script>/*</body>之前引入jquery.js*/
<script src="js/TweenMax.min.js"></script>/*</body>之前引入TweenMax.min.js ( GreenSock 其中之一動畫庫）*/
    <script>
// staggerFrom基本使用方式 
 var tl = new TimelineMax()
tl.staggerFrom(".box", 0.5, {
    opacity:0,
    cycle: {
     x:function(i){
        return i * 50;
     },
     ease:function(i){
        return Back.easeOut.config(i);
     }
}
    }, 0.1);
tl.timeScale(0.5);
</script>
</body>

實現的效果圖：