On est tombés ce matin sur cette démo d’icônes animées utilisant Mo.js assez sympas : http://tympanus.net/Development/Animocons/ et force est de constater que les animations sont plutôt réussies mention spéciale à la licorne et ses problèmes digestifs) !
Du coup, après avoir cherché à en savoir plus sur cette fameuse librairie, nous sommes tombés sur des démos encore plus convaincantes : http://codepen.io/sol0mka/full/ogOYJj/, http://codepen.io/sol0mka/full/yNOage/, http://codepen.io/sol0mka/full/OyzBXR.
La librairie fournit des animations par défaut (Burst, Transit, Swirl, etc…) mais également une classe Tween permettant de développer nos propres animations en appelant un callback à intervalle régulier et en fournissant des outils de « easing » permettant de gérer simplement les différents type d’interpolation (bounce, bezier,elastic, bezier, etc…) tout en laissant la possibilité de créer sa propre courbe de progression en fournissant un path SVG !La documentation (http://mojs.io/tutorials/easing/path-easing/), bien qu’encore assez pauvre (et le mot est faible), nous explique tout de même comment réaliser pas à pas l’animation de la taupe donnée en exemple tout en abordant les notions fondamentales de la librairie.
Histoire d’avoir un aperçu un peu plus « basique » de code (les 3 codepen cités plus haut sont assez compliqués à comprendre) je vous invite à consulter ce petit codepen sur lequel on a codé une fantastique animation de rebond en quelques minutes (appréciez le feu d’artifice quand la balle touche le sol !! Attention les yeux, on avoue, on s’est lâchés) :
http://codepen.io/kumquats/pen/EPqdvE