scale tween in kinetic js

<html>
<body>
<div id=”g”></div>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js”></script&gt;
<script defer=”defer”>
var stage=new Kinetic.Stage({
container:’g’,
width:500,
height:500
});
var layer=new Kinetic.Layer();
var rect1=new Kinetic.Rect({
x:200,
y:50,
width:200,
height:50,
fill:’green’,
stroke:’black’,
strokeWidth:3,
draggable:true,
name:’rect11′
});
var rect2=new Kinetic.Rect({
x:300,
y:200,
width:200,
height:200,
fill:’green’,
stroke:’black’,
stokeWidth:3,
draggable:true,
name:’rect2′
});
layer.add(rect1);
layer.add(rect2);
stage.add(layer);
layer.on(‘mouseover’,function(){
var t=new Kinetic.Tween({
node:rect1,
duration:1,
scaleX:Math.random()*2,
scaleY:Math.random()*2,
easing: Kinetic.Easings.ElasticEaseOut
});
var tt=new Kinetic.Tween({
node:rect2,
duration:1,
scaleX:Math.random()*2,
scaleY:Math.random()*2,
easing: Kinetic.Easings.ElasticEaseOut
});
t.play();
tt.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