2016-08-09 38 views
0

Ich verwende create.js 's tween.js. Ich versuche eine Bounce-Animation zu erstellen, die komplexer ist als die gegebene. Genauer gesagt, versuche ich, die Objekte y durch einen Versatz und nicht durch eine gegebene Koordinate zu tweenen. Es scheint so, gibt es eine einfache Möglichkeit, dies zu tun, wie:createjs Tween Standort basiert auf dem aktuellen Standort

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

ultimative Frage: Wie tweenen ich die Koordinaten eines Objekts aus der Basis seiner aktuellen Position?

Antwort

1

Wenn Sie eine Tween-Instanz erstellen, erstellen Sie eine deterministische Animation. Dies bedeutet, dass Sie die Position des Tweens auf einen beliebigen Wert (zwischen 0 und 1) festlegen können.

Wenn ich verstehe, was Sie fragen, möchten Sie ein Tween im Voraus erstellen, aber es muss die aktuelle Position des Objekts verwenden und nicht den Wert, den es beim Erstellen des Tweens hatte. Wenn dies der Fall ist, benötigen Sie einen anderen Ansatz. Vielleicht sollten Sie das Tween On-Demand generieren, wenn es benötigt wird, anstatt zunächst. Auf diese Weise könnte es Ihre aktuelle Position verwenden.

Hier ist eine kurze Probe: http://jsfiddle.net/x4xxwjuv/ Der Ball mit einer konstanten Geschwindigkeit bewegt, aber wenn Sie die Tasten klicken, wird sie:

  1. Tween ein wenig zurück, basierend auf der aktuellen Position
  2. OR Tween an eine bestimmte Y-Position (auf den Boden fallen)

Dann wird wieder normal bewegt. Der getweente Ball ist gefüllt, der animierte ist es nicht.

Hier ist Beispielcode von der Spitze.

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