Back

TweenMax 入門筆記

how to use TweenMax

TweenMax GASP入門介紹

TweenMax是一個好用的動畫工具, 我覺得比jQuery更直覺,這系列筆記是根據 mike 成智遠老師 的TweenMax動態特效課程

先備知識:

css animation 概念

javascript 基本概念 如:else if / Function / for

1.物件id =>#box移動的物件

2.多少秒數執行完成 =>動作的屬性

3.x:“700px” 屬性 => 水平位移 700px


TweenMax.to("#box",1,{x:"500px"})



注意點

  • 似jQuery 的id命名方式
  • 在網頁的世界裡面,(x,y) 起點是從左上角開始
  • 第三個參數 是用物件包著{}

demo

由左向右移動的車子(圖片為已完成行動時)

Scale 比例縮放

效果出現對話框

目的:如何使用 TweenMax 把東西縮放?

第一步

針對物件對話 做變化

transftom:scale(0,0) 是縮到最小到看不到

    #dialogBox{
        position: absolute;
        top: -20px;
        left: -30px;
        width: 259px;
        height: 196px;
        transform: scale(0, 0);//對話框縮到做小
        background-image: url("https://upload.cc/i1/2020/08/25/rBMF6j.png")

    }

我們就針對這個來做變化

在很多程式的概念裡面,0是為小,1為最大。

TweenMax.to("#dialogBox",1,
            {
  scaleX:1 ,//控制x方向大小
  scaleY:1 ,//控制Y方向大小

})

第二步 動畫物件位置

我們希望對話框可以從右下角跳出來,所以從 transform-Origin 變動位置,那記得一開始所說的物件最開始都是(0,0)左上角

中間為(50,50) 右下方為(100,100)

TweenMax.to("#dialogBox",1,
            {
  scaleX:1 ,//控制x方向大小
  scaleY:1 ,//控制Y方向大小
  transformOrigin:"100% 100%",//動畫縮放中心點位置,希望從右下角開始

})

第三步 速率變化

https://greensock.com/ease-visualizer

ease 是 TweenMax 針對動畫速率的屬性,我們可以根據上面網址知道各個效果是如何的?

根據面板下面紅色框起來 複製下來放到 ease:“bounce.inOut” 測試你想要的動畫速率屬性。

TweenMax.to("#dialogBox",1,
            {
  scaleX:1 ,//控制x方向大小
  scaleY:1 ,//控制Y方向大小
  transformOrigin:"100% 100%",//動畫縮放中心點位置 印為希望從右下角開始
  ease: "bounce.inOut"//控制動畫速率的部分  https://greensock.com/ease-visualizer
})

demo

CSS 屬性控制

用TweenMax 來操作css部分來產生動畫

效果:頁面載入時,畫面由左到右 畫面寬度由 0% 到100%

 #box{
    width: 0%; /*畫面設定為寬度0%*/
    height: 100%;
    background-color: cadetblue;
    background-size:cover;
    background-image: url("https://upload.cc/i1/2020/08/25/cz9MS1.jpg");
}
 TweenMax.to("#box", 3,
    {
        width:"100%",
        ease: Bounce.easeOut//加上動畫速率使為生動
    }
);

demo

comments powered by Disqus