8.動畫
動畫就是一幀幀的畫面按照時間間隔顯示出來，Kinetic給咱們提供了一個舞臺對象的onFrame方法，用這個方法能夠綁定一個動畫方法，咱們要顯示的動畫的每一幀畫面就是在這個方法中完成繪製的。html
其中，這個方法接受一個對象frame爲參數，此參數對象包含兩個屬性，一個是frame.time，表示當前幀是動畫開始後的毫秒數，另外一個屬性是 frame.timeDiff，表示的是當前幀與上一幀之間的時間毫秒差。當前幀因該是什麼形態就是根據這兩個事件來判斷的。繪製出當前幀後，注意要調用一下動畫所在的層的draw，將當前幀圖像顯示到屏幕上。post
<script>動畫
stage.onFrame(function(frame) {spa
// update position.net
// draw layerhtm
});對象
</script>教程
以下代碼顯示了一個左右擺動的圓形事件
<!DOCTYPE html>ip
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container : 「container」,
width : 600,
height : 400
});
var layer = new Kinetic.Layer();
var config = {
x : 300,
y : 200,
radius : 30,
fill : 「red」,
stroke : 「black」,
strokeWidth : 5
};
var circle = new Kinetic.Circle(config);
layer.add(circle);
stage.add(layer);
var amplitude = 150;
var period = 2000;
var centerX = stage.getWidth() / 2;
//動畫幀定義方法
stage.onFrame(function(frame) {
circle
.setX(amplitude
* Math.sin(frame.time * 2 * Math.PI / period)
+ centerX);
layer.draw();
});
//動畫開始
stage.start();
//動畫中止
//stage.stop();
};
</script>
<div id=「container」></div>
</body>
</html>
動畫的開始與中止是用舞臺對象的start與stop方法實現的。
<script>
var stage = new Kinetic.Stage({
});
//動畫開始
stage.start();
//動畫中止
stage.stop();
</script>