Easing 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 stage=new Kinetic.Stage({
container:’ok’,
width:500,
height:500
});
var layer=new Kinetic.Layer();
var easings=[
{name: ‘Linear’, color:’blue’},
{name: ‘EaseIn’, color:’green’},
{name: ‘EaseOut’, color:’green’},
{name: ‘EaseInOut’, color:’green’},
{name: ‘BackEaseIn’, color:’blue’},
{name: ‘BackEaseOut’, color:’blue’},
{name: ‘BackEaseInOut’, color:’blue’},
{name: ‘ElasticEaseIn’, color:’green’},
{name: ‘ElasticEaseOut’, color:’green’},
{name: ‘ElasticEaseInOut’, color:’green’},
{name: ‘BounceEaseIn’, color:’blue’},
{name: ‘BounceEaseOut’, color:’blue’},
{name: ‘BounceEaseInOut’, color:’blue’},
{name: ‘StrongEaseIn’, color:’green’},
{name: ‘StrongEaseOut’, color:’green’},
{name: ‘StrongEaseInOut’, color:’green’}
];
var tweens=[];
for(var n=0;n<easings.length;n++){
var num=n+1;
var ease=easings[n];
var text=new Kinetic.Text({
x:10,
y:60+(n*400/easings.length),
padding:4,
text:num+’)’+ease.name,
fontSize:18,
fontFamily:’Calibri’,
fill:ease.color
});
layer.add(text);
var tween=new Kinetic.Tween({
node:text,
x:420,
easing:Kinetic.Easings[ease.name],
duration:2
});
tweens.push(tween);
}
stage.add(layer);
for(var t=0;t<100;t++){
tweens[t].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