如何为新的Design Support Library的FloatingActionButton制作动画

Question

我正在使用带有5个不同片段的TabLayout.android.support.design.widget.FloatingActionButton应该出现其中3个片段.现在我只是在选项卡更改时设置FAB的可见性,但我希望有一个动画,FAB进出.我怎样才能在Android中实现这一目标？

Answer 1

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

fab.show(); 或fab.hide();

Answer 2

设计支持库修订版22.2.1(2015年7月)将类hide()和show()方法添加到FloatingActionButton类中,因此您可以从现在开始使用它们.

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

Answer 3

你想要这样的东西吗？但是,不是动画它,onScrollListener你可以动画onCreateView或onCreate方法.按照这个 - > 实现浮动操作按钮 - 第2部分

基本上,代码仅归结为此

动画隐藏

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

和

动画回到Show

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);

在'Animate to Hide'上将它放在onCreateViewor onCreate方法上,以便在创建此片段时隐藏在FAB上,然后您可以添加一个处理程序和runnable,在一两秒后触发'Animate返回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

因为我不想扩展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);
}