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