Анимация FloatingActionButton

Подскажите как сделать анимацию как в этом примере
Смысл: После нажатия на FloatingActionButton, она расширяется на весь view, заполняя его цветом самой FloatingActionButton
Возможно есть готовые примеры?

Ответ

Данная анимация называется 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() - в примере нигде не вызывается. Тут уж прикрутите куда надо. Собсна вся анимация наоборот.