Dogfan - HTML5+CSS3的「 お父さん扇風機 」

這是將日本軟銀廣告出現過的「 お父さん扇風機 」（爸爸風扇）用HTML5+CSS3再現的小玩意。

[連結]
DogFan @ heroku
玩法很簡單: 接電再按下面的control XD
基本功能有這些:

• 電力發動: 所以要接插頭開風扇 (點一下插頭就會接電、再點斷電)
• お父さん: 把風扇開起來就會聽到牠的叫聲喔～
• 三段變速: 可以改變風扇的速度，3最快1最慢。另有Slider可以細調

目前只support webkit系的Safari和Chrome-完美版是Mac的Safari，Chrome是轉速有差，Mobile版不論是Chrome或Safari都只有主要動畫及接電效果沒問題
下一個會支援的是FF5，應該在FF 5 release前會完成。IE 9就別問我了，大方向是知道但沒library輔助會很痛苦...

[Source]
本Project有Opensource放在github上喔:DogFan的github

授權是MIT。自行轉host或改造前請讀Readme。

[技術細節]
本文的重點。

風扇組成 - absolute positioning + multiple background，因為是我自己切圖+@evenwu作的psd整理得非常不錯所以我是用了最懶的方法切－就是不做trimming只用show/hide去生png ￣▽￣，變成這部分沒甚麼特別的...
唯一要注意的是為了避免rotateZ block了插頭所以扇葉有加pointer-events:none去預防，不過android的chrome好像不太理會?


扇葉轉動 - CSS3 animation on CSS3 transformation。主要是用rotateZ+linear timing function去轉，所以是用animation duration去控制轉一圈的時間－duration愈短風扇轉的愈快...不過有趣的是就算是webkit轉速看起來也有微妙的不同

• Chrome 11 (Desktop/Mac) - 轉的比Desktop Safari 5快一點 (就是因為這樣才決定用Range Slider)
• Chrome (Flyer) - 轉的比Desktop Safari更快，快至我懷疑是有偷格...
• Chrome (G1) - 明顯有lag所以轉不動或是逆走orz

p.s.1 在某些frequency下會有好像Zoetrope的定格效果...
p.s.2 transform-origin不是50% 50%, 有一點offset...
p.s.3 我有懷疑過是floating point problem，因為我是只用三格keyframe就做完整個animation...


神秘的震動效果 - 條件請自行發掘 XD。那個只是同時更改兩個background的background-position (用common來分)，數字是亂填但效果很不錯 XD。和風扇一樣的是用duration控制速度，不過因為不配合風扇的轉速去變速不自然及震太快太傷眼所以用了一個mapping function+DOM style interface去設定duration


插頭接合 - jQuery+CSS3 Transition on background-position，jQuery做event handler去轉插頭(還有風扇)的state而trigger transition (最簡單是加class)。用transition做而非animation的主因是我要保留最後的background-position + 效果很簡單懶的用keyframe...compatibility並不在考慮之列 (FF4淚目)


插頭垂下 - 目前只有Desktop browser才會正確Play的CSS3 Animation，因為涉及keyframe轉換timing function加上一開始有改state而試了fill-mode，所以一堆mobile browser不是不會處理就是錯亂了 XD
話說做來是想看的人意識到那是可以點的東西，不過因為是一載入即Play+Playtime短所以不太看到而變成考驗browser能力的東西orz


お父さん - HTML5 Audio。HTML本身已有audio的tag和source，不過沒control和autoplay(和隱形沒兩樣)。聲音是用js播放，不過在iOS上似乎不出來...(可能因為聲音太短，有人提過此事)


Slider - 這個是用HTML5 的Range Input去做。因為一開始是在Desktop上做所以value會在mouse up的一剎那處理。另外為了配合上面的數字(slider左至右: 小至大，但和轉速相反)所以value得要做成負數、min/max的值要反轉放(但step要是正數)、handler也得要用Math.abs去處理value，不過event handler用.val()就可以拿到slider的值倒是很方便。(jQuery rocks!)


和Java port相比這個的技術其實很簡單...而且很好改(如果有用compass.app會更好)，時間其實用了去想animation和風扇行為要怎樣才自然－實作只用了3天，除了第一天外其餘都是工餘時間做的...(第一天還有一半時間去和heroku打交道，剩下的在切圖，風扇轉也只是用css去作)

[特別鳴謝]

• @sillyleo, 風扇圖的原型的作者
• @evenwu, 巨大版風扇+PSD檔的作者 (很偉大的任人惡搞)
• @hlb, 音效提供

－以及Twitter(以及plurk)上提供意見的各位 m(_ _)m