如何为新设计支持库的 FloatingActionButton 制作动画

Question

我正在使用包含 5 个不同片段的 TabLayout。在这些片段中的 3 个上应该出现 android.support.design.widget.FloatingActionButton。现在我只是在选项卡更改时设置 FAB 的可见性，但我想要一个 FAB 进出的动画。我怎样才能在 Android 中做到这一点？

Answer 1

最简单的方法是扩展 FloatingActionButton class 并覆盖 setVisibility。像这样：

public void setVisibility(final int visibility) {
    if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) {
        animator = // create your animator here
        super.setVisibility(visibility);
    } else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) {
        AnimatorListenerAdapter listener = new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
                Button.super.setVisibility(visibility);
            }
        });
        animator = // create your animator here
        animator.addListener(listener);
    }
}

以上代码取自 my library 的按钮 class。您可以在资源中找到示例实现。

Answer 2

因为我不想扩展 FloatingActionButton，所以我这样做了：

FloatingActionButton createButton;

// ...

Animation makeInAnimation = AnimationUtils.makeInAnimation(getBaseContext(), false);
makeInAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) { }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) {
        createButton.setVisibility(View.VISIBLE);
    }
});

Animation makeOutAnimation = AnimationUtils.makeOutAnimation(getBaseContext(), true);
makeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        createButton.setVisibility(View.INVISIBLE);
    }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationStart(Animation animation) { }
});

// ...

if (createButton.isShown()) {
    createButton.startAnimation(makeOutAnimation);
}

// ...

if (!createButton.isShown()) {
    createButton.startAnimation(makeInAnimation);
}

Answer 3

你想要这样的东西吗？但不是在 onScrollListener 上设置动画，而是在 onCreateView 或 onCreate 方法上设置动画。按照这个 --> Implement Floating Action Button – Part 2

基本上代码只总结到这个

动画隐藏

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start();

和

动画返回显示

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

但我们不希望它只是为了隐藏它而设置动画，所以，'Animate to Hide' 会像这样

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

On 'Animate to Hide' 把它放在 onCreateView 或 onCreate 方法上，这样当你创建这个片段时你的 FAB 是隐藏的，然后你可以添加一个处理程序和可运行的一两秒后触发 'Animate back to Show' 以显示您的动画

或者您可以使用时间制作短动画

int mShortAnimationDuration = getResources().getInteger(
            android.R.integer.config_shortAnimTime);

我在 onScroll 上试过这个，但没有在 onCreateView 或 onCreate 上试过，但我想它应该可以工作

--编辑--

试试这个代码 ;)

public class DummyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        int mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);

        FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
        floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
                floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();

            }, mShortAnimationDuration);
        }
    }
}

Answer 4

设计支持库修订版 22.2.1（2015 年 7 月）向 FloatingActionButton class 添加了 hide() 和 show() 方法，因此您可以使用这些现在开始。

http://developer.android.com/tools/support-library/index.html

Answer 5

shrink/pop 的 hide/show 动画由新版本的支持库自动处理。(22.2.1) 然后 OnTabChange 侦听器使用新库提供的 show/hide 方法显示或隐藏浮动操作按钮。

fab.show(); 要么 fab.hide();

如何为新设计支持库的 FloatingActionButton 制作动画

How to animate FloatingActionButton of new Design Support Library

android

android-animation

floating-action-button

android-design-library