PC端頁面 + TweenMax實戰應用

TweenMax在PC端實戰應用

歡迎學習 TweenMax在PC端實戰應用 咱們這套課程，徹底是爲了更好的理解TweenMax如何實現動畫才建立的，但願能夠給你們有多一點的啓發。

1. 計算算法與經常使用語法總結

var t = new TimelineMax()

t.to(選擇器,持續時間,{具體動畫1,具體動畫2...},延遲時間)

多個動畫如何計算延遲時間，用上一行的動畫用持續時間+延遲時間，做爲基數而後就能夠算出下一個動畫應該延遲幾秒了，好比：

t.to('#box',1,{left:100},1)
 t.to('#box',2,{width:90},3) //延遲1秒
 t.to('#box',2,{height:90},6) //延遲1秒
複製代碼

上面的公式有一些不動態，若是改了一個時間，下面的都須要修改，維護很麻煩，如何去解決呢？

t.to('#box',1,{left:100},1)
t.to('#box',2,{width:90},"+=1")
t.to('#box',2,{height:90},"+=1")
//+=1的意思就是，無論上面你加多少秒，我都在原有基礎上加上1秒
複製代碼

意思跟上面是同樣的，都是加入延遲一秒，區別是動態和寫死的區別

2. 小案例1，進入狀態

你們能夠發現動畫是依次執行
========================================
<script src="TweenMax.min.js"></script>
========================================
<style>
  #box{position: absolute; width: 30px; height: 30px; background: #ccc;}
</style>
========================================
<div id="box"></div>
========================================
var t = new TimelineMax();
t.to('#box',1,{left:100})
t.to('#box',2,{width:90})
t.to('#box',2,{height:90})
t.to('#box',2,{top:200})
t.to('#box',2,{rotationZ:180})
t.to('#box',2,{opacity:0})
複製代碼

gif動畫預覽