Skip to content

Instantly share code, notes, and snippets.

@CMingTseng

CMingTseng/!Cross to Back Arrow and reverse Android Animated Vector Drawable.md

Forked from stealthcopter/!Cross to Back Arrow and reverse Android Animated Vector Drawable.md
Created August 7, 2018 10:19
Show Gist options
  • Save CMingTseng/b34b25abe62ff601323f63b57def28a5 to your computer and use it in GitHub Desktop.
Save CMingTseng/b34b25abe62ff601323f63b57def28a5 to your computer and use it in GitHub Desktop.
Download ZIP
Cross to Back Arrow Animated Vector Drawable
Raw
!Cross to Back Arrow and reverse Android Animated Vector Drawable.md

Cross to Back Arrow and reverse

An android animated vector drawable created using ShapeShifter

Raw
ExampleUsage.java
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;
}
Raw
vector_back_arrow_to_cross.xml
<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>
Raw
vector_cross_to_back_arrow.xml
<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