Wie unscharf zu schalten
Ich habe eine etwas einfache Mootools Animation, die ein Element bewegt sich auf einer Kreisbahn mit zwei getrennten Variablen Fx.Morph macht. Mein Problem ist, dass ich muß in der Lage sein, um die Animation zu stornieren, und ich kann nicht für das Leben von mir herauszufinden, wie beide Morphs behandeln Cancelling ohne diese anzurufen oder sie als globalen Variable zu speichern.
Ich habe versucht, $ (img) .get ( 'Morph') mit cancel (). aber das scheint nicht auf Elemente mit mehrer Fx zu arbeiten.
Da Sie die Animation auf der Kurve basiert erstellen versuchen, werde ich Ihnen elegantere Weise zeigen, dass zu erzielen. Es basiert auf Fx-Klasse erweitern und das Hinzufügen der Unterstützung für die Bezier-Kurven.
Bezier-Kurven
Bezier-Kurven sind in der Computergraphik verwenden glatte Kurven zu berechnen und Wege zu beschreiben. Ein Vorteil hierbei ist, dass nur eine Instanz von FX benötigt wird, die die Leistung verbessern wird, und auch, können Sie eine Animation erstellen, die auf jede Art von Kurve basiert.
Base Fx Klasse
Der erste Teil ist Basis Fx-Klasse (die Basisklasse für alle Fx-Instanzen) zu erweitern und damit die volle Kontrolle über die Animation zu erhalten. Wir können nun die Set () Funktion verwenden, bei jedem Schritt der Animation gebrannt, um manuell zu berechnen und die Werte für die Wirkung erforderlich gesetzt. Der wichtigste Teil ist hier die get_points () Funktion, wo die aktuelle Position für das animierte Element berechnet. Die verwendete Formel ist für eine kubische Kurve.
Element.Properties
Um die Fx.Bezier als dynamisches Argument in der gleichen Weise wie Tween oder Morph einzustellen. wir müssen die Elementeigenschaft in Element.Properties Objekt erstellen.
Jetzt können wir individuelle FX entweder, gespeichert in einer Variablen oder gespeichert in dem Speicherelement verwenden. Hier ist ein Beispiel dafür, wie in einer Variablen zu speichern, auch die Geige herausfinden, wo ein Beispiel ist, wie Speicherelement zu verwenden.
Ein paar Links zum Thema: