Shape Shifting: Creating delightful icon animations

by Or Bar

Slide 1

Slide 1 text

Shape Shifting Creating delightful icon animations Or Bar

Slide 2

Slide 2 text

History • Menu to Back animation - ActionBarDrawerToggle • Timely

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

History • Menu to Back animation - ActionBarDrawerToggle • Timely • Number Tweening • https://sriramramani.wordpress.com/2013/10/14/number-tweening/

Slide 5

Slide 5 text

More than just an icon • An icon is more than just the sum of its parts • Can indicate its purpose • Can convey information to your users

Slide 6

Slide 6 text

Robinhood Success Fail

Slide 7

Slide 7 text

SVG • Scalable Vector Graphics • An image format that describes shapes rather then pixels. • xml based • Version 1.1

Slide 8

Slide 8 text

SVG btn_bold Created with Sketch.

Slide 9

Slide 9 text

Coordinate System • Width(x) and Height(y) - px, cm, mm, pt • Supports Transformations • viewBox -

Slide 10

Slide 10 text

Coordinate System viewBox="0 0 4 4"

Slide 11

Slide 11 text

Coordinate System viewBox="0 0 12 12"

Slide 12

Slide 12 text

Coordinate System viewBox="0 0 48 48"

Slide 13

Slide 13 text

Path • Paths represent the outline of a shape which can be filled, stroked, or used as a clipping path • d - Path data attribute • e.g. "M 100, 100 L 300, 100 L 200, 300 z” • fill - the color to fill the final shape • stroke - the path color • fill-rule - how to fill the resulting shape

Slide 14

Slide 14 text

Path Data - moveto • Establish a new current point. • M (x, y) M 10, 10 M 10, 10

Slide 15

Slide 15 text

Path Data - lineto • Draws new line from current point to new point • L (x, y) • Variants • H (x) • V (y) M 10, 10 L 38,10 v 10 M 10, 10 L 38,10 v 10 M 10, 10 L 38,10 v 10

Slide 16

Slide 16 text

Path Data - curveto • Draws a cubic Bézier curve • C (x1 y1 x2 y2 x y) • Variants • S, Q, T, and A M 10, 10 L 38,10 v 10 C 38, 38 10, 38 10, 20 M 10, 10 L 38,10 v 10 C 38, 38 10, 38 10, 20 M 10, 10 L 38,10 v 10 C 38, 38 10, 38 10, 20 M 10, 10 L 38,10 v 10 C 38, 38 10, 38 10, 20

Slide 17

Slide 17 text

Path Data - closepath • Draws a straight line to the current subpath’s starting point • Z M 10, 10 L 38,10 v 10 C 38, 38 10, 38, 10, 20 Z M 10, 10 L 38,10 v 10 C 38, 38 10, 38, 10, 20 Z

Slide 18

Slide 18 text

Path - Stroke • stroke - color of the path • stroke=“red” • stroke-width - the thickness of the path • stroke-width="2"

Slide 19

Slide 19 text

Path - Fill • fill - color of the inner area of the path • fill=“blue” • fill-rule - The rule to use to fill the shape

Slide 20

Slide 20 text

VectorDrawable • Android’s version of svg • Small subset of the entire svg spec • Different syntax Me Too

Slide 21

Slide 21 text

Coordinate System • viewportWidth and viewportHeight • width and height android:width="48dp" android:height="48dp" android:viewportHeight=“24" android:viewportWidth="24"

Slide 22

Slide 22 text

Path • pathData - svg’s “d” attribute • ﬁllColor • strokeColor • strokeWidth

Slide 23

Slide 23 text

VectorDrawable

Slide 24

Slide 24 text

VectorDrawable

Slide 25

Slide 25 text

VectorDrawable

Slide 26

Slide 26 text

Making VectorDrawables

Slide 27

Slide 27 text

Making VectorDrawables SVG

Slide 28

Slide 28 text

Making VectorDrawables SVG VectorDrawable

Slide 29

Slide 29 text

Solution minSdk = 24 ~95% of users* *In this room

Slide 30

Slide 30 text

ﬁllrule=evenodd +1 +2 -1 0 +1

Slide 31

Slide 31 text

evenodd +1 +2 -1 0 +1 nonzero +1 +2 -1 0 +1

Slide 32

Slide 32 text

nonzero +1 +2 -1 0 +1 nonzero -1 0 +1 0 +1

Slide 33

Slide 33 text

Easy Solution • Use Support library 25.4.0 or newer • Supports evenodd rule • Supports AnimatedVectorDrawables

Slide 34

Slide 34 text

AnimatedVectorDrawable • AnimatedVectorDrawables are the glue that connects VectorDrawables with ObjectAnimators • Allow you to independently animate paths or group of paths

Slide 35

Slide 35 text

AnimatedVectorDrawable

Slide 36

Slide 36 text

AnimatedVectorDrawable

Slide 37

Slide 37 text

AnimatedVectorDrawable

Slide 38

Slide 38 text

Transformations •Scale •Rotation •Translation

Slide 39

Slide 39 text

Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOﬀset

Slide 40

Slide 40 text

Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOﬀset = 0.2

Slide 41

Slide 41 text

Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOﬀset = 0.2 = 0.8

Slide 42

Slide 42 text

Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOﬀset = 0.2 = 0.8 = 0.1

Slide 43

Slide 43 text

Trimming Stroked Paths

Slide 44

Slide 44 text

Trimming Stroked Paths

Slide 45

Slide 45 text

Path Morphing Paths have to be compatible 1. Path A and path B must have the same number of drawing commands. 2. The nth drawing command in path A must have the same type as the nth drawing command in path B, for all n. 3. The nth drawing command in path A must have the same number of parameter as the nth drawing command in path B, for all n.