Shape Shifting: Creating delightful icon animations

Transcript

1. Shape Shifting Creating delightful icon animations Or Bar
2. History • Menu to Back animation - ActionBarDrawerToggle • Timely
4. History • Menu to Back animation - ActionBarDrawerToggle • Timely • Number Tweening • https://sriramramani.wordpress.com/2013/10/14/number-tweening/
5. 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
6. Robinhood Success Fail
7. SVG • Scalable Vector Graphics • An image format that describes shapes rather then pixels. • xml based • Version 1.1
8. SVG <?xml version="1.0" encoding="UTF-8"?> <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http:// www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch --> <title>btn_bold</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="_Assets" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="btn_bold" fill-rule="nonzero" fill="#8F8F8F"> <path d=“M30.156,27.644 … Z” id="B"></path> </g> </g> </svg>
9. Coordinate System • Width(x) and Height(y) - px, cm, mm, pt • Supports Transformations • viewBox - <min-x> <min-y> <width> <height>
10. Coordinate System viewBox="0 0 4 4"
11. Coordinate System viewBox="0 0 12 12"
12. Coordinate System viewBox="0 0 48 48"
13. 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
14. Path Data - moveto • Establish a new current point. • M (x, y) M 10, 10 M 10, 10
15. 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
16. 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
17. 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
18. Path - Stroke • stroke - color of the path • stroke=“red” • stroke-width - the thickness of the path • stroke-width="2"
19. Path - Fill • fill - color of the inner area of the path • fill=“blue” • fill-rule - The rule to use to fill the shape
20. VectorDrawable • Android’s version of svg • Small subset of the entire svg spec • Different syntax Me Too
21. Coordinate System • viewportWidth and viewportHeight • width and height android:width="48dp" android:height="48dp" android:viewportHeight=“24" android:viewportWidth="24"
22. Path • pathData - svg’s “d” attribute • fillColor • strokeColor • strokeWidth
23. VectorDrawable <vector android:width=“24dp” android:height=“24dp” android:viewportHeight=“24.0” android:viewportWidth=“24.0”> <path android:name=“circle” android:fillColor=“#33d4db” android:pathData=“M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0” /> <path android:name=“tick” android:pathData=“M6,11 l3.5,4 l8,-7” android:strokeColor=“#ff3b80” android:strokeWidth=“#1” /> </vector>
24. VectorDrawable <vector android:width=“24dp” android:height=“24dp” android:viewportHeight=“24.0” android:viewportWidth=“24.0”> <path android:name=“circle” android:fillColor=“#33d4db” android:pathData=“M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0” /> <path android:name=“tick” android:pathData=“M6,11 l3.5,4 l8,-7” android:strokeColor=“#ff3b80” android:strokeWidth=“#1” /> </vector>
25. VectorDrawable <vector android:width=“24dp” android:height=“24dp” android:viewportHeight=“24.0” android:viewportWidth=“24.0”> <path android:name=“circle” android:fillColor=“#33d4db” android:pathData=“M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0” /> <path android:name=“tick” android:pathData=“M6,11 l3.5,4 l8,-7” android:strokeColor=“#ff3b80” android:strokeWidth=“#1” /> </vector>
26. Making VectorDrawables
27. Making VectorDrawables SVG
28. Making VectorDrawables SVG VectorDrawable
29. Solution minSdk = 24 ~95% of users* *In this room
30. fillrule=evenodd +1 +2 -1 0 +1
31. evenodd +1 +2 -1 0 +1 nonzero +1 +2 -1 0 +1
32. nonzero +1 +2 -1 0 +1 nonzero -1 0 +1 0 +1
33. Easy Solution • Use Support library 25.4.0 or newer • Supports evenodd rule • Supports AnimatedVectorDrawables
34. AnimatedVectorDrawable • AnimatedVectorDrawables are the glue that connects VectorDrawables with ObjectAnimators • Allow you to independently animate paths or group of paths
35. AnimatedVectorDrawable <animated-vector android:drawable=“@drawable/bug_droid" > <target android:name=“right_arm” android:animation=“@anim/wave" /> </animated-vector>
36. AnimatedVectorDrawable <animated-vector android:drawable=“@drawable/bug_droid" > <target android:name=“right_arm” android:animation=“@anim/wave" /> </animated-vector>
37. AnimatedVectorDrawable <animated-vector android:drawable=“@drawable/bug_droid" > <target android:name=“right_arm” android:animation=“@anim/wave" /> </animated-vector>
38. Transformations •Scale •Rotation •Translation
39. Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOffset
40. Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOffset = 0.2
41. Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOffset = 0.2 = 0.8
42. Trimming Stroked Paths •trimPathStart •trimPathEnd •trimPathOffset = 0.2 = 0.8 = 0.1
43. Trimming Stroked Paths
44. Trimming Stroked Paths
45. 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.
46. 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
47. 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
48. 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
49. 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
50. 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
51. 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
52. 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
53. 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
54. Path Morphing
55. Path Morphing
56. Path Morphing
57. Path Clipping <clip-path> restricts the region to which paint can be applied to the canvas
58. Path Clipping
59. Path Clipping
60. Path Clipping
61. Path Clipping
62. Path Clipping <Clip-path> only operates on it’s siblings. <vector> <path android:name=“strike_through"/> <group> <clip-path android:name=“eye_mask” /> <path android:name=“eye” /> </group> </vector>
63. Path Clipping
64. Starting the animation • AnimatedVectorDrawables are Animatables • ((Animatable) imageView.getDrawable()).start(); • Using animated-selector to make it a bit easier
65. 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
66. Thank You Twitter: @or_bar orbar@tumblr.com