2018年9月4日 星期二

TweenMax 教學- 序列動畫 Timeline

如果想要做序列動畫,可以使用 TimelineMax 來製作,使用方法首先 new 一個 TimelineMax 的物件,可以設定重複次數跟重複開始時間等,再對每個元素設定變化的值,就可以依序跑動畫了。

See the Pen TweenMax Timeline by deathhell (@deathhell) on CodePen.




串在一起

See the Pen TweenMax Timeline Chain by deathhell (@deathhell) on CodePen.




可以設定每個元素開始的時間,在動畫後面設定 +=1 就會比原本序列動畫設定的時間晚 1 秒開始,-=1 則是會快 1 秒,也可以使用 addLabel 設定群組讓動畫一起執行。

See the Pen TweenMax Timeline Chain by deathhell (@deathhell) on CodePen.



一樣可以控制動畫的執行。

See the Pen Timeline Controls by GreenSock (@GreenSock) on CodePen.




此外還可以用以下方式設定動畫的數值

time(): the local position of the playhead (the current time, in seconds) not including any repeats or repeatDelays.
progress(): the tween's progress which is a value between 0 and 1 indicating the position of the playhead where 0 is at the beginning, 0.5 is halfway complete, and 1 is at the end.
duration(): the animation's duration (in seconds), not including any repeats or repeatDelays.
delay(): the animation's initial delay (the length of time in seconds before the animation should begin).


這個則是使用 .timeScale() 去加速或減速動畫。

See the Pen getter setter method demo by GreenSock (@GreenSock) on CodePen.

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...