blog.Ring.idv.tw

Articles

開始吧!

好久一陣子沒有上來寫文章了...Orz 自從菲律賓宿霧回來之後就都待在家陪陪親人,換個角度來說...過去這十年也就只有這半年「真正」在陪親人,所以上個月帶他們去體驗了一趟東京自由行! 沒錯...我的身份就是領隊... 從買機票、訂飯店、安排滑雪、迪士尼還有怎麼線上買「薯條三兄弟」都在我的責任範圍內...Orz 呵~ 雖然雜事很多,不過也蠻多收獲的,至少我的手機裡現在存有好幾個日本旅遊必備網站,因為難得經歷到東京大雪,所以當時我都在注意當地的天氣以安排行程,另一方面也要注意電車的狀況,因為真的讓我遇到電車停駛... 好在有及時掌握這些資訊,所以就算臨時變動行程也不至於會措手不及。

而現在...?其實我原先的打算是從東京回來之後...就準備再開始我的工作生涯,但是家人卻希望我留在中部,經過一些思考之後... 我暫時決定就先留在家中,當然我不可能每天無所事事地… 所以我決定先當個獨立開發者,花點時間玩玩自己想做的... 以後的事就再說吧! 畢竟年紀也不小了,還能有這樣的時間也不容易,就從這一篇文章開始出發吧!!

P.S. 想在網路上訂購「薯條三兄弟」的朋友,請到 Calbee官網 訂購,不僅有限量更要抓準時間搶 (日本快台灣一個小時)

2014-03-08 21:29:56 | Add Comment

Bohol island

About ten days ago, I went to Bohol island to see the famous Tarsiers and Chocolate Hills, and of course it was my first time to be there. I realised that the Tarsier is the smallest monkey in the world, and their size is just like the size of our palm. But unfortunately, as far as I know their life span is about twenty to twenty-five years only, and their main food is insect especially spider. And the other famous spot is the Chocolate Hills. It's quite new to me because I don't know how the hills were made.

Aside from that, I also experienced dolphin watching and snorkelling. Moreover, I went to the virgin island. I must say that if you want to experience snorkelling, you must go to Balicasag because you can see many fishes in there, even sea turtle. And please don't forget to put on some sun block on your body. Otherwise, you will experience what I have experienced, because the sun is too blazing in there.

2013-06-11 19:44:19 | Add Comment

What is next?

Recently, I went to Philippines alone to take a rest and had a vacation, because I'm thirty years old already, I want to think what is next? I don't know what I want, but I know what I don't want clearly. Therefore, I just need a little time to think about it.

Finally, I chose to go to Philippines, although there are many dispute between Taiwan and Philippines recently. I planned to stay here for about four months, then for the mean time, I will be going to back to Taiwan at the end of August.

During my vacation, I'll try to take some beautiful pictures as soon as possible, and then make a photo album about the islands of Philippines, such as Bohol, Palawan, Caohagun and so on.

2013-05-27 22:56:52 | Comments (1)

IMG2WebP.net is Announced!

WebP圖檔格式(based on VP8 codec)最初是由Google在2010年9月底所發表的:WebP, a new image format for the Web,它是一種支援無損(lossless)壓縮和有損(lossy)壓縮的圖檔格式,根據Google的官方測試說明.. WebP無損壓縮的圖檔格式和PNG檔相較之下,它能比PNG檔還少26%的檔案大小;若是採用有損壓縮的話也能比JPEG圖檔再少25~34%的檔案大小,話雖如此~ 但是這畢竟是較新的圖檔格式,所以現階段有支援WebP的瀏覽器也比較少~ 除了Google本身的Chrome之外,就只有Opera有支援(CSS gradients, WebP, and Declarative UI),不過如果現在想試用看看的話,除了可以到WebP官網下載安裝之外,還可以透過IMG2WebP.net這個線上轉檔工具,直接拖張圖片進去就可自動轉成WebP圖檔,所以筆者的年假就弄了這個東西來練練功...Orz 希望有朝一日WebP圖檔的涵蓋率能佔有一席之地。

IMG2WebP線上轉檔工具

IMG2WebP.net

相關資源

A Comprehensive Guide to WebP

2013-02-19 15:35:39 | Add Comment

Sprite Animation in CSS3

.2013/01/22 新增CSS Animation + steps()

Sprite是一種經常被用於遊戲開發的技巧,如:Super MarioRockman,另一方面也常被用於網頁優化(Web Optimization)之中,將許多小圖檔組合成一張大圖,以減少這些小圖HTTP的請求次數,不過本文並非針對該議題,而是要探討如何透過CSS Animations結合Sprite來達成動畫效果,藉由Browser原生支援的方式,以減少JavaScript的程式運算來提升效率,下述例子將利用Google衣夾人(Google Street View 心得)來示範:

P.S. 目前W3C CSS Animations規格仍在Working Draft狀態。

JavaScript

var offsetX = [0, 49, 98, 147, 196, 245, 294, 343, 392, 441, 490, 539, 588, 637, 686, 735];
var olen = offsetX.length;
s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "1029px 51px";
s.style.backgroundPosition = "0px 0px";
s._ox = 0;
_main.appendChild(s);
(function animate(){
	s.style.backgroundPosition = '-'+offsetX[s._ox++%olen]+"px 0px";
	setTimeout(animate,33);
})();

Demo

這是一般透過JavaScript的方式,若從效率上的觀點來看它並不是最佳的解法。

CSS Animation

CSS

@-webkit-keyframes panda 
{
	0% { background-position: 0px 0px; }
	6.25% { background-position: 0px 0px; }
	6.26% { background-position: -49px 0px; }
	12.5% { background-position: -49px 0px; }
	12.51% { background-position: -98px 0px; }
	18.75% { background-position: -98px 0px; }
	18.76% { background-position: -147px 0px; }
	25% { background-position: -147px 0px; }
	25.01% { background-position: -196px 0px; }
	31.25% { background-position: -196px 0px; }
	31.26% { background-position: -245px 0px; }
	37.5% { background-position: -245px 0px; }
	37.51% { background-position: -294px 0px; }
	43.75% { background-position: -294px 0px; }
	43.76% { background-position: -343px 0px; }
	50% { background-position: -343px 0px; }
	50.01% { background-position: -392px 0px; }
	56.25% { background-position: -392px 0px; }
	56.26% { background-position: -441px 0px; }
	62.5% { background-position: -441px 0px; }
	62.51% { background-position: -490px 0px; }
	68.75% { background-position: -490px 0px; }
	68.76% { background-position: -539px 0px; }
	75% { background-position: -539px 0px; }
	75.01% { background-position: -588px 0px; }
	81.25% { background-position: -588px 0px; }
	81.26% { background-position: -637px 0px; }
	87.5% { background-position: -637px 0px; }
	87.51% { background-position: -686px 0px; }
	93.75% { background-position: -686px 0px; }
	93.76% { background-position: -735px 0px; }
	99.99% { background-position: -735px 0px; }
	100% { background-position: 0px 0px; }
} 

JavaScript

s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "1029px 51px";
s.style.backgroundPosition = "0px 0px";
s.style.webkitAnimation = 'panda 500ms linear infinite';

純粹透過CSS Animation的方式看起來有點冗長,不過這並不是啥大問題,因為上述的CSS Animation可以寫個function來產生,但這也不是最好的解決方式,因為上述這種方式會有spurt的問題(Demo),尤其在效率較差的Mobile平台上更顯而易見。

CSS Animation + Transform

CSS

@-webkit-keyframes panda 
{
	0% { background-position: -0px 0px; }
	100% { background-position: -15px 0px; }
} 

JavaScript

s.style.width = "1px";
s.style.height = "1px";
s.style.webkitTransform = "scaleX(49) scaleY(51)";		
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.backgroundSize = "21px 1px";
s.style.webkitAnimation = 'panda 500ms linear infinite';

Demo

透過CSS Animation + Transform似乎是個不錯的方式,但若從Mobile平台來看~ 目前iOS 6.0 Safari、Android Chrome Browser支援度都還不好,僅有最近才剛上架的Chrome beta for Android(2013/01/10)有支援。

CSS Animation + steps()

CSS

@-webkit-keyframes panda 
{
	from { background-position: 0px; }
	to { background-position: -784px; }
} 

JavaScript

s.style.width = "49px";
s.style.height = "51px";
s.style.backgroundImage = "url(img/panda_001.png)";
s.style.webkitAnimation = 'panda 500ms steps(16,end) infinite';

Demo

最後「CSS Animation + steps()」此方式才是目前針對Sprite Animation最佳的解法,尤其是iOS/Android平台均支援此方法。

參考資料

Sprite animation in CSS3

Taking steps() with CSS animations

2013-01-15 02:25:50 | Add Comment

Previous Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment

::: 人氣指數 :::

今日人氣:274

累積人氣:1960078


::: 線上人數 :::

counter