2012年9月21日 星期五
2012年9月20日 星期四
FSP 畫面更新率 與 動畫原理解說
FPS (Frames Per Second )
畫面更新率，秒呈現的圖數，又稱為楨數。
window.setInterval(drawFrame, 1000/60);
如此在javascript環境中就可以每1000/60秒繪製一個圖像。
note:因為setInterval所使用的時間單位是ms因此使用1000，因為1000ms=1s。
畫面更新率，秒呈現的圖數，又稱為楨數。
- 現在電影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
- 加入程式邏輯判斷，因此決定是否顯像，亦可加入邏輯與使用者互動。
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的動作。
參考資料：
參考書目：
HTML5 canvas 瀏覽器支援判別
HTML5 canvas browser support
瀏覽器上對於canvas element的解析方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas_support-1</title>
</head>
<body>
<!--
使用IE8開啟時，因為不支援canvas所以可以看到p element,
若瀏覽器支援就會忽略p element。
-->
<canvas><p>瀏覽器不支援請使用google chrome開啟</p></canvas>
</body>
</html>
使用JavaScript判斷瀏覽器是否支援Canvas element；
<script>
if(document.createElement('canvas').getContext){
alert('瀏覽器支援 canvas');
}else{
alert('瀏覽器不支援canvas')
}
</script>
參考資料連結：
- W3C - HTML Canvas 2D Context
- WHATWG - getContext
- w3school - HTML DOM getContext() 中文版，更新較慢
- w3school - canvas 英文版，更新較快
World Wide Web Consortium (W3C 全球資訊網協會)
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官方文件
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:
結果：
click前
按下紅色：
按下綠色：
第一種就是非物件觀念的寫法，只是為了把功能寫出來。
接下來同樣程式使用不同概念撰寫結構：
example2：
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>
總之對於程式編成還有非常多不懂，再往前進後也許又會發現現在自己所想的是錯誤的，
前輩說見山是山，見山又不是山。
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>
<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>
<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>