[RPG] fix chrome restart gif animate

動畫用 GIF 在呈現上好做多了～重點是美觀 Q__Q

在互動 click 時，就讓他跑一下 GIF...
gif restart 的用法，原則上就是
$('#imgXXX').attr('src', 'imgs/XXXX.gif');

不過～試著試著...發現 chrome 有點 bug...Orz...
（講好聽點是設計理念不同...但在我的情況看起來就是bugg...）

這問題曾出在
http://www.realmofprogrammersgamble.website/journal/ch1/jourif2.html
切換語系，重現劇情...
人在走的時後的動畫

http://www.realmofprogrammersgamble.website/imgs/event1/walk.gif

這個問題會發生在，GIF loop=1 的情況（通常gif 不重複 repeat != infinite，就是loop=1）
配合 Chrome 的加持就會出現...

GIF 只會在一開始的時後，乖乖的跑一次動畫...
之後你再重設 src/background 的 gif 時，他會一直定格在最後的 frame 上
（看起來就是不會動了Orz）

查網路出來有蠻多說法～和解法～

有人是用 src=XXXXX.gif?Time=new Date()
這個是有效的～強迫chrome 不要cache...
但是缺點在於 網路會一直去server 要新圖片，吃我的頻寬（＄）
還有 網路傳輸延遲的問題...

最後找到一篇～其實之前已經試了很多說法，都是死馬當活馬醫...
但是看到的當下也是挺傻眼的XD...（原來降子也行！）
這招真的挺妙的就是～有種騙瀏覽器的感覺XDXD...
http://stackoverflow.com/questions/10730212/proper-way-to-reset-a-gif-animation-with-displaynone-on-chrome

簡單的說就是～ setTimeout 延遲一下下去 load 圖檔...
（話說這篇的點閱打勾還真的不高...）
是說延遲的部份，似乎會看該gif的大小，就gif檔越大，延遲要久一點才會出來～
（就當是圖檔重新下載的時間吧O_oa）

為了讓動畫看起來 smooth 一點，我稍為改進了一下，（直接display block，他開頭還是會有前面最後一格(setTimeout還是有delay，不管設多短 )，感覺會跳，所以再用 opacity 騙一下眼睛）

        // GIF restart
$('#img_g1').css('display', 'block');
        // 透明度0，就不會看到之前的最後 frame 內容
$('#img_g1').css('opacity', '0');
        // setTimeout 解決 chrome 不重跑 gif 的 frame
var ta = setTimeout(function()  {
$('#img_g1').attr('src', '/imgs/event1/walk.gif');
                // 他重跑時才看得到
$('#img_g1').css('opacity', '1');
}, 10);

        // 這段是讓動畫跑完就關掉了
var tb = setTimeout(function()  {
$('#img_g1').css('display', 'none');
$('#img_g1').css('opacity', '0');
}, 2500);

[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...

[RPG] 搖春花 more and more and animate

原本並沒有打算做 X搖錢樹（O搖春花）的，只是因為卡發糕卡太久～
又覺得效果不太好＝.＝|||...
剛好又碰到過年前，軍心渙散（反正大家都在等過年，也都不想多事）
是說有點閒，就開始想東想西的～
想說過年麻，大家都喜歡招財進寶一下～
所以～那就來搖一下好了XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

搖春花～

其實多搖幾下，會越來越多，最後就會變成下雨囉XD...

這次的重點在於， 越來越多的 span（＄），random，和 jquery animate 位移...

有大概試一下，在pc上 chrome/firefox 就大概可以上到 三百，四百個物件都感覺還好～
但是手機就....手機在一百多個物件後就開始有明顯的 lag...
（看硬體啦，我中階手機跑得挺痛苦的，但聽朋友測 ipad 順順）
所以將就配合一下，改成手機可以接受的數量就好了～
（原本想判別解析度，做物件數量差異，但後來想到還有直式/橫式，就懶了一_一）
不過寬度到是會影響 $ 字的大小（當量不夠大時，把東西變大，看起來也就滿滿的了XD）

單一作法其實都蠻簡單的（就是設定合理區間內，一直random）
不過就是整合了好幾種，好幾項～
花最多時間是在調整區間...
還有手殘改壞或是覺得效果不對時，在茫茫的參數海中找是誰的錯Orz...
（這篇的動畫又做太長，光要等他跑到那段，30s又過去了Orz...）

拼命用的 random function
function randIntRange(min, max)  {
var tmp = Math.floor(Math.random()*(max-min))+min;
return tmp;
}

jquery animate 有個優點就是，他同一個 元件(div/span) 的 animate 是有照順序的，但不同 元件要照順序還是只能用 setTimeout。不過也已經好用很多了，
貼一下噴錢的動畫實作

//多久位移一次（移動時間）
var pms = randInt(70)+50;
//每次位移x  （平移量x）
var dx = randInt(750)+10;
//每次位移y  （落下量y）
var dy = randInt(10)+5;
// 往右跑，或是往左跑 （方向）
var isup = randInt(10)+1;
//移動幾次
var ts = randInt(10)+5;

for(var i = 0 ; i < ts ; i++)  {
// 仿拋物線的位移量
var vx = Math.round(Math.pow(i*dx, 0.5));
var vy = dy*i;

if (isup > 5) {
tx -= vx;
}  else  {
tx += vx;
}
ty += vy;
// 修正不要跑出畫面（不然會跑出 scroll bar...但這參數沒有調很好，偶爾還是會）
if (ty > maxh-40) {
break;
}
if (tx > maxw-40) {
break;
}

// 交給 jquery animate 做移動～
$('#'+gid).animate({
left: tx,
top: ty,
opacity: 1
}, pms, function() {
;
});
}

[RPG] 發糕 canvas animate

在發糕篇～
http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

概念圖一開始出來的時後，是沒有發糕這個東西的～
就有人說，那顆蛋是不是也要裝飾什麼～
嗯？！一開始有想過在蛋上貼個「滿」「福」之類的...
後來就想到老媽這幾年都自己在做發糕～想說發糕底下用碗裝，跟底座也很像阿XD～
（就有一年陪老媽準備年菜時，偶有被訓過，發糕在蒸的時後，不能偷看，不能亂講話，靜靜等著就好....）

原本的發糕動畫，是 css transform，scale 從小到大～
但被嫌棄說...有 power point 的 fu...Orz...
聽了真是受傷（不過認真的想，這是事實沒錯～囧/）
不過說真的，我又沒看過發糕在發的時後，是長怎麼樣的XD...當年被禁止偷看阿阿阿～
後來就討論說，可能是像土司蛋糕膨起來的樣子吧O_o?...
（雖然後來實作出來像是烤麻糬XD，覺得這樣比較有趣麻^~^...）

這段動畫是用 canvas 畫出來的，真的是有寫到起孝的感覺Orz...
重點大概就是～ 數學真的很重要，canvas 的 ctx.globalCompositeOperation = 'destination-out' 好用，變量計算時，要用相對值（比率）而不是絕對值（螢幕大小問題）....

用 canvas 先畫出原圖，底下是個微倒梯形，上面則是圓形～
一開始用 lineTo/arc 畫範圍，但....有個問題在於算出來的小數點在畫面上被進/去位時，就有一條很蠢的細線.....最後是用 向量繪圖概念的 圖形相加減裁切，總算得到完美的土司形了...
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
PS: canvas  基本的 clip 非常難用，可以用向量圖概念處理比較簡單

function cakeCurve(ctx, w, h, p) {
var of = 5;
var h2 = h-h/3;

//cx = w/2, cy = p, the point= 0, h2
var cx = w/2, cy = p;
var r = Math.round( Math.pow(Math.pow(cx, 2) + Math.pow(h2-cy, 2), 0.5) );
//console.log("cx="+cx+", cy="+cy+", r="+r);

ctx.beginPath();

if (p == 0) {
ctx.moveTo(0,h2);
}  else {
//x,y = w/2(cx), y=h2, sin= ??/r
var a1 = r*1.0/w*0.5;
var a2 = w*0.5/r;
ctx.arc(cx,cy, r , a2, a1);
}
ctx.lineTo(w ,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(of, h);
ctx.lineTo(0, h2);
ctx.moveTo(0,h2);
ctx.closePath();
ctx.fill();

//clip left coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0,h2);
ctx.lineTo(of, h);
ctx.lineTo(0, h);
ctx.closePath();
ctx.fill();

//clip right coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(w,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
}

接著就是讓他動起來～也沒啥就是 setTimeout 叫他拼命畫 Orz...
概念就是 frame rate (fps)， 反正 60 fps就已經看不出來了～
讓我意外的是，手機在畫沒有lag感...小塊的動畫要用 canvas 來重繪，看起來還是可行的～
（倒是之前蠢蠢的，沒注意到小螢幕變量要用 相對值，而不是絕對值...還以為是手機畫不出來Orz）

  drawCake('ccake', clrs[0], w, h, 0);
  var pms = 70;
  var delay = 0;
  for (var i = 0 ; i < clrs.length ; i ++) {
   var aa = "drawCake('ccake', '"+clrs[i]+"', "+w+", "+h+", "+(220-i*5)+")";
delay += pms;
setTimeout(aa, delay);
  }

function drawCake(cavId, clr, w, h, p, scale)  {
var canvas = document.getElementById(cavId);
    var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;

if (scale) {
 ctx.scale(scale, scale);
}
var grd = ctx.createLinearGradient(0,0,0,h);
grd.addColorStop(1, clr);
grd.addColorStop(0.5, '#ff9100');
grd.addColorStop(0, '#e65100');

//ctx.fillStyle=clr;
ctx.fillStyle=grd;
cakeCurve(ctx, w, h, p)

//ctx.stroke();
}

不過因位調整變量，顏色等....實在讓我覺得太累了...
數學不好還硬要模擬物理，真是太為難了...
（塗色只用漸層，沒有陰影打光，fu 整個就不太好（跟整體的畫風有不協合感）～突然想到以前當 3D 遊戲剛出來時，那種粗糙生硬的 3D 模組和顏色，就像這種fu...還不如 2D苦工繪圖動畫）
一.一所以以後不會搞這種的，是說也沒有那麼多時間可以研究這塊Orz...

[RPG] 抖抖 jquery animate shake

在 css3 裡， animate 已經可以實用了～
不過在一些 互動式的動畫，我個人比較偏好用 jquery animate，主要是比較好控制～
因為有時後不只是單純的只有一個div在動～

是說～這個是只有自己shake一下啦XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour2.html

這隻點一下會抖一下XD...


先抓 圖的原始位置
t2x = parseInt($('#img_t2').css('left'));

晃動的位移
var ot = [3, -3, 3, -3, 3, 3];

click 時的 jquery animate
function rockDemon() {
for(var i = 0 ; i < ot.length ; i++)  {
$('#img_t2').animate({
left: t2x+ot[i],
}, pms, function() {
;
});
}
}

[RPG] 對話字幕 talk animate with setTimeout

身為 RPG...最重要的就是對話啦～～
然而，對話的表現方式是 一字一字的跑...（拖台錢真好用）
但是～ HTML 主要的用途是 閱讀，一開始的理念就不一樣～

所以想了有點久～就以基本的方式組合 jquery.append 跟 setTimeout 來模擬～

來貼一下當初最早早開發的原型（在 404 page 裡）
http://www.realmofprogrammersgamble.website/404.html
http://www.realmofprogrammersgamble.website/js/anit.js
 很粗糙的手法，直接一個字一個setTimeout append 出來，但因為字數不多且又單純，好像就感覺還好～
function captionEffect(tid, str, isfadeout, dely) {
    anitid = tid;
    anitword = str;
    anitidx = 0;
    if (dely && parseInt(dely) > 10) {
        anitdelay = dely;
    }
    $('#'+anitid).html('');
    if (anitword && anitword.length > 0) {
        for (var i = 0 ; i < anitword.length ; i++) {
            setTimeout(anitappend, anitdelay*i );
        }
        if (isfadeout) {
            setTimeout("anitfadeOut('"+tid+"')", parseInt(anitdelay*anitword.length+1000) );
        }
    }
}
  
function anitappend() {
    $('#'+anitid).append(anitword[anitidx]);
    anitidx++;
}

但是～等到要做完整對話時，問題就開始頭大了Orz...
而且上面的作法其實是有問題的，一是 html 的 setTimeout 很....有問題！～有時候他自己本身執行會lag（網路load圖，或開很多網頁，跑到一半開別的網頁又回來點）...二是同時開 N 個 setTimeout 在那邊等，根本不安心Orz...
只能說 JS 本身沒有 Thread 的概念，很難處理Q_Q...

所以後來又做了一個改良版～ 基礎還是 jquery append 跟 setTimeout...
但只是 在 setTimeout 裡 才跑下一個 setTimeout （有點像遞迴自己call自己到完）... --> 同時間只有一個 setTimeout 在跑～
其一開始的原型大概是 像這樣子@@a （為了做一堆例外和設定，opt 加到整隻都快不認識了XDXD）

function tanittalk(did, w, tw, ms, opt) {
  if (ms && parseInt(ms) > 0) {
    ms = parseInt(ms);
  }  else  {
    ms = 60;
  }
 
  if (tw && tw.length > w.length) {
    var add = tw.substring(w.length, w.length+1);
    var nms = ms;
    if (opt && opt[w.length]) {
     
    }  else  {
      w += add; 
    }
    $('#'+did).append(add);
   
    if (tw.length > w.length) {
      setTimeout("tanittalk('"+did+"', '"+w+"', '"+tw+"', "+ms+")" ,nms);
    }
  }
}

不過就是用 append 時要注意的是～ 當要換行 <br> 時，是要一次 append('<br>')，如果呆呆的一個字一個字的就會 GG...當然同理，有要用到 tag，內碼 等各種 html 格式內容都是這樣～
還有一些跳脫字元，或是 「'」、「"」都是要再例外處理的部份QQ～

補充一下， setTimeout 這東西阿，在正常看的時後是不會出事的，
會出事的情況大多是，當 page  lose focus 時（另開視窗，或是看其他page）
browser 會自動暫停運作，但是 delay的時間並沒有被暫停。
所以～當去別地方看完回來後，會突然發現原本頁面的 setTimeout 一次全跑出來了XD...
因為去別的地方逛完回來，那些delay全都結束了，就不會照心中所想的順序跑出來...

所以若是很要求順序的顯示，就要注意了～

[RPG] 可以轉的轉盤 jquery css3 transform rotate

在第一篇的頁面裡
http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

這裡的轉盤其實是可以動的～～（有人發現嗎Q_Q...）
不過在其他頁裡是不能動的～我把他設定成，畫面上角色人有在那操作才可以轉阿～
（OS：沒人在那邊也可以轉的話，那是阿飄阿阿阿～～）

做法麻，還是要先切圖QQ...

然後疊前景（就是那個人）
還得要有一個 點擊區

總合起來起來的html 就是～～
<!-- 轉盤圖-->
<img src="/imgs/egg/egg_t0.png" id="img_t" class="timg" style="left:72%; top: 65%" >
<!-- 前景-->
<img src="/imgs/egg/egg_a0.png" style="width: 100%; height: auto; position: absolute; top: 36px; left:0;" >
<!-- 點擊觸發區域--> 
<div id="clk1" class="imgclick" style="left:72%; top: 65%;"></div>


js 在 init 時加入 click event～ 透過 jquery css 操作 css3 transform
    $( "#clk1" ).css('width', $('#img_t').width());
    $( "#clk1" ).css('height', $('#img_t').height());
    $( "#clk1" ).click(function() {
        img_t_deg += 5;
        imgtrotate(img_t_deg);
    });

function imgtrotate(degrees) {
    $('#img_t').css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)', 
      '-ms-transform' : 'rotate('+degrees+'deg)', 
       '-o-transform' : 'rotate('+degrees+'deg)', 
          'transform' : 'rotate('+degrees+'deg)', 
               'zoom' : 1
    });
}

就可以得到這樣的效果～

其中大概有幾點就是，因為 jquery 的 animate 不支援 transform，所以想要做到平滑的轉動是有難度的～ 也許要額外搞一個可以動態產生的 css animate class 出來，但是就又會延申出 remove class/add class 的問題 （因為他是由 click 驅動，人在亂點時，很難跟他說只可以點幾下，不可以double click/balabla...），總之這部份等之後有想到再來實作看看好了～

[RPG] 有飄的煙 css3 animate

話說為了做網站，忙了好一陣子Q_Q...底層和走向現在是稍微好用了一點，總算可以來做點筆記了Orz...

一開始把首頁分享給朋友看，就有人說，那個煙怎麼不會動，轉盤不能轉...
然後為了阿宅的名譽，也要給他搞出來XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour1.html

煙的作法，簡單的說就是有底圖，上面再貼一張會飄的圖
切圖的時後，就是底圖：

再切純煙的圖：（底是透明色）

再幫純煙的圖 上透明(opacity) 並加上  css 動畫(smoke)
<img src="/imgs/egg/egg_s0.png" id="img_s" class="timg smoke" style="left: 3%; top: -8%; margin-top: 36px;" style="opacity: 0.2;">

.smoke {
  -webkit-animation-name: smoke;
  animation-name: smoke;
  -webkit-animation-duration: 5s ;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
  animation-iteration-count: infinite; /*infinite*/
}

@-webkit-keyframes smoke {
  from {
   
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

@keyframes smoke {
  from {
   
  }
 
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.3;
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0.99, 0, 0);
    transform: translate3d(0.99, 0, 0);
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
    -webkit-transform: scale3d(.99, .99, .99);
    transform: scale3d(.99, .99, .99);
  }
}

其原型是根據
http://daneden.github.io/animate.css/
一個搖的很慢的，形變有在調整一下的 shake...

但其實這裡面最難的是，怎麼把圖片對準Orz...
還有解決在不同尺寸的 browser，手機還轉來轉去的鬼問題～
這部份以後有空再來吐口水好了XD...