Animieren mit CSS, JS und SVG und Vermeiden von Burnout

Diese Folge der Versioning-Show zeigt Sarah Drasner, einen CSS-Tricks-Mitarbeiter, Autor, Berater und Pädagogen, im Gespräch mit Tim und David. Sie untersuchen die Welt der Animation mit CSS, JavaScript und SVG und unterstreichen die Vorteile von SVG gegenüber statischen Grafiken für die Animation. Zu den Themen gehören SVG 2 und Mesh -Gradienten, überwinden Burnout, öffentliches Sprechen und Schreiben, die Vorteile des Unterrichts, des Ausgleichs bezahlter und der Gemeinschaftsarbeit sowie Sarahs einzigartiger Hintergrund als wissenschaftlicher Illustrator.

Die Diskussion betont die Skalierbarkeit und Leistungsvorteile von SVG für die Erstellung detaillierter interaktiver Animationen ohne Qualitätsverlust in verschiedenen Bildschirmgrößen. Sarah teilt ihre Strategien zur Bekämpfung von Burnout, einschließlich persönlicher Wochenendprojekte mit SVG -Animation. Die Konversation deckt auch die einzigartigen Funktionen von SVG für UI/UX -Animation, die Verwendung von JavaScript für komplexe Animationen, Optimierungstechniken für die reibungslose Leistung und die Bedeutung des Aufenthalts mit sich entwickelnden Browserunterstützung und Funktionen wie Mesh -Gradienten ab.

abonnieren Sie iTunes | Abonnieren Sie über Stitcher

gesponsert von HelloSign.

Key Takeaways:

Nutzen Sie die SVG für Animation aufgrund seiner Skalierbarkeit und Leistung.
Kampf Burnout mit persönlichen Projekten, um Leidenschaft wieder zu entfachen.
Verwenden Sie die einzigartigen Funktionen von SVG für UI/UX -Animationen.
JavaScript für komplexe SVG -Animationen jenseits der CSS -Funktionen verwenden.
Erforschen Sie Bibliotheken wie GSAP und Snap.svg für eine effiziente Animationserstellung.
SVG -Animationen optimieren, indem Sie die Dateigröße minimieren und effiziente Techniken verwenden.
Bleiben Sie über SVG -Fortschritte und Browserunterstützung aktualisiert.

Notizen anzeigen:

HelloSign API
Sarah auf Twitter: @sarah_edo
SVG -Animationsressourcen
Sarah auf Codepen
Webanimationen Workshop
Sarahs Website
Greensock (GSAP)
mo.js
Webanimationen API
d3.js
React-Motion
Field Museum
Stack Overflow
CSS-Tricks
David Walsh Blog
Amelia Bellamy-Royds
vue.js
Twitter: @mdavidgreen | @Tevko | @Versioningshow | @SitePointDotcom

Gesprächshighlights:

• Sarahs Übergang zum freiberuflichen und unerwarteten Arbeit.
• Die Kraft der gut ausgeführten Animation in der Benutzererfahrung und der Conversion-Raten.
• Sarahs persönliche Projekte als Methode zur Bekämpfung von Burnout.
• Die einzigartigen Vorteile von SVG für die UI/UX -Animation im Vergleich zu statischen Grafiken.
• Sarahs Hintergrund als wissenschaftlicher Illustrator.
• Ratschläge für angehende öffentliche Redner zur Überwindung eines Mangels an Erfahrung.
• Der Wert des Schreibens als Lern- und Unterrichtsinstrument.
• Sarahs umfassender Ansatz zum Unterrichten von SVG -Animation.
• Der potenzielle Einfluss von Netzgradienten in SVG 2.

(ein vollständiges Transkript folgt, um Kürze auszulassen, aber auf Anfrage verfügbar.)

Das obige ist der detaillierte Inhalt vonAnimieren mit CSS, JS und SVG und Vermeiden von Burnout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!