Search code examples
javascriptjqueryhtmlcreatejstween

createjs tween location based off of current location

I am using create.js's tween.js. I am trying to make a bounce animation, more complex than the one given. More specifically, I am trying to tween an objects's y by an offset rather than a given coordinate. It seems like there is a simple way of doing this like:

createjs.Tween.get(circle, {loop:false}).to({offset-x: 100}, 1000, createjs.Ease.linea);

Ultimate Question: How do I tween the coordinates of an object based off of its current position?

Solution

  • When you make a Tween instance, you are creating a deterministic animation, meaning that you can set the position of the tween to any value (between 0 and 1), and it will be where you expect it.

    If I understand what you are asking, you want to make a tween up-front, but have it use the object's current position instead of the value it was at when the tween was made. If this is the case, then you will need a different approach. Perhaps you should generate the tween on-demand when it is needed, rather than initially. That way, it could use your current position.

    Here is a quick sample: http://jsfiddle.net/x4xxwjuv/ The ball moves at a constant rate, but when you click the buttons, it will:

    1. Tween back a bit, based on its current position
    2. OR Tween to a specific Y position (fall to the floor)

    Then it resumes moving normally. The tweened ball is filled, the animated one is not.

    Here is sample code from the spike.

    createjs.Tween.get(ball)
    .to({x: ball.x+(ball.xSpeed*-4), y:ball.y+(ball.ySpeed*-4)}, 1000, createjs.Ease.bounceOut);