SVG animations : from common UX implementations to complex responsive animation /

SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, imp...

Descripción completa

Detalles Bibliográficos
Clasificación:Libro Electrónico
Autor principal: Drasner, Sarah (Autor)
Formato: Electrónico eBook
Idioma:Inglés
Publicado: Sebastopol, CA : O'Reilly Media, 2017.
Temas:
Computer animation.
SVG (Document markup language)
Web sites > Design.
Animation par ordinateur.
SVG (Langage de balisage)
Sites Web > Conception.
computer animation.
COMPUTERS > General.
Computer animation
Web sites > Design
Acceso en línea:Texto completo (Requiere registro previo con correo institucional)
Tabla de Contenidos:
  • Copyright; Table of Contents; Foreword; Preface; SVG Animation: Where Art and Code Intersect; Conventions Used in This Book; Using Code Examples; O'Reilly Safari; How to Contact Us; Acknowledgments; Chapter 1. The Anatomy of an SVG; SVG DOM Syntax; viewBox and preserveAspectRatio; Drawing Shapes; Responsive SVG, Grouping, and Drawing Paths; SVG on Export, Recommendations, and Optimization; Reduce Path Points; Optimization Tools; Chapter 2. Animating with CSS; Animating with SVG; Benefits of Drawing with SVG; Silky-Smooth Animation; Chapter 3. CSS Animation and Hand-Drawn SVG Sprites
  • Keyframe Animation with steps() and SVG Sprites, Two Ways; ; ; ; Chapter 4. Creating a Responsive SVG Sprite; SVG Sprites and CSS for Responsive Development; Grouping and DRYing It Out; The viewBox Trick; Responsive Animation; Chapter 5. UI/UX Animations with No External Libraries; Context-Shifting in UX Patterns; Morphing; Revealing; Isolation; Style; Anticipatory Cues; Interaction; Space Conservation; Putting It All Together; Icons That Transform; Chapter 6. Animating Data Visualizations; Why Use Animation in Data Visualization?; D3 with CSS Animation Example
  • Chartist with CSS Animation ExampleAnimating with D3; Chaining and Repeating; Chapter 7. A Comparison of Web Animation Technologies; Native Animation; CSS/Sass/SCSS; requestAnimationFrame(); Canvas; Web Animations API; External Libraries; GreenSock (GSAP); Mo.js; Bodymovin'; Not Suggested; SMIL; Velocity.js; Snap.svg; React-Specific Workflows; React-Motion; GSAP in React; Canvas in React; CSS in React; Covering Ground; Chapter 8. Animating with GreenSock; Basic GreenSock Syntax; TweenMax/TweenLite; .to/.from/.fromTo; Staggering; Elements; Duration; Delay; ; ; Chapter 9. GreenSock's Timeline
  • A Simple TimelineRelative Labels; Nested and Master Timelines; Organization; Loops; Pausing and Events; Other Timeline Methods; Chapter 10. MorphSVG and Motion Along a Path; MorphSVG; findShapeIndex(); Motion Along a Path; Chapter 11. Stagger Effects, Tweening HSL, and SplitText for Text Animation; Staggered Animations; Relative HSL Color Animation; ; Chapter 12. DrawSVG and Draggable; Draggable; Drag Types; hitTest(); Using Draggable to Control a Timeline; DrawSVG; Chapter 13. Mo.js; Base Premises; Shapes; Shape Motion; Chaining; Swirls; Burst; Timeline; Tween; Path Easing
  • Chapter 14. React-Motion; ; Chapter 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations; requestAnimationFrame(); GreenSock's AttrPlugin; Practical Application: Animating the viewBox; Another Demo: A Guided Infographic; Chapter 16. Responsive Animation; Some Quick Responsive Tips; GreenSock and Responsive SVG; Responsive SVG, with or without GreenSock; Responsive Reorganization by Updating the ViewBox; Responsive Reorganization with Multiple SVGs and Media Queries; Less Pizzazz on Mobile; Have a Plan

Ejemplares similares