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