Как анимировать FloatingActionButton новой библиотеки поддержки дизайна

Я использую TabLayout с 5 различными фрагментами. На 3 из этих фрагментов должен появиться android.support.design.widget.FloatingActionButton. Прямо сейчас я просто устанавливаю видимость FAB при изменении вкладки, но я хотел бы иметь анимацию, когда FAB входит и выходит. Как я могу добиться этого в Android?


person Michael    schedule 31.05.2015    source источник
comment
Лучший способ — использовать пользовательский FloatingActionButton.Behavior.   -  person Gabriele Mariotti    schedule 02.06.2015


Ответы (5)


Анимация скрытия/отображения для сжатия/всплывания автоматически обрабатывается новой версией библиотеки поддержки. (22.2.1) Затем слушатель OnTabChange показывает или скрывает плавающую кнопку действия, используя методы отображения/скрытия, предоставляемые новой библиотекой.

потрясающее шоу(); или потрясающе.скрыть();

person Luci    schedule 16.08.2015

Версия библиотеки поддержки проектирования 22.2.1 (июль 2015 г.) добавила методы hide() и show() в класс FloatingActionButton, поэтому теперь вы можете их использовать.

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

person Huby    schedule 07.08.2015
comment
Однако они не предлагают готовую анимацию. - person ThanosFisherman; 18.09.2015
comment
@ThanosF FAB будет анимироваться при использовании show() или hide(), но только в том случае, если представление уже выложено. - person Jarett Millard; 11.02.2016

введите здесь описание изображения

Вы хотите что-то вроде этого? Но вместо того, чтобы анимировать его на 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();

но мы не хотим, чтобы он анимировался только для того, чтобы скрыть его, поэтому «Анимировать, чтобы скрыть» будет что-то вроде этого

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

В «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);
        }
    }
}
person ponnex    schedule 08.06.2015
comment
Могу ли я использовать это в своем (не некоммерческом) приложении? Должен ли я отдать должное? - person Hack5; 14.01.2017

Самый простой способ — расширить класс 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);
    }
}

Приведенный выше код взят из класса Button из моей библиотеки. Вы можете найти примеры реализации в источниках.

person Zielony    schedule 31.05.2015

Поскольку я не хотел расширять 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);
}
person Michael    schedule 01.06.2015
comment
Я заменил setAnimation() вызовы startAnimation() в вашем ответе - см. аналогичный вопрос здесь: FAB не анимирует – тестовый код и снимок экрана прилагаются - person Alexander Farber; 02.08.2015