Share
Les plugins pour GSAP sont parfaits lorsque vous avez besoin de fonctionnalités avancées. Le BezierPlugin que je vais expliquer dans ce tutoriel aide à animer pratiquement toutes les propriétés le long d'un chemin de Bézier incurvé défini comme un tableau de points / valeurs. Avant de vous lancer, nous devrions prendre un moment pour savoir ce qu’est une courbe de Bézier et d’où elle vient..
De retour à l'époque primitive du dessin à la main, les graphistes connaissaient très bien les outils appelés «courbes françaises». Ces pièces aux formes étranges (généralement du plastique mince) aidaient les concepteurs à créer des courbes élégantes, un peu à la manière des stylos outil dans Illustrator.
Outil à main primitif appelé courbe française utilisé par de nombreux graphistes et typographes (src: Wikipedia)
Ces chemins compliqués sont appelés «courbes de Bézier». Dans le monde numérique, ils sont exprimés sous forme d'une série de points, calculés mathématiquement afin de plier des lignes en des formes élégantes et ornées. Plus précisément, une courbe de Bézier est utilisée pour modéliser des courbes lisses à l'aide d'une série de points tracés reliés entre eux par un chemin..
Bézier Courbes telles que nous les voyons numériquement. Exemple ci-dessus tiré de l'outil Stylo d'Illustrator: le guide complet
Les courbes de Bézier ont été largement diffusées en 1962 par l'ingénieur français Pierre Bézier, qui a utilisé ces chemins ornés pour concevoir des carrosseries d'automobiles chez Renault. L'étude initiale de la courbe de Bézier a toutefois été développée pour la première fois en 1959 par le mathématicien Paul de Casteljau en utilisant l'algorithme de Casteljau, une méthode numériquement stable pour évaluer les courbes de Bézier, chez Citroën. Les illustrateurs de vecteurs doivent beaucoup à l'industrie automobile!
Pour les plus curieux, voici une excellente explication des courbes de Bézier appelée Cubic Bézier Curves - Under the Hood expliquant plus en détail comment la courbe est née de façon conceptuelle en termes de principes mathématiques et visuels..
Ne faire qu’un avec le Bézier rend le Jedi génial, mais seul un vrai Jedi Bézier comprend les différents types et saveurs que les courbes de Bézier entrent en jeu. Les courbes les plus courantes sont typiquement Quadratique et Cubique comme vous le verrez dans la majorité des cas d'utilisation.
Avant de replonger dans le GSAP, il est important que vous sachiez que j'utilise TweenMax pour les raisons évoquées précédemment. Le BezierPlugin est déjà emballé pour nous!
Comme je vous l'ai montré au début de notre parcours GreenSock, nous instancions une chronologie afin que nous puissions donner à cette animation une étape pour se présenter, ainsi qu'un moyen de contrôler chaque séquence..
En supposant que la configuration et les mécanismes de la timeline soient triés, nous pouvons examiner comment écrire et utiliser BezierPlugin. Notez que nos valeurs pour les chemins de Bézier ne sont qu'une série de coordonnées x et y, appelée système de coordonnées cartésiennes. Lors de la création, les développeurs doivent s'assurer que chaque objet du tableau a des noms de propriété correspondants..
var bezier_path = [x: valeur, y: valeur, x: valeur, y: valeur]; tl.staggerTo (element, duration, bezier: type: 'thru', valeurs: bezier_path, curviness: 1, facilité: Power1.easeInOut, stagger_value);
Imaginons que nous ayons indiqué un cercle SVG, en passant le sélecteur où vous voyez élément, puis mettre le durée aussi. Donnant X et y des valeurs et un courbure de 1 notre cercle SVG s'animera sur un chemin circulaire comme ceci:
Examinez la source pour plus de détails sur ce qui le fait fonctionner.
Puisque à travers est le Bézier par défaut type, vous n'avez pas vraiment besoin de définir un type. Augmenter et ajuster les valeurs comme curvines peut créer des chemins vraiment intéressants pour les animations. En utilisant le cercle que nous avons vu ci-dessus, je me suis permis d'ajouter quelques cercles supplémentaires en SVG et d'ajuster la valeur de courbure (12 pour être exact)..
Voici un aperçu des vrais types de Bézier acceptés. Si vous envisagez d’utiliser le courbure propriété (qui vous permet de régler la tension sur le Bézier), vous devez vous assurer d’utiliser le à travers type.
Accentsconagua
à travers (par défaut): Le plugin explique comment dessiner Bézier naturellement à travers les valeurs fournies en utilisant un algorithme propriétaire GreenSock.doux: Les valeurs fournies dans le tableau agissent presque comme des aimants qui attirent la courbe vers eux, mais la Bézier ne les parcourt généralement pas.quadratique: Définition des données standard de Bézier quadratique (les Béziers quadratiques ont un point de contrôle entre chaque ancre).cubique: Permet de définir des données standard de Bézier Cubic (Cubic Béziers ont deux points de contrôle entre chaque ancre).à travers la base: C'est la même chose que à travers sauf qu'il utilise un algorithme moins complexe pour le tracé initial de Bézier à travers les valeurs fournies.BezierPlugin permet en outre aux développeurs d’animer d’autres propriétés que les coordonnées x et y. Vous pouvez réellement animer d'autres propriétés telles que les transformations, l'opacité et bien plus encore! Ce n'est pas très courant, mais c'est tout à fait possible. Des propriétés telles que la rotation, l'échelle et même des exemples personnalisés!
Par exemple, nous pourrions animer le opacité ainsi que x et y comme je suis sur le point de le démontrer (notez que chaque objet du tableau doit avoir la propriété opacity correspondante).
var bezier = [x: 0, y: 0, opacité: 0, x: 0, y: 42, opacité: 0, x: 42, y: 42, opacité: 1, x: 42 , y: 0, opacité: 1, x: 0, y: 0, opacité: 0];
Regardons quelques fonctionnalités supplémentaires, pour quand tu te sens en confiance.
Cette fonctionnalité fait automatiquement pivoter la cible en fonction de sa position sur le chemin de Bézier.
Si fantaisie est ce que vous recherchez, alors soyez super chic et animer un objet sur un chemin de Bézier, comme le montre Jan Paepke pour son projet ScrollMagic. Définissez les points de la courbe et indiquez-les dans votre définition d'interpolation afin de les animer le long d'une courbe définie..
Restez à l'écoute pour ma prochaine aventure dans cette série TimelineMax où je vous plongerai dans un autre plugin GSAP appelé Draggable. Nous allons expérimenter avec les timelines activés par Draggable afin de créer un menu coulissant où il peut être glissé pour être ouvert et fermé pour être glissé. A bientôt les professionnels de l'animation!
