Created
January 8, 2016 08:28
-
-
Save Logan676/0545405ff65887e6c605 to your computer and use it in GitHub Desktop.
circular reveal animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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