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

Delighting Details - Animated Vector Drawables

Delighting Details - Animated Vector Drawables

Source code for the examples presented https://github.com/marcospaulo/DroidconNYC2016-AVD

Vector Drawables are available since Lollipop and are now part of the Support Library. They bring a whole new range of possibilities when it comes to animation that can delight your users in many ways. In this talk we're gonna go through what we can do to animate our vector drawables, how to implement them and support them in a wide range of android versions. We're gonna take a look at how we can do animations with path data as well as trimPath, how to choreograph them to achieve your desired animation. Finally, I'm gonna show how we can play with Vectors on sketch without being a rockstar design so we can create the vectors we need to achieve our animations. I'm gonna show how we can get a SVG from google's material design website and easily change it in Sketch to achieve a very animations using the concepts presented at the beginning.

Dfd02975cecba29510f6f8464e5bc916?s=128

Marcos Paulo Souza Damasceno

September 30, 2016
Tweet

More Decks by Marcos Paulo Souza Damasceno

Other Decks in Programming

Transcript

  1. Delighting Details - Animated Vector Drawables An overview Marcos Damasceno

    @marcospaulosd
  2. http://life.mirego.com/

  3. Early Days

  4. ShapeDrawables <?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/ res/android"
 android:shape="rectangle">
 <solid android:color="#007bb6"/>


    <corners android:bottomRightRadius="4dp"
 android:bottomLeftRadius="4dp"
 android:topLeftRadius="4dp"
 android:topRightRadius="4dp"/>
 </shape> Early Days
  5. ShapeDrawables Early Days StateDrawables TransitionDrawables

  6. Nowadays

  7. Nowadays VectorDrawables Introduced with Lollipop Similar to SVG but a

    bit limited Vector drawables automatically scales to the density of the device
  8. Nowadays VectorDrawables <?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:width="48dp"
 android:height="48dp"
 android:viewportHeight="48"


    android:viewportWidth="48">
 
 <group
 android:name="group"
 android:pivotX="24"
 android:pivotY="24">
 <path android:pathData="M 0 0 L 48 0 L 48 48 L 0 48 Z" />
 <path
 android:name="play"
 android:fillColor=“#FFFFFF"
 android:pathData="M 20 15 L 32 24 L 32 24 L 20 33 Z" />
 
 </group>
 
 </vector>
  9. SVG

  10. SVG XML language, used to draw graphics It supports gradient,

    rotations, filter effects, animations and so on. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/> </svg>
  11. SVG XML language, used to draw graphics It supports gradient,

    rotations, filter effects, animations and so on. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/> </svg>
  12. SVG <path d="M10 10 H 90 V 90 H 10

    L 10 10"/>
  13. SVG There are 5 line commands for drawing paths. Each

    command draw a straight line between 2 points <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
  14. SVG <path d="M10 10 H 90 V 90 H 10

    L 10 10"/> There are 5 line commands for drawing paths. Each command draw a straight line between 2 points M - Move to L - Line To Z - Close Path H - Horizontal Line V - Vertical Line
  15. SVG M is always the first command in a path

    data, it means “Move To”, M - Move to <path d="M10 10
  16. SVG M is always the first command in a path

    data, it means “Move To”, M - Move to <path d="M10 10
  17. SVG <path d="M10 10 M is always the first command

    in a path data, it means “Move To”, M - Move to
  18. SVG <path d="M10 10 H draws a horizontal line M

    - Move to <path d="M10 10 H 90 H - Horizontal Line
  19. SVG V draws a vertical line M - Move to

    H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90
  20. SVG L draws a line from the last point until

    a coordenat x or y M - Move to H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90 L - Line To <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
  21. SVG We could even simplify using H 10 and then

    asking it to close the path M - Move to H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90 L - Line To <path d="M10 10 H 90 V 90 H 10 L H 10 Z"/> Z - Close Path
  22. SVG <path d="M10 10 H 90 V 90 H 10

    L H 10 Z" x />
  23. SVG <path d="M10 10 H 90 V 90 H 10

    L H 10 Z" fill="#EBCD57" x />
  24. SVG <path d="M10 10 H 90 V 90 H 10

    L H 10 Z" fill="#EBCD57" stroke="#C02F1D" x />
  25. SVG <path d="M10 10 H 90 V 90 H 10

    L H 10 Z" fill="#EBCD57" stroke="#C02F1D" x /> <path
 android:strokeColor=“#C02F1D”
 android:fillColor=“#EBCD57"
 android:pathData=“M10 10 H 90 V 90 H 10 L H 10 Z" /> Vector Drawable
  26. Vector Drawable: Properties <group> android:rotation android:pivotX android:pivotY android:scaleX android:scaleY android:translateX

    android:translateY <path> android:pathData android:fillColor android:strokeColor android:strokeWidth android:strokeAlpha android:fillAlpha android:trimPathOffset android:trimPathStart android:trimPathEnd
  27. Vector Drawable: Properties <path> android:pathData android:trimPathOffset android:trimPathStart android:trimPathEnd

  28. Animated Vector Drawables https://www.youtube.com/watch?v=jQvSXghFwxw

  29. Animated Vector Drawables It allow us to apply animations for

    some properties of a Vector Drawable Animating all properties are natively available on Lollipop+ and available for Kitkat and before via VectorDrawableCompat. The only exception is PathData animation which is not available for Kitkat and before
  30. Animated Vector Drawables Properties we will cover TrimPathOffset PathData TrimPathEnd

    TrimPathStart
  31. Animated Vector Drawables TrimPathOffset TrimPathEnd TrimPathStart

  32. Animated Vector Drawables TrimPathStart The fraction of the path to

    trim from the start, in the range from 0 to 1.
  33. Animated Vector Drawables TrimPathEnd The fraction of the path to

    trim from the end, in the range from 0 to 1.
  34. Animated Vector Drawables TrimPathOffset Shift trim region (allows showed 


    region to include the start and end), 
 in the range from 0 to 1.
  35. Animated Vector Drawables TrimPathOffset TrimPathEnd TrimPathStart LIVE DEMONSTRATION

  36. Animated Vector Drawables Working with the vector LIVE DEMONSTRATION

  37. Animated Vector Drawables final vector drawable file <vector …
 <path


    android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 <path
 android:name="body"
 android:pathData="M5,21 …18.34 5,21 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 <path
 android:name="line"
 android:pathData="M14,13 … 5,21"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 </vector>
  38. Animated Vector Drawables To create an Animated Vector Drawable we

    need to have at least three components <vector <animated-vector <objectAnimator
  39. None
  40. Set the vector to the initial position <vector …
 <path


    android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0"
 android:trimPathOffset="0.5" />
 </vector> ic_profile_outilined.xml
  41. Set the vector to the initial position <vector …
 <path


    android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0"
 android:trimPathOffset="0.5" />
 </vector> ic_profile_outilined.xml
  42. Set the vector to the initial position <vector …
 <path


    android:name="body"
 android:pathData="M5,21 …18.34 5,21 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0" />
 </vector> ic_profile_outilined.xml
  43. Set the vector to the initial position <vector …
 <path


    android:name="line"
 android:pathData="M14,13 … 5,21"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0" />
 </vector> ic_profile_outilined.xml
  44. Set Up Animations <set 
 <objectAnimator
 android:duration="600"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:interpolator=“@android:

    interpolator/accelerate_cubic"
 android:valueTo="1"/>
 </set> reveal_profile_head_icon_animation.xml
  45. Interpolators are important With interpolator No Interpolator

  46. reveal_connection.xml <set android:ordering="sequentially">
 <objectAnimator
 android:duration="200"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="500"
 android:interpolator= "@android:interpolator/linear"


    android:valueTo="1"/>
 
 <objectAnimator
 android:duration="300"
 android:propertyName="trimPathStart"
 android:valueFrom="0"
 android:startOffset="300"
 android:interpolator=
 "@android:interpolator/decelerate_cubic"
 android:valueTo="1"/>
 </set> Set Up Animations
  47. reveal_connection.xml <set android:ordering="sequentially">
 <objectAnimator
 android:duration="200"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="500"
 android:interpolator= "@android:interpolator/linear"


    android:valueTo="1"/>
 
 <objectAnimator
 android:duration="300"
 android:propertyName="trimPathStart"
 android:valueFrom="0"
 android:startOffset="300"
 android:interpolator=
 "@android:interpolator/decelerate_cubic"
 android:valueTo="1"/>
 </set> Set Up Animations
  48. reveal_body.xml <set>
 <objectAnimator
 android:duration="600"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="800"
 android:valueTo="1"/>
 </set> Set

    Up Animations
  49. avd_ic_profile.xml <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@drawable/ic_player" >
 <target
 android:name="body"
 android:animation="@anim/reveal_player_body_icon_animation" />
 <target


    android:name="head"
 android:animation="@anim/reveal_player_head_icon_animation" />
 
 <target
 android:name="line"
 android:animation="@anim/reveal_connection" />
 </animated-vector> Set Up Animations
  50. Making the animation alive ImageView icProfile = (ImageView) findViewById(R.id.ic_profile); 


    final AnimatedVectorDrawable avdProfile = (AnimatedVectorDrawable) icProfile.getDrawable(); 
 icProfile.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 avdProfile.start();
 }
 });
  51. None
  52. Animated Vector Drawables Properties we will cover TrimPathOffset PathData TrimPathEnd

    TrimPathStart
  53. Animated Vector Drawables PathData

  54. Animated Vector Drawables PathData Same concept <vector <animated-vector <objectAnimator

  55. Animated Vector Drawables Vectors: ic_play.xml ic_stop.xml avd_play_to_stop.xml avd_stop_to_play.xml Animated Vector

    XML:
  56. Animated Vector Drawables Animator gets tricky. ic_play.xml <path
 android:name="play"
 android:fillColor="@android:color/white"


    android:pathData="M 20 15 L 32 24 L 20 33 Z" /> ic_stop.xml <path
 android:name="stop"
 android:fillColor="@android:color/white"
 android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" />
  57. Animated Vector Drawables Animator gets tricky. from: to: android:pathData="M 20

    15 L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" />
  58. Animated Vector Drawables Animator gets tricky. from: android:pathData="M 20 15

    L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" /> to: android:pathData="M 20 15 L 32 24 L 20 33 Z” /> L 32 24
  59. Animated Vector Drawables Animator gets tricky. from: android:pathData="M 20 15

    L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" /> to: L 32 24
  60. Animated Vector Drawables anim_play_to_stop_xml: <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
 


    <objectAnimator
 android:duration="300"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:propertyName="pathData"
 android:valueFrom="M 20 15 L 32 24 L 32 24 L 20 33 Z"
 android:valueTo="M 16 16 L 32 16 L 32 32 L 16 32 Z"
 android:valueType="pathType" />
 
 </set>
  61. Animated Vector Drawables anim_stop_to_play_xml: <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
 


    <objectAnimator
 android:duration="300"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:propertyName="pathData"
 android:valueFrom="M 16 16 L 32 16 L 32 32 L 16 32 Z"
 android:valueTo="M 20 15 L 32 24 L 32 24 L 20 33 Z"
 android:valueType="pathType" />
 
 </set>
  62. Animated Vector Drawables OMG! <animated-vector/>, <vector/> and a <animator/>?
 TooMuchFilesException!

  63. XML bundle format For the rescue Available since Build Tools

    24 Let you merge the 3 xml files in one only 
 using the aapt namespace
  64. AnimatedStateListDrawable Available for Marshmallow+ <animated-selector android:constantSize="true">
 <item
 android:id="@+id/playing"
 android:state_checked="true"
 android:drawable="@drawable/ic_stop"

    />
 
 <item
 android:id="@+id/stopped"
 android:drawable="@drawable/ic_play" />
 
 <transition
 android:fromId="@id/stopped"
 android:toId="@id/playing"
 android:drawable="@drawable/avd_play_to_stop" />
 
 <transition
 android:fromId="@id/playing"
 android:toId="@id/stopped"
 android:drawable="@drawable/avd_stop_to_play" />
 
 </animated-selector> Set up transition for 
 changing states easily
  65. Animated Vector Drawables allow us to delight our users 


    and to put the attention to the user in the right place And they’re awesome.
  66. Marcos Damasceno @marcospaulosd Thank You