VectorDrawables – Part 3

Previously in this series we’ve looked at how to implement a VectorDrawable using SVG path data and then apply some simple animations to individual component path elements. In this article we’ll take the animations a step further and look at how we can actually animate the contents of the path elements.

Romain Guy has blogged about tracing paths and he used SVG paths to define the path that he then “drew” by adjusting the dash parameters to give the illusion of the path being drawn. As VectorDrawable supports SVG path data we can use the same technique can’t we? Of course we can, but we don’t actually need to as we can achieve the same effect with some of the attributes that we can manipulate on the <path> element within our VectorDrawable.

Drawing a path isn’t suitable for the Android logo that we’ve been using up to now as it consists of filled regions rather than visible paths, so let’s first define a simple visible path VectorDrawable. This is based on a star shaped SVG file which I obtained from here. It is a relatively simple geometric shape which has sufficient overall length to perfectly illustrate the effect that we’re trying to achieve. Of course you could apply exactly the same technique to the outlines of the US state which Romain uses in his example code.

All we have here is a very simple path based on the cubic bezier example which we have named so that we can address it from an AnimatedVectorDrawable.

The AnimatedVectorDrawable itself is also pretty simple – all we need to do is apply a path animator to the named path:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/star">
    
    <target
        android:animation="@animator/path"
        android:name="star" />

</animated-vector>

Where things get interesting is in the animator itself which is a simple Object Animator which animates the value of the trimPathEnd attribute of the <path> element within the VectorDrawable. This attribute controls how much of the path is drawn, with the end being truncated – and has a range of 0 (nothing is drawn) to 1 (the entire path is drawn). So all we need to do is animate this from 0 to 1 and we’ll give the impression of the path being drawn in exactly the same way as Romain does in his example.

The Animator which does this is pretty simple – I’ve set a duration of 5 seconds on the animator so that we can clearly see it, and I’ve set a linear interpolator as we don’t want the tracing speed to alter during the animation:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1"
    android:duration="5000"
    android:valueType="floatType"
    android:interpolator="@android:interpolator/linear">

</objectAnimator>

So we just need to use the AnimatedVectorDrawable in our layout (I’ve actually implemented this in a ViewPager in the sample code to allow us to switch between the examples, but I won’t bother detailing that here).

So we’re managing to achieve the same as Romain’s example does, but using an awful lot less code! In fact we haven’t had to write a single line of Java code (on top of what was done previously to display things and start the animation) to actually achieve this:

So this shows how we can control how the path data is rendered to give some interesting effects, but in the next article we’ll go even deeper still and look at how we can actually manipulate the path data itself.

The source code for this article is available here.

© 2015, Mark Allison. All rights reserved.

Copyright © 2015 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.