Comment désinitialiser

J'ai fait un peu simple animation Mootools qui fait un mouvement d'élément sur une trajectoire circulaire en utilisant deux variables de Fx.Morph séparées. Mon problème est que je dois être en mesure d'annuler l'animation, et je ne peux pas pour la vie de me comprendre comment gérer annuler les deux formes sans directement les appeler ou de les enregistrer en tant que variable globale.

J'ai essayé d'utiliser $ (img) .get ( 'Morph') cancel (). mais cela ne semble pas travailler sur des éléments avec plusieurs Fx.

Puisque vous essayez de créer l'animation en fonction de la courbe, je vais vous montrer de façon plus élégante pour y parvenir. Il est basé sur l'extension de classe Fx et en ajoutant le support pour les courbes de Bézier.

courbes de Bézier

courbes de Bézier sont utilisées dans les graphiques informatiques pour calculer les courbes lisses et décrire les chemins. Un avantage ici est que seule instance de FX est nécessaire, ce qui permettra d'améliorer les performances, et aussi, vous pouvez créer une animation qui est basée sur tout type de courbe.

Base de Fx classe

La première partie est d'étendre la classe de base Fx (la classe de base pour toutes les instances de Fx) et ainsi obtenir le contrôle total sur l'animation. Nous pouvons maintenant utiliser la fonction set (), tiré sur toutes les étapes de l'animation, pour calculer manuellement et définir les valeurs nécessaires à l'effet. La partie la plus importante est ici la fonction get_points (), où l'on calcule la position actuelle de l'élément animé. La formule utilisée est une courbe cubique.

Element.Properties

Pour pouvoir régler le Fx.Bezier comme argument dynamique de la même manière que tween ou morph. nous devons créer la propriété élément Element.Properties objet.

Maintenant, nous pouvons utiliser FX personnalisé comme soit, stockée dans une variable, ou stocké dans la mémoire de l'élément. Voici un exemple de la façon de stocker dans une variable, vérifiez également le violon où est un exemple comment utiliser le stockage d'éléments.

Quelques liens sur le sujet: