Polish The Circular Reveal Transition | raywenderlich.com


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/18770099-android-animations/lessons/15

Hello,

I’m confused how the transparent/translucent background works for the createCircularReveal.

Using 15-polish-the-circular-reveal-transition/final as reference, if I comment out circularReveal.start() in SettingsActivity.kt:64, the settings screen is never transparent/translucent and displays at full opacity.

In your video you briefly mention the window is shown as transparent/translucent unless the root ____ (didn’t catch the word) has a background color. I believe this is the nuance that I am not understanding.

Can you please explain in more detail how the transparency works during this animation?

Thanks!

Hey @lucasvickers !

Sorry for the late reply. In terms of this circular reveal animation, basically the way the Circular reveal works is that you reveal content which is already shown/visible on the screen, but you apply a special transformation where it seems like it’s appearing from a circle.

So basically here we made the window transparent/translucent, the root (content/view) visible and then by making the content appear from a spot, the background is completely transparent and the content appears slowly.

If we didn’t make the window transparent, it would have a background color and the animation would look as if the BG is black/gray/colored and then the content would appear.

So this is a two-fold animation - first we make the screen window/BG transparent so it can show “above” other UI and then we animate the way the actual screen content appears in the UI.