Created
December 23, 2016 12:06
-
-
Save talhahasanzia/c33e18a62378f2f5b74e860c54523fe6 to your computer and use it in GitHub Desktop.
Circular Reveal Animation from https://guides.codepath.com/android/Circular-Reveal-Animation
This file contains hidden or 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
//to reveal a previously invisible view using this effect: | |
void enterReveal() { | |
// previously invisible view | |
final View myView = findViewById(R.id.my_view); | |
// get the center for the clipping circle | |
int cx = myView.getMeasuredWidth() / 2; | |
int cy = myView.getMeasuredHeight() / 2; | |
// get the final radius for the clipping circle | |
int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2; | |
// create the animator for this view (the start radius is zero) | |
Animator anim = | |
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); | |
// make the view visible and start the animation | |
myView.setVisibility(View.VISIBLE); | |
anim.start(); | |
} | |
//To hide a previously visible view using this effect: | |
void exitReveal() { | |
// previously visible view | |
final View myView = findViewById(R.id.my_view); | |
// get the center for the clipping circle | |
int cx = myView.getMeasuredWidth() / 2; | |
int cy = myView.getMeasuredHeight() / 2; | |
// get the initial radius for the clipping circle | |
int initialRadius = myView.getWidth() / 2; | |
// create the animation (the final radius is zero) | |
Animator anim = | |
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); | |
// make the view invisible when the animation is done | |
anim.addListener(new AnimatorListenerAdapter() { | |
@Override | |
public void onAnimationEnd(Animator animation) { | |
super.onAnimationEnd(animation); | |
myView.setVisibility(View.INVISIBLE); | |
} | |
}); | |
// start the animation | |
anim.start(); | |
} | |
//View Transition | |
//You want to call enterReveal() after the enter transition of the activity has been completed. | |
private Transition.TransitionListener mEnterTransitionListener; | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
... | |
mEnterTransitionListener = new Transition.TransitionListener() { | |
@Override | |
public void onTransitionStart(Transition transition) { | |
} | |
@Override | |
public void onTransitionEnd(Transition transition) { | |
enterReveal(); | |
} | |
@Override | |
public void onTransitionCancel(Transition transition) { | |
} | |
@Override | |
public void onTransitionPause(Transition transition) { | |
} | |
@Override | |
public void onTransitionResume(Transition transition) { | |
} | |
}; | |
getWindow().getEnterTransition().addListener(mEnterTransitionListener); | |
} | |
//Update enterReveal() method to remove this listener from the set listening to this animation. This is done to disable reveal animation when the activity ends. | |
private void enterReveal() { | |
// previously invisible view | |
final View myView = findViewById(R.id.my_view); | |
// get the center for the clipping circle | |
int cx = myView.getMeasuredWidth() / 2; | |
int cy = myView.getMeasuredHeight() / 2; | |
// get the final radius for the clipping circle | |
int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2; | |
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); | |
myView.setVisibility(View.VISIBLE); | |
anim.addListener(new Animator.AnimatorListener() { | |
@Override | |
public void onAnimationStart(Animator animation) { | |
} | |
@Override | |
public void onAnimationEnd(Animator animation) { | |
getWindow().getEnterTransition().removeListener(mEnterTransitionListener); | |
} | |
@Override | |
public void onAnimationCancel(Animator animation) { | |
} | |
@Override | |
public void onAnimationRepeat(Animator animation) { | |
} | |
}); | |
anim.start(); | |
} | |
While exiting the activity after the reveal transition, you want to finish the activity after completing the exit reveal animation. | |
anim.addListener(new AnimatorListenerAdapter() { | |
@Override | |
public void onAnimationEnd(Animator animation) { | |
super.onAnimationEnd(animation); | |
myView.setVisibility(View.INVISIBLE); | |
// Finish the activity after the exit transition completes. | |
supportFinishAfterTransition(); | |
} | |
}); | |
//To enable exit reveal transition on press of ActionBar up button or back button, call exitReveal() from onOptionsItemSelected() and onBackPressed() respectively. | |
@Override | |
public boolean onOptionsItemSelected(MenuItem item) { | |
switch (item.getItemId()) { | |
// Respond to the action bar's Up/Home button | |
case android.R.id.home: | |
exitReveal(); | |
return true; | |
} | |
return super.onOptionsItemSelected(item); | |
} | |
@Override | |
public void onBackPressed() { | |
exitReveal(); | |
} | |
//The reveal effect can be made to look more natural if it starts where the user tapped. To do this, you could get the x & y co-ordinates from the MotionEvent and use that to start the reveal effect. | |
@Override | |
public boolean onTouch(View view, MotionEvent motionEvent) { | |
if (motionEvent.getAction() == MotionEvent.ACTION_UP) { | |
// get the final radius for the clipping circle | |
int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2; | |
// create the animator for this view (the start radius is zero) | |
Animator anim = | |
ViewAnimationUtils.createCircularReveal(myView, (int) motionEvent.getX(), (int) motionEvent.getY(), 0, finalRadius); | |
// make the view visible and start the animation | |
myView.setVisibility(View.VISIBLE); | |
anim.start(); | |
} | |
return false; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment