Star tween with kinetic js

<html>
<body>
<div id=”ok”></div>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js”></script&gt;
<script defer=”defer”>
var tween =null;
function addStar(layer,stage){
var scale=Math.random();
var star=new Kinetic.Star({
x:Math.random()*stage.width(),
y:Math.random()*stage.height(),
numPoints:5,
innerRadius:50,
outerRadius:100,
fill:’red’,
opacity:0.8,
draggable:true,
scale:{x:scale,y:scale},
rotationDeg:Math.random()*180,
shadowColor:’black’,
shadowBlur:10,
shadowOffset:{x:5,y:5},
shadowOpacity:0.6,
startScale:scale
});
layer.add(star);
}
var stage=new Kinetic.Stage({
container:’ok’,
width:500,
height:500
});
var layer=new Kinetic.Layer();
var dragLayer=new Kinetic.Layer();
for(var n=0;n<10;n++){
addStar(layer,stage);
}
stage.add(layer);
stage.add(dragLayer);
stage.on(‘mousedown’,function(evt){
var shape=evt.targetNode;
shape.moveTo(dragLayer);
stage.draw();
shape.startDrag();
});
stage.on(‘mouseup’,function(evt){
var shape=evt.targetNode;
shape.moveTo(layer);
stage.draw();

});
stage.on(‘dragstart’,function(evt){
var shape=evt.targetNode;
if(tween){
tween.pause();
}
shape.setAttrs({
shadowOffset:{
x:15,
y:15
},
scale:{
x:shape.getAttr(‘startScale’)*1.2,
y:shape.getAttr(‘startScale’)*1.2
}
});
});
stage.on(‘dragend’,function(evt){
var shape=evt.targetNode;
tween=new Kinetic.Tween({
node: shape,
duration: 0.5,
easing: Kinetic.Easings.ElasticEaseOut,
scaleX: shape.getAttr(‘startScale’),
scaleY: shape.getAttr(‘startScale’),
shadowOffsetX: 5,
shadowOffsetY: 5
});
tween.play();
});
</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