TweenMax是一個js的動畫庫，包含兩大部分，分別為補間動畫(Tween)和時間軸管理(TimeLine)。
先簡單介紹TweenMax的基本用法：
TweenLite.to( target:Object, duration:Number, vars:Object )[static] Static method for creating a TweenLite instance that animates to the specified destination values (from the current values)// 範例TweenLite.to('#test', 3, {
x: 600,
rotation: 360,
scale: 0.5
})
如上是官網的介紹，可以帶入3 個參數，分別是「 target目標物件」、「duration動畫時間」、「vars動畫相關參數」。
其中 vars可包含的參數，有下面幾項：
delay: '延遲時間(s)，在此動畫應該開始前計算delay秒數',ease: '動畫運行曲線',repeat: '重複的次數，不包含第一次',yoyo: '(T/F)動畫再重複時，是否會來回執行，而不是從頭開始',yoyoEase: '設定repeat，從尾到頭時，動畫的運行曲線，同上 ease屬性',paused: '(T/F)為ture，對象在create後就會停止',overwrite: '要不要發生覆寫這件事，如果是“none”就是不發生、”all“就是發生',roundProps: '進行補間運算時，取最近的整數(帶入想要取整數的屬性ex:left..)'onComplete(function): '當動畫結束時，會執行的函式'onCompleteParams(Array): '帶入onComplete的參數，用'{self}'可拿到本身 tween實例'lazy: '預設true，這是為了解決效能的問題，預設會先讀完所有的動畫後，在執行'
參考：https://www.youtube.com/embed/TMHJptqnDpU?vq=hd720immediateRender: ...還有
這些參數中overwrite 一開始讓我很困惑，
後來研究才了解，
他設定的是，覆寫這件事，會不會發生。
而所謂覆寫的意思是，
新的動畫，會直接蓋掉舊有動畫設定。
如果overwrite: ‘none’，即表示覆寫不發生，
所以假設有2個相同時間、物件觸發的動畫，並有改變相同的property
如下所式：
.box{
position:relative
}//動畫1TweenMax.to(".box", 6, { left: '600px', opacity: 0})//動畫2TweenMax.to(".box", 6, { top: '600px', opacity: 1, overwrite: "none" // overwrite: "all"})
兩個動畫都改變了opacity，
但因為overwrite不會發生，
所以你會發現， .box動畫執行時，
opacity值，一直再0.9xxx….之間跳動，
因為這兩個動畫一直在互相影響，
但.box 初始值是opacity: 1
所以最後執行結果就是維持在1
如果我們把overwrite 改為 “all”，
意思即是，不管前個動畫正在做什麼，
給我停下來，
換執行我的設定值！！！！
於是動畫1的設定會完全被忽略。
而其實，overwrite的預設值為‘auto’，
意思是，當前動畫有衝突時，
只會覆寫掉有衝突的property
//動畫1TweenMax.to(".box", 6, {left: '600px',opacity: 0})//動畫2TweenMax.to(".box", 6, {top: '600px',opacity: 1,})// 拿掉了原本上面overwrite 的設定
此時.box就會往右下移動，且opacity一直維持在1，
因為overwrite:auto的預設，
讓有衝突的property直接被覆寫了。
當然TweenMax不是只有.to()這個方法，還有
.from()
.staggerFrom() ….
後續的文章，再繼續介紹。