Last active
May 1, 2021 13:33
-
-
Save guyca/b7ab4713f9be9a9309a361029fffd64d to your computer and use it in GitHub Desktop.
An animated vector drawable that animates a dismiss button to a back button (both with rounded corners, reversed animation in comments).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="-90" | |
android:valueTo="0" | |
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 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:valueTo="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: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 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:valueTo="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:valueType="pathType" | |
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
The reversed animation