0

I've used ShapeShifter to create an animation vector drawable which perform some trim path and some path data change.

Here's the result:

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
    <vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
        <path
            android:name="omino"
            android:pathData="M 9 10 C 7 10 7 10 7 8 C 7 6 7 6 9 6 C 11 6 11 6 11 8 C 11 10 11 10 9 10 L 9 16"
            android:strokeColor="#000000"
            android:strokeAlpha="0.7"
            android:strokeWidth="0.3"
            android:strokeLineCap="round"
            android:strokeLineJoin="round"/>
        <path
            android:name="bilancia"
            android:pathData="M 3 16 L 20 16 M 12 16 L 12 14 L 22 14"
            android:strokeColor="#000000"
            android:strokeAlpha="0.7"
            android:strokeWidth="0.3"
            android:strokeLineCap="round"
            android:strokeLineJoin="round"/>
        <path
            android:name="abox"
            android:pathData="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
            android:strokeColor="#000000"
            android:strokeAlpha="0.7"
            android:strokeWidth="0.3"
            android:strokeLineCap="round"
            android:strokeLineJoin="round"/>
        <path
            android:name="braccia"
            android:pathData="M 14 14 L 9 11 L 13 12.5"
            android:strokeColor="#000000"
            android:strokeAlpha="0.7"
            android:strokeWidth="0.3"
            android:strokeLineCap="round"
            android:strokeLineJoin="round"/>
    </vector>
</aapt:attr>
<target android:name="omino">
    <aapt:attr name="android:animation">
        <objectAnimator
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:propertyName="trimPathEnd"
            android:duration="1000"
            android:valueFrom="0"
            android:valueTo="1"
            android:valueType="floatType"
            android:interpolator="@android:interpolator/fast_out_slow_in"/>
    </aapt:attr>
</target>
<target android:name="bilancia">
    <aapt:attr name="android:animation">
        <objectAnimator
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:propertyName="trimPathStart"
            android:duration="1000"
            android:valueFrom="1"
            android:valueTo="0"
            android:valueType="floatType"
            android:interpolator="@android:interpolator/fast_out_slow_in"/>
    </aapt:attr>
</target>
<target android:name="abox">
    <aapt:attr name="android:animation">
        <set xmlns:android="http://schemas.android.com/apk/res/android">
            <objectAnimator
                android:propertyName="trimPathEnd"
                android:duration="1000"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="2000"
                android:duration="1000"
                android:valueFrom="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
                android:valueTo="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="500"
                android:duration="1000"
                android:valueFrom="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
                android:valueTo="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </set>
    </aapt:attr>
</target>
<target android:name="braccia">
    <aapt:attr name="android:animation">
        <set xmlns:android="http://schemas.android.com/apk/res/android">
            <objectAnimator
                android:propertyName="trimPathStart"
                android:duration="1000"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="500"
                android:duration="1000"
                android:valueFrom="M 14 14 L 9 11 L 13 12.5"
                android:valueTo="M 14 12 L 9 11 L 13 10.5"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="2000"
                android:duration="1000"
                android:valueFrom="M 14 12 L 9 11 L 13 10.5"
                android:valueTo="M 14 14 L 9 11 L 13 12.5"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </set>
    </aapt:attr>
</target>

Android studio keeps enlighting animated-vector and target as errors. But in compilation all works fine.

I imported this file as a drawable inside my project. Then in the layout I added an ImageView without any src.

With this code I set the animated vector drawable to the imageview and i start the animation:

AnimazioneVettore = (ImageView)view.findViewById(R.id.ImgVectorAnim);
    animatedVector = AnimatedVectorDrawableCompat.create(getContext(), R.drawable.no_abox_animated);
    AnimazioneVettore.setImageDrawable(animatedVector);
    animatedVector.start();

no_abox_animated is the vector file.

When I start the app no error is fired, the vector is loaded inside the imageview and the animation starts.

The first animation "Trim path end/start". It works fine except for "bilancia". Here the animation perform an orrible "jump" insted of animate the last 2 Lines.

At 500 ms the path animation should start. but nothing happens.

At 200 the last path animiation should start but it does not work either.

I'm using 'com.android.support:appcompat-v7:25.3.1'

1 Answer 1

1

First the easy part. Path morphing for AnimatedVectorDrawables was only added to the support library in version 25.4.0 (release notes). So for your pathData animations where nothing is happening you just need to updated the support library version you are using.

As for your "bilancia" problem, this is an issue to do with the way AnimatedVectorDrawables handle trimPath when there is more than one moveTo command (M). You can find an issue filed here. Basically your path is drawing two lines and when combining this with trimPath it doesn't work very well. I'd suggest splitting the two lines in "bilancia" into two separate paths and animating those instead.

1
  • 1
    Thanks it worked. I solved the "bilancia" problem by change the M into L ;)
    – L. Gangemi
    Jun 28, 2017 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.