web-dev-qa-db-ja.com

新しいデザインサポートライブラリのFloatingActionButtonをアニメーション化する方法

5つの異なるフラグメントを持つTabLayoutを使用しています。これらのフラグメントの3つでAndroid.support.design.widget.FloatingActionButtonが表示されます。現在、タブが変更されたときにFABの可視性を設定するだけですが、FABが出入りするアニメーションを作成したいと考えています。 Androidでこれを実現するにはどうすればよいですか？

androidandroid-animationfloating-action-buttonandroid-design-library
13
Michael

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);
}
1
Michael

縮小/ポップの非表示/表示アニメーションは、新しいバージョンのサポートライブラリによって自動的に処理されます。

fab.show（）;またはfab.hide（）;

28
Luci

設計サポートライブラリリビジョン22.2.1（2015年7月）では、FloatingActionButtonクラスにhide()およびshow()メソッドが追加されたため、今後これらを使用できます。

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

13
Huby

enter image description here

このようなものが欲しいの？ただし、onScrollListenerでアニメーション化する代わりに、onCreateViewまたはonCreateメソッドでアニメーション化できます。これに従います-> フローティングアクションボタンの実装–パート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);

'Animate to Hide'でそれをonCreateViewまたはonCreateメソッドに配置すると、このフラグメントを作成するときにFABが非表示になり、ハンドラーと実行可能オブジェクトを追加して 'Animateをトリガーします。 1〜2秒後に「表示」に戻ってアニメーションを表示します

または、短いアニメーションの時間を使用できます

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);
        }
    }
}
10
Emmanuel Francis Narvasa Ramos

最も簡単な方法は、FloatingActionButtonクラスを拡張して、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 のButtonクラスから取得されます。ソースにはサンプル実装があります。

1
Zielony