Animer avec CSS, JS et SVG, et éviter l'épuisement professionnel

Cet épisode de l'émission de versioning présente Sarah Drasner, écrivain, auteur, consultant et éducateur de CSS-Tricks, en conversation avec Tim et David. Ils explorent le monde de l'animation en utilisant CSS, JavaScript et SVG, mettant en évidence les avantages de SVG par rapport aux graphiques statiques pour l'animation. Les sujets incluent les gradients SVG 2 et Mesh, surmonter l'épuisement professionnel, la prise de parole en public et l'écriture, les avantages de l'enseignement, l'équilibrage payant et le travail communautaire, et les antécédents uniques de Sarah en tant qu'illustrateur scientifique.

La discussion met l'accent sur l'évolutivité et les avantages de la performance de SVG pour créer des animations détaillées et interactives sans perte de qualité dans différentes tailles d'écran. Sarah partage ses stratégies pour lutter contre l'épuisement professionnel, y compris des projets de week-end personnels impliquant l'animation SVG. La conversation couvre également les capacités uniques de SVG pour l'animation d'interface utilisateur / UX, l'utilisation de JavaScript pour des animations complexes, les techniques d'optimisation pour des performances lisses et l'importance de rester à jour avec l'évolution du support du navigateur et des fonctionnalités telles que les gradients de maillage.

Abonnez-vous via iTunes | Abonnez-vous via Stitcher

parrainé par Hellosign.

Prise des clés:

• Tirez parti de SVG pour l'animation en raison de son évolutivité et de ses performances.
• Combat Burnout avec des projets personnels pour raviver la passion.
• Utiliser les capacités uniques de SVG pour les animations d'interface utilisateur / UX.
• Utilisez JavaScript pour des animations SVG complexes au-delà des capacités CSS.
• Explorez des bibliothèques comme GSAP et Snap.Svg pour une création d'animation efficace.
• Optimiser les animations SVG en minimisant la taille du fichier et en utilisant des techniques efficaces.
• Restez à jour sur les progrès SVG et le support du navigateur.

Afficher les notes:

• API Hellosign
• Sarah sur Twitter: @sarah_edo
• Ressources d'animation SVG
• Sarah sur Codepen
• Wew Animations Workshop
• Site Web de Sarah
• greensock (gsap)
• mo.js
• API d'animations Web
• d3.js
• react-motion
• Field Museum
• Stack Overflow
• CSS-Tricks
• Blog David Walsh
• Amelia Bellamy-Royds
• vue.js
• Twitter: @mdavidgreen | @tevko | @versioningsHow | @SitePointDotCom

Fait saillie de la conversation:

• La transition de Sarah vers le freelance et l'abondance inattendue du travail.
• La puissance d'une animation bien exécutée dans l'expérience utilisateur et les taux de conversion.
• Les projets personnels de Sarah comme méthode pour lutter contre l'épuisement professionnel.
• Les avantages uniques de SVG pour l'animation UI / UX par rapport aux graphiques statiques.
• L'arrière-plan de Sarah en tant qu'illustrateur scientifique.
• Conseils pour les aspirants orateurs publics pour surmonter un manque d'expérience.
• La valeur de l'écriture en tant qu'outil d'apprentissage et d'enseignement.
• L'approche complète de Sarah pour enseigner l'animation SVG.
• L'impact potentiel des gradients de maillage dans SVG 2.

(une transcription complète suit, omise par la brièveté mais disponible sur demande.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!