blog.Ring.idv.tw

HTML5

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

用CSS3 Transitions來模擬Path app的選單特效

上圖是Path App for iPhone的選單特效,但其實我並不常用Path... 只是某次同事介紹我使用時,我一直覺得它的選單特效很好玩!

心想應該也可以試著用CSS Transitions模擬出來,那何謂CSS Transitions?從規格書上的解釋:

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

也就是說~ 一般我們在設定CSS屬性值之後會立即呈現出效果,而透過CSS Transitions可以讓我們控制該效果要在多久的時間內如何來呈現,所以本文就是用CSS Transitions和一些JavaScript來模擬這個特效,有興趣可以參考下述的程式碼或直接觀看範例:

Demo

Path Menu in CSS3 Transitions

function on(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms linear";
	n.style.webkitTransitionDelay = delay+"ms";
	n.style.webkitTransform = "rotate(-540deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	var sx2 = sx *0.91;
	var sy2 = sy *0.91;
	sx *= 0.9;
	sy *= 0.9;
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 100ms ease-out";
		n.style.webkitTransform = "rotate(-360deg)";
		n.style.left = sx+"px";
		n.style.top = sy+"px";
		function round3(e)
		{
			e.stopPropagation();
			n.removeEventListener("webkitTransitionEnd",round3,false);	
			n.style.left = sx2+"px";
			n.style.top = sy2+"px";
		}
		setTimeout(function(){
			n.addEventListener("webkitTransitionEnd",round3,false);
		},1);
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}
function off(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms ease-out";
	n.style.webkitTransform = "rotate(-630deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 150ms linear";
		n.style.webkitTransitionDelay = delay+"ms";
		n.style.webkitTransform = "rotate(-900deg)";
		n.style.left = "0px";
		n.style.top = "0px";
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}

2012-08-27 14:29:03 | Add Comment

The async and defer Script Attributes

上圖是HTML的Parsing Model,從圖中來看較值得注意的即為「Tree Construction」至「Script Execution」這一段,這段的意思是當HTML Parser在剖析HTML syntax並建構DOM (Document Object Model)的時候,若遇到「<script>」時會先暫停手邊的工作,等待執行完該Script之後再繼續Parsing,但是若遇到「<script src="external.js"></script>」時,它則需要等待下載該Script檔案完成後並執行該Script。

根據上述的HTML Parsing Model,我們就不難知道為何有些網頁總是會出現部份內容(或空白),然後可能需要等待一些時間後才會完整呈現,這時候除了調整Script的位置之外,我們還有更好的方式,那就是藉由Script element的「async」或「defer」屬性來加以改善。

Normal execution

<script src="external.js"></script>

這是一般常見的用法,但大多數的時候其實我們並不需要採用此同步的方式來執行

P.S. 一般的內嵌外部廣告仍需要採用此方式,因為它需要同步對DOM進行一些操作,如:document.write()。

Deffered execution

<script defer src="external.js"></script>

採用「defer」的作法,HTML Parser仍會持續進行剖析並建構DOM,但會在背景同時下載external.js,待檔案下載完成且DOM也建構完成之後,按照Script的先後順序依序執行,並發生在DOMContentLoaded事件執行之前,。

Asynchronous execution

<script async src="external.js"></script>

採用「async」的作法和「defer」有點類似,兩者皆不會影響到HTML Parser的進行,但兩者最大的差別在於「async」並不保證Script的執行順序,而是採用先下載完成就先執行的模式,並發生在window's load event執行之前。

參考資源

Running scripts in WebKit

Asynchronous and deferred JavaScript execution explained

2012-06-26 13:21:06 | Add Comment

Smart App Banner

Smart App Banner是iOS6的新特色之一,它的功能主要是應用在當使用者瀏覽到某網頁時,在該網頁的上方會出現一個App介紹的橫幅版面,透過這樣的方式可以讓使用者方便快速的連結下載此App,而它的用法也相當簡單:

Smart App Banner

下述語法即呈現Angry Birds的Smart App Banner在某網頁中,主要的用法在於「app-id=343200656」,後面的數字換成你的App ID即可。

<meta name="apple-itunes-app" content="app-id=343200656">

P.S. 上述測試裝置使用iPad3/iOS6 beta1, 奇怪的是iPod Touch4/iOS6 beta1尚未支援。

Web Application Title

另外在iOS6也新增了此meta tag,它的作用在於當我們想要將某網頁「加入主畫面」時,基本上預設會採用網頁上的<title>文字內容,然而透過下述的簡單設定即可以區隔一般網頁的<title>和「加入主畫面」的title:

<meta name="apple-mobile-web-app-title" content="My App">

2012-06-19 08:46:01 | Add Comment

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

::: 搜尋 :::

::: 分類 :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment