[RPG] 搖搖呼拉圈 gif animate

是說，做動畫還真的比想像中的難很多Q__Q...
最後就想說還是用 gif 就好了～剛好也有找到可以用的 gif 製作工具～
（gif 製作工具是很多沒錯，但不知道為啥，很多都沒有透明背景，超傷腦筋的，而且還花了一些冤枉錢T__T）
別說 photoshop/illustrator 都可以圖層轉 gif 之類的，因為人窮又不想用窮人版麻 |||Orz...
是說以前玩過，其實我並沒有覺得很好用，只是市面上也沒太多選擇～
一是覺得 太肥，很慢...而且改版後，越改越難用，去copy來的窮人版又都有病毒....
所以現在都儘量找平民的替代品中～

總之說一下目前用的 gif 製作工具～
mac 上的 GIF Animator，算便宜的～
https://itunes.apple.com/us/app/gif-animator/id512165265
只要讀入的是有透明背景的png，然後不要手賤去設背景色，產出就會是透明的GIF了～
（之前有買過用過別的，他們都很煩，強迫或多事去設定背景色，然後就都不透明了T__T）

接著試做了
http://www.realmofprogrammersgamble.website/journal/ch1/jourif1.html

準備底圖
http://www.realmofprogrammersgamble.website/imgs/event1/sport0.png
動畫圖 （loop=infinite）
http://www.realmofprogrammersgamble.website/imgs/event1/sport.gif

製做時圖一開始就是都 load進來了，基本上就只是一張顯示，一張不顯示。
html

<img src="/imgs/event1/sport0.png" id="img_t2" class="timg" style=" left: 58%; top: 52%; ">
<img src="/imgs/event1/sport.gif" id="img_t3" class="timg" style=" left: 58%; top: 52%; display: none;">

至於互動 click 時，就是切換 display 而已^^a...
為了加點樂趣～ 所以就讓運動的時間是 random 出來的～
而一般讓 GIF 重load 的寫法就是～ src 重新給值
ex: $('#img_t3').attr('src', '/imgs/event1/sport.gif');
是說，這gif 會一直重複，到是說沒加這段也還好～

click event
 var ts = randIntRange(1, 5);
$('#img_t2').css('display', 'none');
$('#img_t3').css('display', 'block');
$('#img_t3').attr('src', '/imgs/event1/sport.gif');
var tt2 = setTimeout(function()  {
$('#img_t3').css('display', 'none');
$('#img_t2').css('display', 'block');
}, 1000*ts+20);

是說，多搖幾次，會碎碎念的XD...
有一部分也是每年過年後要減肥的心情|||Orz...