Animate swapping of play/pause buttons.

signalapp · Dec 30, 2022 · d471647 · d471647
1 parent dd3bad8
commit d471647
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 15 deletions.
diff --git a/app/src/main/java/org/thoughtcrime/securesms/mediapreview/MediaPreviewPlayerControlView.kt b/app/src/main/java/org/thoughtcrime/securesms/mediapreview/MediaPreviewPlayerControlView.kt
@@ -4,11 +4,14 @@ import android.animation.Animator
 import android.animation.Animator.AnimatorListener
 import android.annotation.SuppressLint
 import android.content.Context
+import android.os.Build
 import android.util.AttributeSet
 import android.view.MotionEvent
+import android.view.animation.PathInterpolator
 import android.widget.ImageButton
 import android.widget.LinearLayout
 import android.widget.TextView
+import androidx.appcompat.widget.AppCompatImageButton
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.airbnb.lottie.LottieAnimationView
@@ -122,3 +125,66 @@ class LottieAnimatedButton @JvmOverloads constructor(
     playAnimation()
   }
 }
+
+class AnimatedInOutImageButton @JvmOverloads constructor(
+  context: Context,
+  attrs: AttributeSet? = null
+) : AppCompatImageButton(context, attrs) {
+  private val rotationWhenVisible: Float
+  private val rotationWhenHidden: Float
+
+  init {
+    val styledAttrs = getContext().obtainStyledAttributes(attrs, R.styleable.AnimatedInOutImageButton)
+    rotationWhenVisible = styledAttrs.getFloat(R.styleable.AnimatedInOutImageButton_rotationWhenVisible, 0f)
+    rotationWhenHidden = styledAttrs.getFloat(R.styleable.AnimatedInOutImageButton_rotationWhenHidden, 0f)
+    styledAttrs.recycle()
+  }
+
+  override fun setVisibility(visibility: Int) {
+    if (visibility == VISIBLE) {
+      super.setVisibility(visibility)
+      animateIn()
+    } else {
+      animateOut { super.setVisibility(visibility) }
+    }
+  }
+
+  private fun animateIn() {
+    this.rotation = rotationWhenHidden
+    this.scaleX = 0.5f
+    this.scaleY = 0.5f
+    this.alpha = 0f
+
+    val animator = this.animate()
+      .setDuration(animationDurationMs)
+      .alpha(1f)
+      .rotation(rotationWhenVisible)
+      .scaleX(1f)
+      .scaleY(1f)
+
+    if (Build.VERSION.SDK_INT >= 21) {
+      animator.interpolator = PathInterpolator(0.4f, 0.0f, 0.2f, 1f)
+    }
+
+    animator.start()
+  }
+
+  private fun animateOut(endAction: Runnable) {
+    val animator = this.animate()
+      .setDuration(animationDurationMs)
+      .alpha(0f)
+      .rotation(rotationWhenHidden)
+      .scaleX(0.5f)
+      .scaleY(0.5f)
+      .withEndAction(endAction)
+
+    if (Build.VERSION.SDK_INT >= 21) {
+      animator.interpolator = PathInterpolator(0.4f, 0.0f, 0.2f, 1f)
+    }
+    animator.start()
+  }
+
+  companion object {
+    const val animationDurationMs: Long = 150
+  }
+}
diff --git a/app/src/main/res/drawable/pause_solid_24.xml b/app/src/main/res/drawable/pause_solid_24.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M9.5,2H4.5C4.224,2 4,2.224 4,2.5V21.5C4,21.776 4.224,22 4.5,22H9.5C9.776,22 10,21.776 10,21.5V2.5C10,2.224 9.776,2 9.5,2Z"
+      android:fillColor="@color/signal_light_colorOnPrimary"/>
+  <path
+      android:pathData="M19.5,2H14.5C14.224,2 14,2.224 14,2.5V21.5C14,21.776 14.224,22 14.5,22H19.5C19.776,22 20,21.776 20,21.5V2.5C20,2.224 19.776,2 19.5,2Z"
+      android:fillColor="@color/signal_light_colorOnPrimary"/>
+</vector>
diff --git a/app/src/main/res/drawable/play_button_solid_24.xml b/app/src/main/res/drawable/play_button_solid_24.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M21.7,11.248C21.853,11.305 21.985,11.407 22.078,11.541C22.172,11.675 22.222,11.835 22.222,11.998C22.222,12.161 22.172,12.321 22.078,12.455C21.985,12.589 21.853,12.691 21.7,12.748L5.3,22.248C4.586,22.662 4,22.325 4,21.5V2.5C4,1.675 4.584,1.338 5.3,1.752L21.7,11.248Z"
+      android:fillColor="@color/signal_light_colorOnPrimary"/>
+</vector>
diff --git a/app/src/main/res/layout/exo_player_control_view.xml b/app/src/main/res/layout/exo_player_control_view.xml
@@ -14,11 +14,11 @@
         android:id="@+id/exo_duration_viewgroup"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:visibility="gone"
         android:layout_marginStart="@dimen/media_preview_video_timestamp_inset"
         android:layout_marginEnd="@dimen/media_preview_video_timestamp_inset"
         android:gravity="center_vertical"
-        android:orientation="horizontal">
+        android:orientation="horizontal"
+        android:visibility="gone">
 
         <TextView
             android:id="@id/exo_position"
@@ -121,19 +121,26 @@
                 android:layout_marginStart="@dimen/media_preview_button_horizontal_margin"
                 android:layout_marginEnd="@dimen/media_preview_button_horizontal_margin" />
 
-            <ImageButton
-                android:id="@id/exo_play"
-                style="@style/MediaPreviewButton"
-                android:background="@drawable/circle_touch_highlight_background_material3"
-                android:backgroundTint="@color/signal_colorOnSurface"
-                android:src="@drawable/exo_controls_play" />
-
-            <ImageButton
-                android:id="@id/exo_pause"
-                style="@style/MediaPreviewButton"
-                android:background="@drawable/circle_touch_highlight_background_material3"
-                android:backgroundTint="@color/signal_colorOnSurface"
-                android:src="@drawable/exo_controls_pause" />
+            <FrameLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content">
+
+                <org.thoughtcrime.securesms.mediapreview.AnimatedInOutImageButton
+                    android:id="@id/exo_play"
+                    style="@style/MediaPreviewButton"
+                    android:background="@drawable/circle_touch_highlight_background_material3"
+                    android:backgroundTint="@color/signal_colorOnSurface"
+                    app:srcCompat="@drawable/play_button_solid_24"
+                    app:rotationWhenHidden="90" />
+
+                <org.thoughtcrime.securesms.mediapreview.AnimatedInOutImageButton
+                    android:id="@id/exo_pause"
+                    style="@style/MediaPreviewButton"
+                    android:background="@drawable/circle_touch_highlight_background_material3"
+                    android:backgroundTint="@color/signal_colorOnSurface"
+                    app:srcCompat="@drawable/pause_solid_24"
+                    app:rotationWhenHidden="-90" />
+            </FrameLayout>
 
             <org.thoughtcrime.securesms.mediapreview.LottieAnimatedButton
                 android:id="@id/exo_ffwd"

diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
@@ -365,4 +365,8 @@
     <declare-styleable name="CircularProgressMaterialButton">
         <attr name="circularProgressMaterialButton__label" format="string" />
     </declare-styleable>
+    <declare-styleable name="AnimatedInOutImageButton">
+        <attr name="rotationWhenVisible" format="float" />
+        <attr name="rotationWhenHidden" format="float" />
+    </declare-styleable>
 </resources>