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的動作。

參考資料:
參考書目:

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>


參考資料連結:


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官方文件

JavaScript Lib 收集


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

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>
*{
margin0px 0px 0px 0px;
}
.cube{
width100px;
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>
*{
margin0px 0px 0px 0px;
}
.cube{
width100px;
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>
總之對於程式編成還有非常多不懂,再往前進後也許又會發現現在自己所想的是錯誤的, 前輩說見山是山,見山又不是山。