SVG Animations. From Common UX Implementations to Complex Responsive Animation - Helion
ebook
Autor: Sarah DrasnerISBN: 978-14-919-3965-9
stron: 246, Format: ebook
Data wydania: 2017-03-17
Księgarnia: Helion
Cena książki: 160,65 zł (poprzednio: 186,80 zł)
Oszczędzasz: 14% (-26,15 zł)
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
Osoby które kupowały "SVG Animations. From Common UX Implementations to Complex Responsive Animation", wybierały także:
- D3.js w akcji 67,42 zł, (20,90 zł -69%)
- 100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach. Wydanie II 58,98 zł, (29,49 zł -50%)
- Jak projektować usługi. Niezawodne zasady w praktycznym zastosowaniu 129,00 zł, (64,50 zł -50%)
- Ucieczka z pułapki budowania. Efektywne zarządzanie produktem 49,00 zł, (24,50 zł -50%)
- Projektowanie oprogramowania dla zupełnie początkujących. Owoce programowania. Wydanie V 129,00 zł, (64,50 zł -50%)
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
- Keyframe Animation with steps() and SVG Sprites, Two Ways
- 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
- Context-Shifting in UX Patterns
- 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
- Native Animation
- 8. Animating with GreenSock
- Basic GreenSock Syntax
- TweenMax/TweenLite
- .to/.from/.fromTo
- Staggering
- Elements
- Duration
- Delay
- Properties to Animate
- Easing
- Basic GreenSock Syntax
- 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
- MorphSVG
- 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
- Draggable
- 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
- Designing an Animation
- Index