Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save stealthcopter/bff831e2bd5e6d09e7ea78e10ade123b to your computer and use it in GitHub Desktop.
Save stealthcopter/bff831e2bd5e6d09e7ea78e10ade123b to your computer and use it in GitHub Desktop.
Cross to Back Arrow Animated Vector Drawable

Cross to Back Arrow and reverse

An android animated vector drawable created using ShapeShifter

import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
private boolean isCrossShowing = true;
private void toggleAnimation(){
AnimatedVectorDrawableCompat animDrawable = AnimatedVectorDrawableCompat.create(this, isCrossShowing ? R.drawable.avd_cross_to_back_arrow : R.drawable.avd_back_arrow_to_cross);
imageView.setImageDrawable(animDrawable);
currentDrawable.start();
isCrossShowing = !isCrossShowing;
}
<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="28dp"
android:height="28dp"
android:viewportWidth="300"
android:viewportHeight="300">
<group
android:name="layer1_1"
android:translateX="-35"
android:translateY="50">
<path
android:name="path4261"
android:pathData="M 100.916 96.074 L 302.956 96.074"
android:strokeColor="#FFFFFF"
android:strokeWidth="26.881051706026614"/>
<group android:name="layer1_2">
<path
android:name="path4199_1"
android:pathData="M 11.087 10.624 L 187.017 186.555"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"
android:trimPathStart="0.44"
android:trimPathEnd="0.9"/>
<path
android:name="path4199_6_1"
android:pathData="M 186.177 10.251 L 10.247 186.18"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"
android:trimPathStart="0.1"
android:trimPathEnd="0.55"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path4199_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="413"
android:duration="400"
android:valueFrom="0.44"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="101"
android:duration="389"
android:valueFrom="0.9"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="path4199_6_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="413"
android:duration="400"
android:valueFrom="0.55"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="101"
android:duration="389"
android:valueFrom="0.1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="layer1_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:startOffset="364"
android:duration="416"
android:valueFrom="-35"
android:valueTo="50"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path4261">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:startOffset="101"
android:duration="452"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
<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="28dp"
android:height="28dp"
android:viewportWidth="300"
android:viewportHeight="300">
<group
android:name="layer1_1"
android:translateX="50"
android:translateY="50">
<path
android:name="path4261"
android:pathData="M 100.916 96.074 L 302.956 96.074"
android:strokeColor="#FFFFFF"
android:strokeWidth="26.881051706026614"
android:trimPathEnd="0"/>
<group android:name="layer1_2">
<path
android:name="path4199_1"
android:pathData="M 11.087 10.624 L 187.017 186.555"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"/>
<path
android:name="path4199_6_1"
android:pathData="M 186.177 10.251 L 10.247 186.18"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path4199_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:duration="400"
android:valueFrom="0"
android:valueTo="0.44"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="486"
android:duration="389"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="path4199_6_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="400"
android:valueFrom="1"
android:valueTo="0.55"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="538"
android:duration="389"
android:valueFrom="0"
android:valueTo="0.1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="layer1_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:startOffset="411"
android:duration="416"
android:valueFrom="50"
android:valueTo="-40"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path4261">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:startOffset="438"
android:duration="389"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment