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

Shape Shifting: Creating delightful icon animations

Shape Shifting: Creating delightful icon animations

Or Bar

July 13, 2017
Tweet

More Decks by Or Bar

Other Decks in Programming

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