Анимация FloatingActionButton

#java #android #xml #анимация

Подскажите как сделать анимацию как в этом примере:

Смысл:
После нажатия на FloatingActionButton, она расширяется на весь view, заполняя его
цветом самой FloatingActionButton.

Возможно есть готовые примеры?
    

Ответы

Ответ 1

Данная анимация называется  CircularReveal. Я скину Вам свой пример, а там уж подгоните
под себя по размерам. 

Сначала в build.gradle прописываем  compile 'com.github.ozodrukh:CircularReveal:1.1.1'

Вот 4 основных метода 

 private void animateFab() {

        fabButton.animate().translationXBy(0.5f).translationY(-60).translationXBy(-0.9f)
                .translationX(-220).setDuration(150).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                animateReavel((int) fabButton.getX(), 50);
            }
        });

    }

    private void animateFabBack() {
        fabView.setVisibility(View.INVISIBLE);
        fabButton.setVisibility(View.VISIBLE);
        fabButton.animate().translationXBy(0.5f).translationY(0).translationXBy(-0.9f)
                .translationX(0).setDuration(150).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                isFabOpen = false;
            }
        });
    }

    private void animateReavel(int cx, int cy) {
        float finalRadius = hypo(fabView.getWidth(), fabView.getHeight());

        SupportAnimator animator =
                ViewAnimationUtils.createCircularReveal(fabView, cx, cy, 0, finalRadius);
        animator.addListener(new SupportAnimator.AnimatorListener() {
            @Override
            public void onAnimationStart() {
                fabButton.setVisibility(View.INVISIBLE);
                fabView.setVisibility(View.VISIBLE);
                isFabOpen = true;
            }

            @Override
            public void onAnimationEnd() {
            }

            @Override
            public void onAnimationCancel() {
            }

            @Override
            public void onAnimationRepeat() {
            }
        });

        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(400);
        animator.start();

    }

    private void animateReavelBack() {
        float finalRadius = hypo(fabView.getWidth(), fabView.getHeight());

        SupportAnimator animator =
                ViewAnimationUtils.createCircularReveal(fabView, (int) fabButton.getX(),
-50, finalRadius, fabButton.getWidth());
        animator.addListener(new SupportAnimator.AnimatorListener() {
            @Override
            public void onAnimationStart() {
            }

            @Override
            public void onAnimationEnd() {
                fabView.setVisibility(View.INVISIBLE);
                animateFabBack();
            }

            @Override
            public void onAnimationCancel() {
            }

            @Override
            public void onAnimationRepeat() {
            }
        });

        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(200);
        animator.start();

    }


Примечания:

animateFab() - метод анимации кнопки, которая под конец вызывает анимацию новой вьюшки.


fabButton - собственно, сама кнопка.
fabView - та самая вьюшка в которую "размывается" fabButton. тут сами ее настроите.

animateRevealBack() - в примере нигде не вызывается. Тут уж прикрутите куда надо.
Собсна вся анимация наоборот.