use scaling property to animate shutter

This commit is contained in:
darthpaul 2022-09-20 18:25:31 +01:00
parent 0cc5210bd2
commit 94cbf213cc
12 changed files with 147 additions and 130 deletions

View File

@ -7,12 +7,13 @@
android:fillColor="#ffffff" android:fillColor="#ffffff"
android:fillType="evenOdd" android:fillType="evenOdd"
android:pathData="M256,485C382.47,485 485,382.47 485,256C485,129.53 382.47,27 256,27C129.53,27 27,129.53 27,256C27,382.47 129.53,485 256,485ZM256,465C370.32,465 463,371.43 463,256C463,140.57 370.32,47 256,47C141.68,47 49,140.57 49,256C49,371.43 141.68,465 256,465Z" /> android:pathData="M256,485C382.47,485 485,382.47 485,256C485,129.53 382.47,27 256,27C129.53,27 27,129.53 27,256C27,382.47 129.53,485 256,485ZM256,465C370.32,465 463,371.43 463,256C463,140.57 370.32,47 256,47C141.68,47 49,140.57 49,256C49,371.43 141.68,465 256,465Z" />
<path
<group
android:name="inner" android:name="inner"
android:fillColor="#ffffff" android:pivotX="256"
android:fillType="evenOdd" android:pivotY="256">
android:pathData="M255.5,426C349.67,426 426,349.67 426,255.5C426,161.34 349.67,85 255.5,85C161.34,85 85,161.34 85,255.5C85,349.67 161.34,426 255.5,426ZM255.5,402C336.41,402 402,336.41 402,255.5C402,174.59 336.41,109 255.5,109C174.59,109 109,174.59 109,255.5C109,336.41 174.59,402 255.5,402Z" /> <path
<path android:fillColor="#ffffff"
android:fillColor="#ffffff" android:pathData="M255.5,255.5m-170.5,0a170.5,170.5 0,1 1,341 0a170.5,170.5 0,1 1,-341 0" />
android:pathData="M105,255.5a150.5,147.5 0,1 0,301 0a150.5,147.5 0,1 0,-301 0z" /> </group>
</vector> </vector>

View File

@ -8,19 +8,23 @@
android:fillType="evenOdd" android:fillType="evenOdd"
android:pathData="M256,485C382.47,485 485,382.47 485,256C485,129.53 382.47,27 256,27C129.53,27 27,129.53 27,256C27,382.47 129.53,485 256,485ZM256,465C370.32,465 463,371.43 463,256C463,140.57 370.32,47 256,47C141.68,47 49,140.57 49,256C49,371.43 141.68,465 256,465Z" /> android:pathData="M256,485C382.47,485 485,382.47 485,256C485,129.53 382.47,27 256,27C129.53,27 27,129.53 27,256C27,382.47 129.53,485 256,485ZM256,465C370.32,465 463,371.43 463,256C463,140.57 370.32,47 256,47C141.68,47 49,140.57 49,256C49,371.43 141.68,465 256,465Z" />
<path <group
android:name="inner_big" android:name="inner_big"
android:fillColor="@color/md_red" android:pivotX="256"
android:fillType="evenOdd" android:pivotY="256">
android:pathData="M255.5,426C349.67,426 426,349.67 426,255.5C426,161.34 349.67,85 255.5,85C161.34,85 85,161.34 85,255.5C85,349.67 161.34,426 255.5,426ZM255.5,402C336.41,402 402,336.41 402,255.5C402,174.59 336.41,109 255.5,109C174.59,109 109,174.59 109,255.5C109,336.41 174.59,402 255.5,402Z" /> <path
android:fillColor="@color/md_red"
android:pathData="M255.5,255.5m-170.5,0a170.5,170.5 0,1 1,341 0a170.5,170.5 0,1 1,-341 0" />
</group>
<path
android:name="inner_medium"
android:fillColor="@color/md_red"
android:pathData="M105,255.5a150.5,147.5 0,1 0,301 0a150.5,147.5 0,1 0,-301 0z" />
<path <group
android:name="inner_small" android:name="inner_small"
android:fillColor="@color/md_red" android:pivotX="256"
android:pathData="M221,138L292,138A82,82 0,0 1,374 220L374,291A82,82 0,0 1,292 373L221,373A82,82 0,0 1,139 291L139,220A82,82 0,0 1,221 138z" /> android:pivotY="256">
<path
android:fillColor="@color/md_red"
android:pathData="M221,138L292,138A82,82 0,0 1,374 220L374,291A82,82 0,0 1,292 373L221,373A82,82 0,0 1,139 291L139,220A82,82 0,0 1,221 138z" />
</group>
</vector> </vector>

View File

@ -19,12 +19,12 @@
android:drawable="@drawable/ic_video_rec" /> android:drawable="@drawable/ic_video_rec" />
<transition <transition
android:drawable="@drawable/video_rec_start_to_stop" android:drawable="@drawable/video_rec_record_to_idle"
android:fromId="@id/selected" android:fromId="@id/selected"
android:toId="@id/default_state" /> android:toId="@id/default_state" />
<transition <transition
android:drawable="@drawable/video_rec_stop_to_start" android:drawable="@drawable/video_rec_idle_to_record"
android:fromId="@id/default_state" android:fromId="@id/default_state"
android:toId="@id/selected" /> android:toId="@id/selected" />

View File

@ -5,13 +5,22 @@
<target android:name="inner"> <target android:name="inner">
<aapt:attr name="android:animation"> <aapt:attr name="android:animation">
<objectAnimator <set>
android:duration="3" <objectAnimator
android:interpolator="@android:interpolator/decelerate_cubic" android:duration="@integer/shutter_anim_duration"
android:propertyName="fillColor" android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="@android:color/transparent" android:propertyName="scaleX"
android:valueTo="@android:color/white" android:valueFrom="0.9"
android:valueType="colorType" /> android:valueTo="1"
android:valueType="floatType" />
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="0.9"
android:valueTo="1"
android:valueType="floatType" />
</set>
</aapt:attr> </aapt:attr>
</target> </target>
</animated-vector> </animated-vector>

View File

@ -5,13 +5,22 @@
<target android:name="inner"> <target android:name="inner">
<aapt:attr name="android:animation"> <aapt:attr name="android:animation">
<objectAnimator <set>
android:duration="3" <objectAnimator
android:interpolator="@android:interpolator/decelerate_cubic" android:duration="@integer/shutter_anim_duration"
android:propertyName="fillColor" android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="@android:color/white" android:propertyName="scaleX"
android:valueTo="@android:color/transparent" android:valueFrom="1"
android:valueType="colorType" /> android:valueTo="0.9"
android:valueType="floatType" />
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType" />
</set>
</aapt:attr> </aapt:attr>
</target> </target>
</animated-vector> </animated-vector>

View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/ic_video_rec">
<target android:name="inner_big">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleX"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
</set>
</aapt:attr>
</target>
</animated-vector>

View File

@ -5,13 +5,22 @@
<target android:name="inner_big"> <target android:name="inner_big">
<aapt:attr name="android:animation"> <aapt:attr name="android:animation">
<objectAnimator <set>
android:duration="3" <objectAnimator
android:interpolator="@android:interpolator/decelerate_cubic" android:duration="800"
android:propertyName="fillColor" android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="@android:color/transparent" android:propertyName="scaleX"
android:valueTo="@color/md_red" android:valueFrom="0.9"
android:valueType="colorType" /> android:valueTo="1"
android:valueType="floatType" />
<objectAnimator
android:duration="800"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="0.9"
android:valueTo="1"
android:valueType="floatType" />
</set>
</aapt:attr> </aapt:attr>
</target> </target>
</animated-vector> </animated-vector>

View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/ic_video_rec">
<target android:name="inner_big">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleX"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
</set>
</aapt:attr>
</target>
</animated-vector>

View File

@ -1,41 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/ic_video_rec">
<target android:name="inner_big">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueFrom="@android:color/transparent"
android:valueTo="@color/md_red"
android:valueType="colorType" />
</aapt:attr>
</target>
<target android:name="inner_medium">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueFrom="@android:color/transparent"
android:valueTo="@color/md_red"
android:valueType="colorType" />
</aapt:attr>
</target>
<target android:name="inner_small">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueFrom="@color/md_red"
android:valueTo="@android:color/transparent"
android:valueType="colorType" />
</aapt:attr>
</target>
</animated-vector>

View File

@ -1,41 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/ic_video_rec">
<target android:name="inner_big">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueTo="@android:color/transparent"
android:valueFrom="@color/md_red"
android:valueType="colorType" />
</aapt:attr>
</target>
<target android:name="inner_medium">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueTo="@android:color/transparent"
android:valueFrom="@color/md_red"
android:valueType="colorType" />
</aapt:attr>
</target>
<target android:name="inner_small">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="3"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="fillColor"
android:valueTo="@color/md_red"
android:valueFrom="@android:color/transparent"
android:valueType="colorType" />
</aapt:attr>
</target>
</animated-vector>

View File

@ -5,13 +5,22 @@
<target android:name="inner_big"> <target android:name="inner_big">
<aapt:attr name="android:animation"> <aapt:attr name="android:animation">
<objectAnimator <set>
android:duration="3" <objectAnimator
android:interpolator="@android:interpolator/decelerate_cubic" android:duration="@integer/shutter_anim_duration"
android:propertyName="fillColor" android:interpolator="@android:anim/accelerate_interpolator"
android:valueFrom="@color/md_red" android:propertyName="scaleX"
android:valueTo="@android:color/transparent" android:valueFrom="1"
android:valueType="colorType" /> android:valueTo="0.9"
android:valueType="floatType" />
<objectAnimator
android:duration="@integer/shutter_anim_duration"
android:interpolator="@android:anim/accelerate_interpolator"
android:propertyName="scaleY"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType" />
</set>
</aapt:attr> </aapt:attr>
</target> </target>
</animated-vector> </animated-vector>

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<integer name="shutter_anim_duration">500</integer>
</resources>