reklama - zainteresowany?

SVG Animations. From Common UX Implementations to Complex Responsive Animation - Helion

SVG Animations. From Common UX Implementations to Complex Responsive Animation
ebook
Autor: Sarah Drasner
ISBN: 978-14-919-3965-9
stron: 246, Format: ebook
Data wydania: 2017-03-17
Księgarnia: Helion

Cena książki: 152,15 zł (poprzednio: 176,92 zł)
Oszczędzasz: 14% (-24,77 zł)

Dodaj do koszyka SVG Animations. From Common UX Implementations to Complex Responsive Animation

Tagi: Funkcjonalność stron i UX | Inne

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, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.

This practical book takes a deep dive into how you can to solve these problems with stability, performance, and creativity in mind.

  • Learn how to make SVG cross-browser compatible, backwards compatible, optimized, and responsive
  • Plan and debug animation
  • Make a complex animation responsive, as many sites are responsive
  • Profile each animation technique in terms of performance so that you know what you're getting in to with each library or native technology

Dodaj do koszyka SVG Animations. From Common UX Implementations to Complex Responsive Animation

 

Osoby które kupowały "SVG Animations. From Common UX Implementations to Complex Responsive Animation", wybierały także:

  • Projektowanie oprogramowania dla zupeÅ‚nie poczÄ…tkujÄ…cych. Owoce programowania. Wydanie V
  • D3.js w akcji
  • Nie każ mi myÅ›leć! O życiowym podejÅ›ciu do funkcjonalnoÅ›ci stron internetowych. Wydanie III
  • Ucieczka z puÅ‚apki budowania. Efektywne zarzÄ…dzanie produktem
  • Badanie UX. Praktyczne techniki projektowania bezkonkurencyjnych produktów

Dodaj do koszyka SVG Animations. From Common UX Implementations to Complex Responsive Animation

Spis treści

SVG Animations. From Common UX Implementations to Complex Responsive Animation eBook -- spis treści

  • Foreword
  • Preface
    • SVG Animation: Where Art and Code Intersect
    • Conventions Used in This Book
    • Using Code Examples
    • OReilly Safari
    • How to Contact Us
    • Acknowledgments
  • 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
  • 2. Animating with CSS
    • Animating with SVG
    • Benefits of Drawing with SVG
    • Silky-Smooth Animation
  • 3. CSS Animation and Hand-Drawn SVG Sprites
    • Keyframe Animation with steps() and SVG Sprites, Two Ways
      • The Drawing in Illustrator with a Template Way
      • The Drawing in an SVG Editor or on Paper Frame-by-Frame and Using Grunticon to Sprite Way
      • Simple Code for Complex Movement
      • Simple Walk Cycle
  • 4. Creating a Responsive SVG Sprite
    • SVG Sprites and CSS for Responsive Development
    • Grouping and DRYing It Out
    • The viewBox Trick
    • Responsive Animation
  • 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
  • 6. Animating Data Visualizations
    • Why Use Animation in Data Visualization?
    • D3 with CSS Animation Example
    • Chartist with CSS Animation Example
    • Animating with D3
      • Chaining and Repeating
  • 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
  • 8. Animating with GreenSock
    • Basic GreenSock Syntax
      • TweenMax/TweenLite
      • .to/.from/.fromTo
      • Staggering
      • Elements
      • Duration
      • Delay
      • Properties to Animate
      • Easing
  • 9. GreenSocks Timeline
    • A Simple Timeline
    • Relative Labels
    • Nested and Master Timelines
      • Organization
      • Loops
      • Pausing and Events
      • Other Timeline Methods
        • TimelineLite and TimelineMax methods
        • Methods exclusive to TimelineMax
  • 10. MorphSVG and Motion Along a Path
    • MorphSVG
      • findShapeIndex()
    • Motion Along a Path
  • 11. Stagger Effects, Tweening HSL, and SplitText for Text Animation
    • Staggered Animations
    • Relative HSL Color Animation
      • SplitText
  • 12. DrawSVG and Draggable
    • Draggable
      • Drag Types
      • hitTest()
      • Using Draggable to Control a Timeline
    • DrawSVG
  • 13. Mo.js
    • Base Premises
    • Shapes
    • Shape Motion
      • Chaining
      • Swirls
      • Burst
      • Timeline
      • Tween
      • Path Easing
      • Mo.js Tools
  • 14. React-Motion
    • <Motion />
    • <StaggeredMotion />
  • 15. Animating the Unanimatable: Motion with Attributes and Bare-Metal Implementations
    • requestAnimationFrame()
    • GreenSocks AttrPlugin
    • Practical Application: Animating the viewBox
      • Another Demo: A Guided Infographic
  • 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
  • 17. Designing, Prototyping, and Animation in Component Libraries
    • Designing an Animation
      • Working with the Language of Motion
      • Rein It In
      • Have an Opinion
      • Elevate This
    • Prototyping
      • Backward to Move Forward
      • Tools
      • Murder Your Darlings
      • Design and Code Workflows
    • Animations in Component Libraries
      • Buy-in
      • Time Is Money
      • The Skys the Limit
  • Index

Dodaj do koszyka SVG Animations. From Common UX Implementations to Complex Responsive Animation

Code, Publish & WebDesing by CATALIST.com.pl



(c) 2005-2024 CATALIST agencja interaktywna, znaki firmowe należą do wydawnictwa Helion S.A.