2018年7月10日 星期二

TweenMax 教學- Special properties

Easing
在 TweenMax 還可以延伸做更進階的動畫效果,他們在 easing 這類設計了一些還不錯的效果,用法是類似這樣:
ease:Bounce.easeOut

要看各種 ease 效果可以參考官網的產生器,選擇一個喜歡的 easing 效果就好了。


簡單範例如下:




Callbacks
可以再以下各階段執行 callback
  • onComplete: 動畫完成時
  • onStart: 動畫開始時
  • onUpdate: 動畫更新時
  • onRepeat: 動畫重複時
  • onReverseComplete: 動畫倒轉完成時

  1. TweenMax.to("#logo", 1, {x:100, onComplete:tweenComplete, onCompleteParams:["done!"]});   
  2.   
  3. function tweenComplete(message) {   
  4.   console.log(message);   
  5. }  


參考官網範例如下:

See the Pen Callbacks and parameters by GreenSock (@GreenSock) on CodePen.




控制動畫
可以用以下方式控制動畫
  1. //create a reference to the animation   
  2. var tween = TweenMax.to("#logo", 1 {x:100});   
  3.   
  4. //pause   
  5. tween.pause();   
  6.   
  7. //resume (honors direction - reversed or not)   
  8. tween.resume();   
  9.   
  10. //reverse (always goes back towards the beginning)   
  11. tween.reverse();   
  12.   
  13. //jump to exactly 0.5 seconds into the tween   
  14. tween.seek(0.5);   
  15.   
  16. //jump to exacty 1/4th into the tween's progress:   
  17. tween.progress(0.25);   
  18.   
  19. //make the tween go half-speed   
  20. tween.timeScale(0.5);   
  21.   
  22. //make the tween go double-speed   
  23. tween.timeScale(2);   
  24.   
  25. //immediately kill the tween and make it eligible for garbage collection   
  26. tween.kill();  


See the Pen NMrBbE by GreenSock (@GreenSock) on CodePen.




反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...