Skip to content

Instantly share code, notes, and snippets.

@guyca
Last active May 1, 2021 13:33
Show Gist options
  • Save guyca/07767e44dd5a92b63d600b40b7bc45a3 to your computer and use it in GitHub Desktop.
Save guyca/07767e44dd5a92b63d600b40b7bc45a3 to your computer and use it in GitHub Desktop.
An animated vector drawable that animates a back button to a dismiss button (both with rounded corners, reversed animation in comments).
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="vector"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="backgroup"
android:pivotX="12"
android:pivotY="12">
<path
android:name="chevron"
android:pathData="M 4 12 L 12 20 L 13.41 18.59 L 6.83 12 L 13.42 5.41 L 12 4 L 4 12"
android:fillColor="@color/toolBarButtonColor"/>
<path
android:name="stem"
android:pathData="M 5 13 L 20 13 L 20 11 L 5 11 L 4 12 L 5 13"
android:fillColor="@color/toolBarButtonColor"/>
</group>
</vector>
</aapt:attr>
<target android:name="backgroup">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="0"
android:valueTo="-90"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="chevron">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 4.71 12.7 C 4.32 12.31 4.32 11.68 4.71 11.29 L 11.3 4.7 C 11.69 4.31 12.32 4.31 12.71 4.7 L 12.71 4.7 C 13.1 5.09 13.1 5.73 12.71 6.12 C 11.083 7.747 9.457 9.373 6.83 12 L 12.71 17.88 C 13.1 18.27 13.1 18.9 12.71 19.29 C 12.32 19.68 11.69 19.68 11.3 19.29 C 9.103 17.093 6.907 14.897 4.71 12.7"
android:valueTo="M 8.71 12.71 C 8.32 12.32 8.32 11.69 8.71 11.3 L 13.3 6.71 C 13.69 6.32 14.32 6.32 14.71 6.71 L 14.71 6.71 C 15.09 7.09 15.1 7.73 14.71 8.12 C 13.417 9.413 12.123 10.707 10.83 12 L 14.71 15.89 C 15.1 16.28 15.1 16.91 14.71 17.3 C 14.32 17.69 13.69 17.69 13.3 17.3 C 11.77 15.77 10.24 14.24 8.71 12.71"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="stem">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 4.71 12 L 5.71 11 L 19 11 C 19 11 19 11 19 11 C 19.55 11 20 11.45 20 12 C 20 12.55 19.55 13 19 13 C 15.277 13 11.553 13 5.71 13 L 4.71 12"
android:valueTo="M 8.71 12 L 9.71 11 L 11.5 11 C 9 11 9 11 9 11 C 9.55 11 10 11.45 10 12 C 10 12.55 9.55 13 9 13 C 12.477 13 11.553 13 9.71 13 L 8.71 12"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
@guyca
Copy link
Author

guyca commented May 1, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment