Rotate in kinetic animation

<html>
<body>
<div id=”ok”></div>
<script type=”text/javascript” src=”Kinetic.js”></script>
<script>
window.onload=function(){
var stage=new Kinetic.Stage({
container:’ok’,
width:500,
height:500
});
var layer=new Kinetic.Layer();
var re=new Kinetic.Rect({
x:50,
y:70,
width:100,
height:50,
stroke:’black’,
strokeWidth:4,
fill:’red’
});
var ree=new Kinetic.Rect({
x:150,
y:70,
width:100,
height:50,
stroke:’black’,
strokeWidth:4,
fill:’red’
});
var reee=new Kinetic.Rect({
x:250,
y:70,
width:100,
height:50,
stroke:’black’,
strokeWidth:4,
fill:’red’
});
layer.add(re);
layer.add(ree);
layer.add(reee);
stage.add(layer);
angularspeed=360/10;
var ani=new Kinetic.Animation(function(frame){
var anglediff=frame.timeDiff*angularspeed/10000;
re.rotate(anglediff);
ree.rotate(anglediff);
reee.rotate(anglediff);
},layer);
ani.start();
};
</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s