Skip to content

Instantly share code, notes, and snippets.

@Logan676
Created January 8, 2016 08:28
Show Gist options
  • Save Logan676/0545405ff65887e6c605 to your computer and use it in GitHub Desktop.
Save Logan676/0545405ff65887e6c605 to your computer and use it in GitHub Desktop.
circular reveal animation
/**
* On Lollipop+ perform a circular reveal animation (an expanding circular mask) when showing
* the search panel.
*/
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void doEnterAnim() {
// Fade in a background scrim as this is a floating window. We could have used a
// translucent window background but this approach allows us to turn off window animation &
// overlap the fade with the reveal animation – making it feel snappier.
View scrim = findViewById(R.id.scrim);
scrim.animate()
.alpha(1f)
.setDuration(500L)
.setInterpolator(
AnimationUtils.loadInterpolator(this, android.R.interpolator.fast_out_slow_in))
.start();
// Next perform the circular reveal on the search panel
final View searchPanel = findViewById(R.id.search_panel);
if (searchPanel != null) {
// We use a view tree observer to set this up once the view is measured & laid out
searchPanel.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
searchPanel.getViewTreeObserver().removeOnPreDrawListener(this);
// As the height will change once the initial suggestions are delivered by the
// loader, we can't use the search panels height to calculate the final radius
// so we fall back to it's parent to be safe
int revealRadius = ((ViewGroup) searchPanel.getParent()).getHeight();
// Center the animation on the top right of the panel i.e. near to the
// search button which launched this screen.
Animator show = ViewAnimationUtils.createCircularReveal(searchPanel,
searchPanel.getRight(), searchPanel.getTop(), 0f, revealRadius);
show.setDuration(250L);
show.setInterpolator(AnimationUtils.loadInterpolator(SearchActivity.this,
android.R.interpolator.fast_out_slow_in));
show.start();
return false;
}
});
}
}
/**
* On Lollipop+ perform a circular animation (a contracting circular mask) when hiding the
* search panel.
*/
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void doExitAnim() {
final View searchPanel = findViewById(R.id.search_panel);
// Center the animation on the top right of the panel i.e. near to the search button which
// launched this screen. The starting radius therefore is the diagonal distance from the top
// right to the bottom left
int revealRadius = (int) Math.sqrt(Math.pow(searchPanel.getWidth(), 2)
+ Math.pow(searchPanel.getHeight(), 2));
// Animating the radius to 0 produces the contracting effect
Animator shrink = ViewAnimationUtils.createCircularReveal(searchPanel,
searchPanel.getRight(), searchPanel.getTop(), revealRadius, 0f);
shrink.setDuration(200L);
shrink.setInterpolator(AnimationUtils.loadInterpolator(SearchActivity.this,
android.R.interpolator.fast_out_slow_in));
shrink.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
searchPanel.setVisibility(View.INVISIBLE);
ActivityCompat.finishAfterTransition(SearchActivity.this);
}
});
shrink.start();
// We also animate out the translucent background at the same time.
findViewById(R.id.scrim).animate()
.alpha(0f)
.setDuration(200L)
.setInterpolator(
AnimationUtils.loadInterpolator(SearchActivity.this,
android.R.interpolator.fast_out_slow_in))
.start();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment