Android BottomSheet弹跳动画

Question

我想在执行 STATE_EXPANDED 或 STATE_COLLAPSED 时弹出效果，如上图所示，

我想要应用 BounceInterpolator 的动画。

下面的代码是我做的一个例子。

Activity_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.button.MaterialButton
    android:id="@+id/main_button"
    android:layout_width="200dp"
    android:layout_height="60dp"
    android:layout_gravity="center_horizontal"
    android:text="click me !!"/>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/main_bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@color/design_default_color_primary"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
    app:behavior_hideable="false"
    app:behavior_peekHeight="50dp">

    <TextView
        android:id="@+id/main_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="10dp"
        android:text="BottomSheetTitle!!"
        android:textColor="@color/white"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.kt

class MainActivity : AppCompatActivity() {

val mainButton: MaterialButton by lazy { findViewById(R.id.main_button) }
val bottomSheet: ConstraintLayout by lazy { findViewById(R.id.main_bottom_sheet) }
val bottomSheetBehavior: BottomSheetBehavior<ConstraintLayout> by lazy { BottomSheetBehavior.from(bottomSheet) }

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    mainButton.setOnClickListener {
        when (bottomSheetBehavior.state) {
            (BottomSheetBehavior.STATE_COLLAPSED) -> {
                bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
            }
            (BottomSheetBehavior.STATE_EXPANDED) -> {
                bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
            }
        }
    }
}
}

没有跳出。

有没有应用弹跳动画的解决方案？

1--------------------------------1

我使用下面的代码解决了

我认为这个解决方案不好

答案如果您有更好的解决方案，请随时

bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            if (newState == BottomSheetBehavior.STATE_SETTLING) {
                bottomSheet.animate()
                    .translationY(0f)
            }
            if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                bottomSheet.animate()
                    .setDuration(200)
                    .translationY(20f)
            }
            if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                bottomSheet.animate()
                    .setDuration(200)
                    .translationY(-20f)
            }
        }

        override fun onSlide(bottomSheet: View, slideOffset: Float) {
        }
    })

Answer 1

该动画称为overshoot。这是我使用 setWindowsAnimation(res int style) 的尝试：

mainBottomSheet.getWindow().setWindowAnimations(R.style.SlideAnimation);

并在 styles.xml 中添加您最喜欢的动画，如下所示：

<style name="SlideAnimation" parent="Animation.AppCompat.Dialog">
      <item name="android:windowEnterAnimation">@anim/slide_in</item>
      <item name="android:windowExitAnimation">@anim/slide_out</item>
</style>

在 res/anime< 中添加以下文件/code> 目录：

<!-- slide_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:duration="700"
     android:interpolator="@anim/interpolator_slight_overshoot">

    <translate
        android:fromYDelta="-100%"
        android:toYDelta="0%"/>

</set>

其重要部分是插值器，它可以根据需要制作动画：

<!-- interpolator_slight_overshoot.xml -->
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
                       android:tension="1.0"/>

免责声明： 动画来源：警报库