Android uses circular reveal animation to make page Jump more cool

Android 5.0 introduces many cool animation effects, and circular reveal is one of them. It's easy to use, but the effect is unexpected and cool, making your app more compelling.

1、 Effect

Needless to say, the following GIF diagram uses circular reveal animation to realize the effect of jumping to the search page. The aspect ratio of GIF image compression is distorted, but the effect is still there. The source code is at the bottom. You can download the experience.

2、 Circular reveal introduction

When you show or hide a set of UI elements, exposing animation can provide visual continuity for users.

The viewanimationutils. Createcirclarreveal() method lets you add animation to the crop region to expose or hide the view.

The effect of the viewanimationutils. Createcirclarreveal() method is to crop a view into a circle, and then gradually expose the view from the center of the circle.

3、 Realize

As can be seen from the above figure, the view to be exposed is the root layout of the whole view. The starting position is 🔍 The X, y coordinates of the icon. The starting radius is 0 and the ending radius is the length of the upper bevel. Knowing these parameters, the implementation is simple.

The following code is implemented by kotlin, but it is not different from Java and does not affect understanding the principle.

1. Animation parameters

The comments in the above code clearly analyze the acquisition and execution process of animation parameters.

2. Animation call

The actionothervisible () method determines whether to display or hide the animation according to the passed in true / false.

3. Animation call timing

In searchfragment, listen to the drawing of the first frame and start the animation. Where mrootview is the root layout view.

Call timing at the end of animation: ① click search and jump to the search results interface. ② Physical fallback key. ③ Click the back button

In the above three places, you can call the hide () method to realize the hidden animation.

4. Listen for callback

In the process of configuring animation parameters above, a listening callback is performed for the end of animation. The onhideanimationend() and onshowanimationend() methods of animlistener interface are called to implement the callback. All users implement this interface in searchfragment to listen for callbacks.

When listening to the end of the hidden animation, call the disass () method to close the dialogfragment. Open the input method box at the end of the monitor display animation.

It's so simple. You can achieve such a cool effect in the above ways.

GitHub address: search page circular reveal animation

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.