KineticJS教程(8)

时间:2024-05-26 16:07:14

KineticJS教程(8)

作者: ysm 

8.动画

动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显示的动画的每一帧画面就是在这个方法中完成绘制的。

其中,这个方法接受一个对象frame为参数,此参数对象包含两个属性,一个是frame.time,表示当前帧是动画开始后的毫秒数,另一个属性是 frame.timeDiff,表示的是当前帧与上一帧之间的时间毫秒差。当前帧因该是什么形态就是根据这两个事件来判断的。绘制出当前帧后,注意要调用一下动画所在的层的draw,将当前帧图像显示到屏幕上。

<script>

stage.onFrame(function(frame) {

// update position

// draw layer

});

</script>

如下代码显示了一个左右摆动的圆形

<!DOCTYPE html>

<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>