Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shape Shifting: Creating delightful icon animations

9ceae595ce38efe3f27af7819559ac92?s=47 Or Bar
July 13, 2017

Shape Shifting: Creating delightful icon animations

9ceae595ce38efe3f27af7819559ac92?s=128

Or Bar

July 13, 2017
Tweet

Transcript

  1. Shape Shifting Creating delightful icon animations Or Bar

  2. History • Menu to Back animation - ActionBarDrawerToggle • Timely

  3. None
  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