From 94cbf213ccd82b6848196bd5198f080516ff7e37 Mon Sep 17 00:00:00 2001
From: darthpaul <paulakhamiogu@gmail.com>
Date: Tue, 20 Sep 2022 18:25:31 +0100
Subject: [PATCH] use scaling property to animate shutter

---
 app/src/main/res/drawable/ic_shutter.xml      | 15 +++----
 app/src/main/res/drawable/ic_video_rec.xml    | 26 +++++++-----
 .../res/drawable/ic_video_rec_animated.xml    |  4 +-
 .../drawable/shutter_pressed_to_unpressed.xml | 23 +++++++----
 .../drawable/shutter_unpressed_to_pressed.xml | 23 +++++++----
 .../res/drawable/video_rec_idle_to_record.xml | 27 ++++++++++++
 .../video_rec_pressed_to_unpressed.xml        | 23 +++++++----
 .../res/drawable/video_rec_record_to_idle.xml | 27 ++++++++++++
 .../res/drawable/video_rec_start_to_stop.xml  | 41 -------------------
 .../res/drawable/video_rec_stop_to_start.xml  | 41 -------------------
 .../video_rec_unpressed_to_pressed.xml        | 23 +++++++----
 app/src/main/res/values/integers.xml          |  4 ++
 12 files changed, 147 insertions(+), 130 deletions(-)
 create mode 100644 app/src/main/res/drawable/video_rec_idle_to_record.xml
 create mode 100644 app/src/main/res/drawable/video_rec_record_to_idle.xml
 delete mode 100644 app/src/main/res/drawable/video_rec_start_to_stop.xml
 delete mode 100644 app/src/main/res/drawable/video_rec_stop_to_start.xml
 create mode 100644 app/src/main/res/values/integers.xml

diff --git a/app/src/main/res/drawable/ic_shutter.xml b/app/src/main/res/drawable/ic_shutter.xml
index e819768a..7c8a609d 100644
--- a/app/src/main/res/drawable/ic_shutter.xml
+++ b/app/src/main/res/drawable/ic_shutter.xml
@@ -7,12 +7,13 @@
         android:fillColor="#ffffff"
         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" />
-    <path
+
+    <group
         android:name="inner"
-        android:fillColor="#ffffff"
-        android:fillType="evenOdd"
-        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="#ffffff"
-        android:pathData="M105,255.5a150.5,147.5 0,1 0,301 0a150.5,147.5 0,1 0,-301 0z" />
+        android:pivotX="256"
+        android:pivotY="256">
+        <path
+            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" />
+    </group>
 </vector>
diff --git a/app/src/main/res/drawable/ic_video_rec.xml b/app/src/main/res/drawable/ic_video_rec.xml
index d7945cad..63c9f4c7 100644
--- a/app/src/main/res/drawable/ic_video_rec.xml
+++ b/app/src/main/res/drawable/ic_video_rec.xml
@@ -8,19 +8,23 @@
         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" />
 
-    <path
+    <group
         android:name="inner_big"
-        android:fillColor="@color/md_red"
-        android:fillType="evenOdd"
-        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" />
+        android:pivotX="256"
+        android:pivotY="256">
+        <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: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" />
+        android:pivotX="256"
+        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>
diff --git a/app/src/main/res/drawable/ic_video_rec_animated.xml b/app/src/main/res/drawable/ic_video_rec_animated.xml
index 2a2dc593..52574767 100644
--- a/app/src/main/res/drawable/ic_video_rec_animated.xml
+++ b/app/src/main/res/drawable/ic_video_rec_animated.xml
@@ -19,12 +19,12 @@
         android:drawable="@drawable/ic_video_rec" />
 
     <transition
-        android:drawable="@drawable/video_rec_start_to_stop"
+        android:drawable="@drawable/video_rec_record_to_idle"
         android:fromId="@id/selected"
         android:toId="@id/default_state" />
 
     <transition
-        android:drawable="@drawable/video_rec_stop_to_start"
+        android:drawable="@drawable/video_rec_idle_to_record"
         android:fromId="@id/default_state"
         android:toId="@id/selected" />
 
diff --git a/app/src/main/res/drawable/shutter_pressed_to_unpressed.xml b/app/src/main/res/drawable/shutter_pressed_to_unpressed.xml
index b3ed87e3..20b365b3 100644
--- a/app/src/main/res/drawable/shutter_pressed_to_unpressed.xml
+++ b/app/src/main/res/drawable/shutter_pressed_to_unpressed.xml
@@ -5,13 +5,22 @@
 
     <target android:name="inner">
         <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="@android:color/white"
-                android:valueType="colorType" />
+            <set>
+                <objectAnimator
+                    android:duration="@integer/shutter_anim_duration"
+                    android:interpolator="@android:anim/accelerate_interpolator"
+                    android:propertyName="scaleX"
+                    android:valueFrom="0.9"
+                    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>
     </target>
 </animated-vector>
diff --git a/app/src/main/res/drawable/shutter_unpressed_to_pressed.xml b/app/src/main/res/drawable/shutter_unpressed_to_pressed.xml
index 4f2692f0..de740180 100644
--- a/app/src/main/res/drawable/shutter_unpressed_to_pressed.xml
+++ b/app/src/main/res/drawable/shutter_unpressed_to_pressed.xml
@@ -5,13 +5,22 @@
 
     <target android:name="inner">
         <aapt:attr name="android:animation">
-            <objectAnimator
-                android:duration="3"
-                android:interpolator="@android:interpolator/decelerate_cubic"
-                android:propertyName="fillColor"
-                android:valueFrom="@android:color/white"
-                android:valueTo="@android:color/transparent"
-                android:valueType="colorType" />
+            <set>
+                <objectAnimator
+                    android:duration="@integer/shutter_anim_duration"
+                    android:interpolator="@android:anim/accelerate_interpolator"
+                    android:propertyName="scaleX"
+                    android:valueFrom="1"
+                    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>
     </target>
 </animated-vector>
diff --git a/app/src/main/res/drawable/video_rec_idle_to_record.xml b/app/src/main/res/drawable/video_rec_idle_to_record.xml
new file mode 100644
index 00000000..6a39c308
--- /dev/null
+++ b/app/src/main/res/drawable/video_rec_idle_to_record.xml
@@ -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>
diff --git a/app/src/main/res/drawable/video_rec_pressed_to_unpressed.xml b/app/src/main/res/drawable/video_rec_pressed_to_unpressed.xml
index 57c77ad9..4c894dba 100644
--- a/app/src/main/res/drawable/video_rec_pressed_to_unpressed.xml
+++ b/app/src/main/res/drawable/video_rec_pressed_to_unpressed.xml
@@ -5,13 +5,22 @@
 
     <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" />
+            <set>
+                <objectAnimator
+                    android:duration="800"
+                    android:interpolator="@android:anim/accelerate_interpolator"
+                    android:propertyName="scaleX"
+                    android:valueFrom="0.9"
+                    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>
     </target>
 </animated-vector>
diff --git a/app/src/main/res/drawable/video_rec_record_to_idle.xml b/app/src/main/res/drawable/video_rec_record_to_idle.xml
new file mode 100644
index 00000000..85b1d278
--- /dev/null
+++ b/app/src/main/res/drawable/video_rec_record_to_idle.xml
@@ -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>
diff --git a/app/src/main/res/drawable/video_rec_start_to_stop.xml b/app/src/main/res/drawable/video_rec_start_to_stop.xml
deleted file mode 100644
index bc3efbe4..00000000
--- a/app/src/main/res/drawable/video_rec_start_to_stop.xml
+++ /dev/null
@@ -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>
diff --git a/app/src/main/res/drawable/video_rec_stop_to_start.xml b/app/src/main/res/drawable/video_rec_stop_to_start.xml
deleted file mode 100644
index aa68124e..00000000
--- a/app/src/main/res/drawable/video_rec_stop_to_start.xml
+++ /dev/null
@@ -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>
diff --git a/app/src/main/res/drawable/video_rec_unpressed_to_pressed.xml b/app/src/main/res/drawable/video_rec_unpressed_to_pressed.xml
index 41d27b14..d197c67f 100644
--- a/app/src/main/res/drawable/video_rec_unpressed_to_pressed.xml
+++ b/app/src/main/res/drawable/video_rec_unpressed_to_pressed.xml
@@ -5,13 +5,22 @@
 
     <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="@color/md_red"
-                android:valueTo="@android:color/transparent"
-                android:valueType="colorType" />
+            <set>
+                <objectAnimator
+                    android:duration="@integer/shutter_anim_duration"
+                    android:interpolator="@android:anim/accelerate_interpolator"
+                    android:propertyName="scaleX"
+                    android:valueFrom="1"
+                    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>
     </target>
 </animated-vector>
diff --git a/app/src/main/res/values/integers.xml b/app/src/main/res/values/integers.xml
new file mode 100644
index 00000000..677410ef
--- /dev/null
+++ b/app/src/main/res/values/integers.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <integer name="shutter_anim_duration">500</integer>
+</resources>