Ocean 學習筆記: 09/01/2012

2012年9月21日星期五

2012年9月20日星期四

FSP 畫面更新率與動畫原理解說

FPS (Frames Per Second )
畫面更新率，秒呈現的圖數，又稱為楨數。

現在電影FPS為24，電視常使用30FPS。
若是程式寫成的動畫需高於30FPS，若低於30FPS則會感覺不連貫感
電影與程式動畫之顯像原理不同，因此FPS需求不同。

電影呈像：

Display frame1

→

Display frame2

→

Display frame3

→

Display frame4

→

And So On ..

程式動畫呈像：

Render frame1

→

Display frame1

→

Render frame2

→

Display frame2

→

And So On ..

互動式動畫成像：

加入程式邏輯判斷，因此決定是否顯像，亦可加入邏輯與使用者互動。

Get
initial
state

→

Render
frame

→

Apply
rules

→

Done?

→
yes

Display frame

↑______________________________| No

程式動畫中FPS算法：

FPS若需要60

1s /60 Frame (每一frame 所需要的時間長度)

因此若是使用javascript程式來Render則：

function renderFrame(){
//繪製的程式碼
}

window.setInterval(drawFrame, 1000/60);

如此在javascript環境中就可以每1000/60秒繪製一個圖像。

note:因為setInterval所使用的時間單位是ms因此使用1000，因為1000ms=1s。

int setInterval(function , time ms)。
setInterval這個funciton會依設定的時間值來呼叫所傳入的function。
setInterval被調用時會回傳一個timerId這個id是一個int，可用來給予 clearInterval API來做清除interval的動作。

參考資料：

參考書目：

Foundation HTML5 Animation with JavaScript

HTML5 canvas 瀏覽器支援判別

HTML5 canvas browser support

瀏覽器上對於canvas element的解析方式：

<!DOCTYPE html>

<html>

<head>

<title>canvas_support-1</title>

</head>

<body>

<!--

使用IE8開啟時，因為不支援canvas所以可以看到p element,

若瀏覽器支援就會忽略p element。

-->

<canvas><p>瀏覽器不支援請使用google chrome開啟</p></canvas>

</body>

</html>

使用JavaScript判斷瀏覽器是否支援Canvas element；

if(document.createElement('canvas').getContext){

alert('瀏覽器支援 canvas');

}else{

alert('瀏覽器不支援canvas')

}

</script>

參考資料連結：

W3C - HTML Canvas 2D Context
WHATWG - get Context
w3school - HTML DOM getContext() 中文版，更新較慢
w3school - canvas 英文版，更新較快

World Wide Web Consortium (W3C 全球資訊網協會)

Web Hypertext Application Technology Working Group (超本文技術工作小組)

2012年9月18日星期二

Knockoutjs 18-2 Click Binding

Knockoutjs Click Binding

example 帶有引入參入的click handel:

<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
text-align: center;
width: 150px;
height:150px;
line-height: 150px;
background-color:#0000FF; /* color is blue*/
color:#FFFFFF; /* font color is white*/
font-size: 2em;
font-weight: bold; /*粗體*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};

manager.viewModel = {
colors:ko.observableArray(['darkgreen','darkgrey','darkmagenta','darkorange']),
colorIndex:-1,
changeColor:function(data , event){
//被點擊的項目可由event取回
//若需改變其他DOM，則需在init時將需改變的DOM參照記錄於viewModel中
(data.colorIndex >= data.colors().length-1 && (data.colorIndex = -1));
event.srcElement.style.backgroundColor = data.colors()[++data.colorIndex] ;
},
controlName:'Click Me'
};

window.manager = manager;
})(window);

window.onload = function(){
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube" data-bind="click:changeColor , text:controlName"></div>
</body>
</html>

參考資料：knockoutjs官方文件

JavaScript Lib 收集

Colors.js
RGB、Hexadecimal、HSV 、 HSL 中將各種顏色值轉換。

html5shiv
讓IE支援HTML5標籤使用。
jQuery Validation Plugin
欄位驗證

2012年9月17日星期一

Knockoutjs 18-1 Click Bindig

Knockoutjs Click Binding

example 1:

<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};

manager.viewModel = {
colorControl:{
//property
redControlName:ko.observable('紅色'),
greenControlName:ko.observable('綠色'),
//method
changeColorByRed:function(){
document.getElementById('myCube').style.backgroundColor = '#FF0000';
},
changeColorByGreen:function(){
document.getElementById('myCube').style.backgroundColor = '#00FF00';
}
}
};
window.manager = manager;
})(window);

window.onload = function(){
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="with:colorControl">
<input type="button" data-bind="click:changeColorByRed , value:redControlName"></button>
<input type="button" data-bind="click:changeColorByGreen , value:greenControlName"></button>
</div>
</body>
</html>

結果：

click前

按下紅色：

按下綠色：

第一種就是非物件觀念的寫法，只是為了把功能寫出來。

接下來同樣程式使用不同概念撰寫結構：
example2：

<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};

manager.viewModel = {
//陣列ko
colorControls: ko.observableArray([{
//property
controlName:ko.observable('紅色'),
//method
changeColor:function(){
document.getElementById('myCube').style.backgroundColor = '#FF0000';
}
},{
//property
controlName:ko.observable('綠色'),
//method
changeColor:function(){
document.getElementById('myCube').style.backgroundColor = '#00FF00';
}
}
])
};
window.manager = manager;
})(window);

window.onload = function(){
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="foreach:colorControls">
<input type="button" data-bind="click:changeColor , value:controlName"></button>
</div>
</body>
</html>

example2具有物件開發觀念，在意義上不需再new一次，書本或網路文章都可找到使用new不直覺且效能上較不好一點，但文章吸收完還得活用，你可以想若是這個項目非常多時，開發者要打很多字且都是非常相像的程式碼。

再來這是另一種方法：

example3:

<!DOCTYPE html>
<html>
<head>
<title>click Binding</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
.cube{
width: 100px;
height:100px;
background-color:#0000FF; /**bule*/
}
</style>
</head>
<body>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
(function(window , undefined ){
var ko = window.ko,
manager = window.manager || {};

function ColorControl(colorName , colorValue , target){
this.controlName = colorName;
this.colorValue = colorValue;
this.target = target;
};

ColorControl.prototype.changeColor = function(){
this.target.style.backgroundColor = this.colorValue;
};

manager.viewModel = {
colorControls: ko.observableArray([])
};

manager.init = function(){
manager.viewModel.colorControls.push(
new ColorControl("紅色","#FF0000",document.getElementById('myCube'))
);
manager.viewModel.colorControls.push(
new ColorControl("綠色", "#00FF00",document.getElementById('myCube'))
);
};

window.manager = manager;
})(window);

window.onload = function(){
manager.init();
ko.applyBindings( manager.viewModel);
};
</script>
<div class="cube" id="myCube"></div>
<div data-bind="foreach:colorControls">
<input type="button" data-bind="click:changeColor , value:controlName"></button>
</div>
</body>
</html>

總之對於程式編成還有非常多不懂，再往前進後也許又會發現現在自己所想的是錯誤的，前輩說見山是山，見山又不是山。

訂閱：文章 (Atom)

Ocean 學習筆記

2012年9月21日星期五

windows phone 8 學習資源

2012年9月20日星期四

FSP 畫面更新率與動畫原理解說

HTML5 canvas 瀏覽器支援判別

2012年9月18日星期二

Knockoutjs 18-2 Click Binding

JavaScript Lib 收集

2012年9月17日星期一

Knockoutjs 18-1 Click Bindig

常拜讀的Blog

關於我自己

2012年9月21日 星期五

windows phone 8 學習資源

2012年9月20日 星期四

FSP 畫面更新率 與 動畫原理解說

HTML5 canvas 瀏覽器支援判別

2012年9月18日 星期二

Knockoutjs 18-2 Click Binding

JavaScript Lib 收集

2012年9月17日 星期一

Knockoutjs 18-1 Click Bindig

2012年9月21日星期五

2012年9月20日星期四

FSP 畫面更新率與動畫原理解說

2012年9月18日星期二

2012年9月17日星期一