Share
Ce que vous allez créerLe didacticiel d’aujourd’hui vous laissera impressionné de constater que vous avez écrit si peu de code pour réaliser une animation aussi agréable. DrawSVG par le groupe incroyablement intelligent de GreenSock vous permet de révéler (ou de masquer) progressivement le trait d'un fichier SVG. Voyons comment cela fonctionne en construisant un préchargeur animé.
Comme mentionné, le plugin DrawSVG vous donnera le pouvoir de révéler (ou de cacher) le trait d'un SVG, mais il peut également animer vers l'extérieur à partir du centre d'un trait (ou de n'importe quelle position / segment). C’est exactement ce que nous ferons lors du prochain exercice..
DrawSVG fait partie de la plate-forme d’animation GreenSock (GSAP) et peut être utilisé dans n’importe quelle animation TweenLite, TweenMax, TimelineLite ou TimelineMax. Toutes les fonctionnalités populaires de GSAP (commandes d’exécution, callbacks, facilités, gestion de l’écrasement, imbrication) fonctionneront également avec vos animations SVG fantaisistes! *coup de poing *
L'accès à la documentation et au support de DrawSVGPlugin plus nécessite un abonnement au Club GreenSock. Au moment de la rédaction du présent document, les tarifs varient entre 50 et 150 USD par an, selon le type d’adhésion..
Il existe une version spéciale et entièrement fonctionnelle du DrawSVGPlugin liée au Codepens DrawSVGPlugin de GreenSock, alors n'hésitez pas à en choisir un, ajoutez vos propres graphiques SVG et faites l'essai de DrawSVGPlugin..
Remarque: la version spéciale du plugin ne fonctionnera que sur le domaine CodePen.
Le code qui suit représente tout ce dont nous avons besoin pour faire fonctionner ce chargeur SVG!
Vous trouverez les résultats de la démo dans n’importe quel navigateur prenant en charge le format SVG (très solide si vous ignorez IE8 et les versions antérieures). Vous pouvez également visionner la démonstration complète de Filler Loader sur CodePen.
Voici le balisage dont nous avons besoin:
Au sein de notre index.html vit seul tag qui contient un cx et cy et positionnez le cercle dans le viewBox du élément.
Vous pouvez voir comment ce système fonctionne dans l'image qui suit. Le premier cadre de la série représente notre cx = "50" et enfin la dernière image ajoute cy = "50" . Les x et y de ces attributs font référence au système de coordonnées cartésiennes positionnant notre forme sur les plans horizontal et vertical correspondants..
Le dernier attribut (r) de cercle définit le rayon de notre cercle ou, en d'autres termes, la longueur du centre du cercle au bord de sa boîte. N'hésitez pas à ajuster cette valeur dans ma démo CodePen pour voir les résultats au fur et à mesure que la valeur est modifiée.
Maintenant pour quelques styles.
.charge-chargeur hauteur: 32px; largeur: 32px; transformer: faire pivoter (-90deg); .fill-path fill: none; accident vasculaire cérébral: blanc; AVC-linecap: bout à bout; largeur de trait: 8px;
Cet exemple particulier a un style très minimal. Nous définissons des contraintes comme largeur et la taille (32 x 32), puis le .chemin de remplissage class est ce qui donne à notre chemin son apparence en définissant quelques propriétés SVG disponibles dans les fichiers CSS. Nous donnons au chemin une largeur, une couleur et un type de fin de trait. Le type de fin de cette démo est défini sur bout et place complètement les extrémités du chemin.
Maintenant nous pouvons faire tourner le cercle -90deg (dans le sens anti-horaire). Vous pouvez voir pourquoi en vous basant sur les captures d'écran suivantes. L'image de gauche représente le cercle avant notre rotation et la deuxième image représente le cercle après notre rotation.
Maintenant pour que les choses fonctionnent.
Accentsconagua
var loader = new TimelineMax (repeat: -1), fill_path = $ ('. fill-path'), fill_duration = 1.2, fill_position = '+ =. 25'; // place l'interpolation .25sec après la fin de l'initie load.fromTo (fill_path, fill_duration, drawSVG: '0', drawSVG: '100%', fill_position) .to (fill_path, fill_duration, drawSVG: '100 % 100% ', fill_position);Si vous n'avez jamais vu l'appel TimelineMax, n'ayez crainte. Vous pouvez en lire plus ici avant d’aller plus loin..
Pensez à TimelineMax comme à un scénario auquel nous ajouterons nos images. Dans notre cas, nous avons un seul scénario qui contient un objet avec un valeur clé paring pour contrôler la lecture de l'animation. La lecture est configurée pour se répéter, représentée par la valeur -1 assigné à la répéter clé de notre objet d’options TimelineMax. Puisque nous utilisons jQuery pour la récupération DOM, nous capturons le chemin en utilisant le .chemin de remplissage classe comme notre crochet. C'est la référence que nous allons utiliser pour le chemin alors que nous commençons à l'animer.
Les dernières lignes restantes de notre JavaScript sont l'endroit où la magie opère réellement. L'objet qui contient drawSVG commence par démarrer notre animation de chemin dans le sens des aiguillesdrawSVG: '0') à remplir (drawSVG: '100%'). Maintenant que nous avons tracé le chemin dans une direction, nous devons inverser le remplissage (sens inverse des aiguilles d'une montre). C’est là que notre à() méthode vient et où nous avons défini drawSVG à '100% 100%'. Puisque nous avons terminé notre animation de remplissage à 100%, nous devons inverser le remplissage de 100%. Cela anime le remplissage de l'endroit où le trait est actuellement à un état où le trait existe le long du tracé. Alto!
Comme nous l’avons vu, DrawSVG est extrêmement léger et rapide à configurer. Il est donc très amusant de créer des animations de chemins pour SVG, même pour le développeur débutant. Avec très peu de configuration, nous pouvons apporter un autre arsenal à notre prochain projet, ce qui rendra les interactions et l'expérience agréables..
Si vous avez des questions, n'hésitez pas à demander dans les commentaires ci-dessous. Bonne animation!
