CODEWITHSUNDEEP
javascriptkineticjs
CrudeCoder
CrudeCoder

Reputation: 401

KineticJS Animate shape to go to exact position

I have a polygon and I am animating it to go in a linear path.

var anim = new Kinetic.Animation(function(frame) {
shape.setX(99);
if(shape.getPosition().y < window.innerHeight/2){shape.setY(shape.getPosition().y + frame.time/48);};
  }, layer);

So this animation works except the shape never goes to the center of the page's height, instead it is always a bit after. I know this is because of shape.getPosition().y < window.innerHeight/2 but making it shape.getPosition().y == window.innerHeight/2 will cause the shape to never stop because the calculation will never be exactly window.innerHeight/2 I was wondering if anyone had any ideas on how I could animate an object to an exact coordinate.

Upvotes: 0

Views: 66

Answers (1)

lavrton
lavrton

Reputation: 20298

Can you use Tween?

var tween = new Kinetic.Tween({
  node : rect,
  y : window.innerHeight / 2,
  duration : 0.5
});
tween.play();

http://jsbin.com/zihoqe/1/edit?js,output

Upvotes: 1

Related Questions