Last active
May 1, 2021 13:33
-
-
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).
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="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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The reversed animation