Animated browse tab icon

This commit is contained in:
Jays2Kings 2021-04-23 19:39:49 -04:00
parent f664a4cf9b
commit 5b6463c823
3 changed files with 147 additions and 4 deletions

View File

@ -0,0 +1,55 @@
<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="group"
android:pivotX="12"
android:pivotY="12">
<clip-path
android:name="mask"
android:pathData="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.572 2.515 13.963 2.058 12.319 2.005 C 12.213 2.002 12.106 2 12 2 M 12 10.9 C 11.708 10.9 11.428 11.016 11.222 11.222 C 11.016 11.428 10.9 11.708 10.9 12 C 10.9 12.292 11.016 12.572 11.222 12.778 C 11.428 12.984 11.708 13.1 12 13.1 C 12.292 13.1 12.572 12.984 12.778 12.778 C 12.984 12.572 13.1 12.292 13.1 12 C 13.1 11.708 12.984 11.428 12.778 11.222 C 12.572 11.016 12.292 10.9 12 10.9 C 12 10.9 12 10.9 12 10.9 M 14.19 14.19 L 6 18 L 9.81 9.81 L 18 6"/>
<path
android:name="path"
android:pathData="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12"
android:fillColor="#000"
android:strokeWidth="1"/>
<path
android:name="path_2"
android:pathData="M 7 17 L 10.2 10.2 L 17 7 L 13.8 13.8 L 7 17 M 12 11.1 C 11.5 11.1 11.1 11.5 11.1 12 C 11.1 12.5 11.5 12.9 12 12.9 C 12.5 12.9 12.9 12.5 12.9 12 C 12.9 11.5 12.5 11.1 12 11.1"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:startOffset="75"
android:duration="300"
android:valueFrom="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12"
android:valueTo="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z M 12 20 C 9.879 20 7.843 19.157 6.343 17.657 C 4.843 16.157 4 14.121 4 12 C 4 9.879 4.843 7.843 6.343 6.343 C 7.843 4.843 9.879 4 12 4 C 14.121 4 16.157 4.843 17.657 6.343 C 19.157 7.843 20 9.879 20 12 C 20 14.121 19.157 16.157 17.657 17.657 C 16.157 19.157 14.121 20 12 20"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="mask">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:startOffset="75"
android:duration="300"
android:valueFrom="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.572 2.515 13.963 2.058 12.319 2.005 C 12.213 2.002 12.106 2 12 2 M 12 10.9 C 11.708 10.9 11.428 11.016 11.222 11.222 C 11.016 11.428 10.9 11.708 10.9 12 C 10.9 12.292 11.016 12.572 11.222 12.778 C 11.428 12.984 11.708 13.1 12 13.1 C 12.292 13.1 12.572 12.984 12.778 12.778 C 12.984 12.572 13.1 12.292 13.1 12 C 13.1 11.708 12.984 11.428 12.778 11.222 C 12.572 11.016 12.292 10.9 12 10.9 C 12 10.9 12 10.9 12 10.9 M 14.19 14.19 L 6 18 L 9.81 9.81 L 18 6"
android:valueTo="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 C 12 2 12 2 12 2 M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 M 12 12 L 12 12 L 12 12 L 12 12"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>

View File

@ -0,0 +1,77 @@
<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="group"
android:pivotX="12"
android:pivotY="12">
<clip-path
android:name="mask"
android:pathData="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 C 12 2 12 2 12 2 M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 M 12 12 L 12 12 L 12 12 L 12 12"/>
<path
android:name="path"
android:pathData="M 12 20 C 9.879 20 7.843 19.157 6.343 17.657 C 4.843 16.157 4 14.121 4 12 C 4 9.879 4.843 7.843 6.343 6.343 C 7.843 4.843 9.879 4 12 4 C 14.121 4 16.157 4.843 17.657 6.343 C 19.157 7.843 20 9.879 20 12 C 20 14.121 19.157 16.157 17.657 17.657 C 16.157 19.157 14.121 20 12 20 M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
<path
android:name="path_2"
android:pathData="M 7 17 L 10.2 10.2 L 17 7 L 13.8 13.8 L 7 17 M 12 11.1 C 11.5 11.1 11.1 11.5 11.1 12 C 11.1 12.5 11.5 12.9 12 12.9 C 12.5 12.9 12.9 12.5 12.9 12 C 12.9 11.5 12.5 11.1 12 11.1"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:startOffset="150"
android:duration="300"
android:valueFrom="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z M 12 20 C 9.879 20 7.843 19.157 6.343 17.657 C 4.843 16.157 4 14.121 4 12 C 4 9.879 4.843 7.843 6.343 6.343 C 7.843 4.843 9.879 4 12 4 C 14.121 4 16.157 4.843 17.657 6.343 C 19.157 7.843 20 9.879 20 12 C 20 14.121 19.157 16.157 17.657 17.657 C 16.157 19.157 14.121 20 12 20"
android:valueTo="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 Z M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="mask">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:startOffset="150"
android:duration="300"
android:valueFrom="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.48 2.462 13.755 2 12 2 C 12 2 12 2 12 2 M 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 C 12 12 12 12 12 12 M 12 12 L 12 12 L 12 12 L 12 12"
android:valueTo="M 12 2 C 9.349 2 6.804 3.054 4.929 4.929 C 3.054 6.804 2 9.349 2 12 C 2 14.651 3.054 17.196 4.929 19.071 C 6.804 20.946 9.349 22 12 22 C 13.755 22 15.48 21.538 17 20.66 C 18.52 19.783 19.783 18.52 20.66 17 C 21.538 15.48 22 13.755 22 12 C 22 10.245 21.538 8.52 20.66 7 C 19.783 5.48 18.52 4.217 17 3.34 C 15.572 2.515 13.963 2.058 12.319 2.005 C 12.213 2.002 12.106 2 12 2 M 12 10.9 C 11.708 10.9 11.428 11.016 11.222 11.222 C 11.016 11.428 10.9 11.708 10.9 12 C 10.9 12.292 11.016 12.572 11.222 12.778 C 11.428 12.984 11.708 13.1 12 13.1 C 12.292 13.1 12.572 12.984 12.778 12.778 C 12.984 12.572 13.1 12.292 13.1 12 C 13.1 11.708 12.984 11.428 12.778 11.222 C 12.572 11.016 12.292 10.9 12 10.9 C 12 10.9 12 10.9 12 10.9 M 14.19 14.19 L 6 18 L 9.81 9.81 L 18 6"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="group">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="rotation"
android:startOffset="75"
android:duration="250"
android:valueFrom="0"
android:valueTo="-90"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
<objectAnimator
android:propertyName="rotation"
android:startOffset="325"
android:duration="400"
android:valueFrom="-90"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>

View File

@ -1,5 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_browse_24dp" android:state_checked="true" />
<item android:drawable="@drawable/ic_browse_outline_24dp" android:state_checked="false" />
</selector>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/checked" android:drawable="@drawable/ic_browse_24dp" android:state_checked="true" />
<item android:id="@+id/normal" android:drawable="@drawable/ic_browse_outline_24dp" android:state_checked="false" />
<transition
android:fromId="@id/checked"
android:toId="@id/normal"
android:drawable="@drawable/anim_browse_filled_to_outline"/>
<transition
android:fromId="@id/normal"
android:toId="@id/checked"
android:drawable="@drawable/anim_browse_outline_to_filled"/>
</animated-selector>