java - 如何像收件箱应用程序一样隐藏/显示同一 FloatingActionButton 上的不同操作

Question

是否有任何方法可以使支持库中的 FloatingActionButton 中的图标具有动画效果？我想像在收件箱应用程序中一样对其进行动画处理，当您单击它时，它会从 plus 转换为 pencil。

Answer 1

最好的方法可能是使用 AnimatedVectorDrawable 但这在 5.0 之前不向后兼容。我通常只是将两个 FloatingActionButton 放在彼此的顶部，然后在旋转两个时淡出顶部的按钮。

例如，您可以像这样将两个 FloatingActionButton 放入 FrameLayout 中:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end|right">

    <android.support.design.widget.FloatingActionButton
        android:id="@id/fab_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_edit"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_add"/>

</FrameLayout>

FrameLayout 中底部的 FloatingActionButton 将位于另一个之上。然后您可以旋转并淡出底部的，同时旋转顶部的以创建类似于 Google 应用程序中将显示顶部的动画的动画。例如，您可以像这样实现动画:

// This animation rotates and hides the top Button
final Animator hideTopFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabAdd,
        PropertyValuesHolder.ofFloat(View.ALPHA, 1.0f, 0.0f),
        PropertyValuesHolder.ofFloat(View.ROTATION, 0.0f, 360.0f)
);

// This animation just rotates the bottom Button while it is being revealed
final Animator revealBottomFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabEdit,
        PropertyValuesHolder.ofFloat(View.ROTATION, 0.0f, 360.0f)
);

// This AnimatorSet combines both animations and also has a listener 
// attached to set the visibility of the top Button to View.GONE when
// the animation is done so the user can actually click through to the 
// lower Button
final AnimatorSet revealAnimation = new AnimatorSet();
revealAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
revealAnimation.playTogether(
        hideTopFabAnimation,
        revealBottomFabAnimation
);
revealAnimation.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        fabAdd.setVisibility(View.GONE);
    }
});
revealAnimation.start();

要回到原来的状态，你只需要做相反的事情:

// Set the visibility of the top Button back to VISIBLE
fabAdd.setVisibility(View.VISIBLE);

// This animation fades the top Button back in and rotates it back
final Animator showTopFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabAdd,
        PropertyValuesHolder.ofFloat(View.ALPHA, 0.0f, 1.0f),
        PropertyValuesHolder.ofFloat(View.ROTATION, 360.0f, 0.0f)
);

// This animation just rotates the bottom Button while the top Button 
// fades back in
final Animator hideBottomFabAnimation = ObjectAnimator.ofPropertyValuesHolder(fabEdit,
        PropertyValuesHolder.ofFloat(View.ROTATION, 360.0f, 0.0f)
);

// Again we have an AnimatorSet which plays both animations together
final AnimatorSet hideAnimation = new AnimatorSet();
revealAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
revealAnimation.playTogether(
        showTopFabAnimation,
        hideBottomFabAnimation
);
revealAnimation.start();