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

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 ﬁlled, stroked, or used as a clipping path • d - Path data attribute • e.g. "M 100, 100 L 300, 100 L 200, 300 z” • ﬁll - the color to ﬁll the ﬁnal shape • stroke - the path color • ﬁll-rule - how to ﬁll 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 • ﬁll - color of the inner area of the path • ﬁll=“blue” • ﬁll-rule - The rule to use to ﬁll 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

VectorDrawable

VectorDrawable

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.

Slide 46

Slide 46 text

Path Morphing Minus: M 5,11 L 19,11 L 19,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 47

Slide 47 text

Path Morphing Minus: M 5,11 L 19,11 L 19,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 48

Slide 48 text

Path Morphing Minus: M 5,11 L 19,11 L 19,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 49

Slide 49 text

Path Morphing Minus: M 5,11 L 19,11 L 19,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 50

Slide 50 text

Path Morphing Minus: M 5,11 L 19,11 L 19,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 51

Slide 51 text

Path Morphing Minus: M 5,11 L 11,11 L 11,11 L 13,11 L 13,11 L 19,11 L 19,13 L 13,13 L 13,13 L 11,13 L 11,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 52

Slide 52 text

Path Morphing Minus: M 5,11 L 11,11 L 11,11 L 13,11 L 13,11 L 19,11 L 19,13 L 13,13 L 13,13 L 11,13 L 11,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Slide 53

Slide 53 text

Path Morphing Minus: M 5,11 L 11,11 L 11,11 L 13,11 L 13,11 L 19,11 L 19,13 L 13,13 L 13,13 L 11,13 L 11,13 L 5,13 Z Plus: M 5,11 L 11,11 L 11,5 L 13,5 L 13,11 L 19,11 L 19,13 L 13,13 L 13,19 L 11,19 L 11,13 L 5,13 Z

Path Morphing

Path Morphing

Path Morphing

Slide 57

Slide 57 text

Path Clipping restricts the region to which paint can be applied to the canvas

Path Clipping

Path Clipping

Path Clipping

Path Clipping

Slide 62

Slide 62 text

Path Clipping only operates on it’s siblings.

Path Clipping

Slide 64

Slide 64 text

Starting the animation • AnimatedVectorDrawables are Animatables • ((Animatable) imageView.getDrawable()).start(); • Using animated-selector to make it a bit easier

Slide 65

Slide 65 text

Resources • ShapeShifter • https://shapeshifter.design • https://github.com/alexjlockwood/adp-delightful- details • Number tweening • https://sriramramani.wordpress.com/2013/10/14/ number-tweening/ • Bezier Curves • http://y2u.be/zIXoQNvcNd8

Slide 66

Slide 66 text

Thank You Twitter: @or_bar [email protected]