Animate swapping of play/pause buttons.

main
Nicholas 2022-12-21 17:23:36 -05:00 zatwierdzone przez Greyson Parrelli
rodzic dd3bad858d
commit d471647e12
5 zmienionych plików z 112 dodań i 14 usunięć

Wyświetl plik

@ -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
}
}

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<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" />
<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"

Wyświetl plik

@ -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>