So erstellen Sie eine reibungslose Animation, die sich dem Ziel aufgibt

Question

Wie kann ich eine reibungslose Animation erstellen, die sich in Richtung eines Ziels ansetzt, wenn es sich um die Position ändert?

Wie diese jsfiddle zeigt, Die Animation stoppt oder wird während des Blocks blockiert moveTarget() anstatt die neuen Zielkoordinaten weiter zu fordern.

Was wäre die ideale Implementierung / Struktur, um den gewünschten Effekt zu erzielen?

Answer 1

Ok, beantworte meine eigene Frage hier, falls jemand anderes dieses Problem hat.

Anstatt zu berechnen change (change = finish - begin) jedes Mal moveTarget() Brände, es wird ständig in berechnet onEnterFrame(). So moveTarget() Nur verantwortlich für die neuen X- und Y -Positionen.

Dies ermöglicht es den Werten, das Ziel zu erleichtern.

Ich legte auch den Zeitwert der Lockerungsfunktion dauerhaft auf immer 1: 1: 1:

easeIn(1, begin, change, duration);

Die Beispielantwort ist in dieser Revision JSFIDDLE: http://jsfiddle.net/dannygarcia/lqp2r/45/