Antykwariat Księgarski Piastun AK - 21 - 415 (CI)

Sygnatura BA-L1

stan bardzo dobry od prywatnego właściciela

SVG Animations

by Sarah Drasner

Released April 2017

Publisher(s): O'Reilly Media, Inc.

ISBN: 9781491939703

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.

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

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. GreenSock’s Timeline

A Simple Timeline

Relative Labels

Nested and Master Timelines

Organization

Loops

Pausing and Events

Other Timeline Methods

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()

GreenSock’s 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 Sky’s the Limit

Index