二月 18, 2016 | 前端與Vue

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

GreenSock是一款功能強大的JS動畫庫,官網中有完整的[文檔說明](http://greensock.com/docs/#/HTML5/GSAP/),也有很多的example使用教學。今天我們就來使用GreenSock來建立簡單的動畫效果。

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

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>

實現的效果圖: