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.




Read more

2018年7月9日 星期一

GSAP 的 TweenMax 基礎教學

GSAP(GreenSock Animation Platform)是一個老牌的動畫服務,以往用在 flash 上,後來在 js 也都可以拿來使用,最近也滿多人把這隻應用在專案上,所以這邊也來介紹一下。


照文件的說明這隻在 DOM, SVG 和 canvas 都可以使用,使用的方法也是先下載或是透過 cdn 連結就可以開始使用了。

cdn 連結網址: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js


用法是 TweenMax.to(),裡面包含三個要素:
TweenMax.to(選擇器, 時間(單位: 秒), {屬性});


基本的應用如下:



裡面的屬性結合了 CSS3 的屬性,可以讓我們少寫很多 CSS3 的屬性,對應如下表:

GSAP CSS
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: 50 transform: translateX(50%)
yPercent: 50 transform: translateY(50%)





使用 TweenMax.from() 則可以讓動畫從設定的地方回到原本的地方




使用 fromTo 設定前後的樣式



Read more

2018年7月7日 星期六

[Pokemon Go] 超夢開圖以及歷來神獸心得

IMG_6284
IMG_6290

從台灣可以玩的第一天就開始玩的 Pokemon Go,在經歷了神獸開打半年左右的最近才終於收到超夢券,以前超夢道館開打的時候沒有券的看不到樣子,這回終於看到了。

IMG_6295
IMG_6296
IMG_6297
IMG_6299
IMG_6300
IMG_6303
IMG_6304

超夢感覺比蓋歐卡好打,蓋歐卡大概是歷來最難打的,打完後天氣很冷手很凍,第一球還太緊張沒丟到,還好調整後終於在第三球抓到開圖。
Read more

2018年7月6日 星期五

[jQuery plugin] Bootstrap 4 的 Tag input



Bootstrap 應該是現在很多人做網站都會用到的 UI Framework,在第四版之後有些舊版的 plugin UI 支援上可能有問題,這個 tag input 的功能應該也是不少想做內容型的網站的朋友需要用到的,就跟大家分享一下支援 Bootstrap 4 的 Tag input。


外掛網址: Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js


下載後將 css 和 js 掛上去就好了。
  1. <link href="tagsinput.css" rel="stylesheet" type="text/css">  
  2. <script src="tagsinput.js"></script>  

直接使用
  1. $(".taginput").tagsinput();  

option:
Read more

2018年7月4日 星期三

2018年7月3日 星期二

2018年6月29日 星期五

2018年6月28日 星期四

Related Posts Plugin for WordPress, Blogger...