Simulated wechat picture viewer entry and exit animation

When looking at the wechat circle of friends, when we click on the picture, the picture will gradually enlarge from the position of the clicked picture and move to the middle. When you exit the picture viewer, the picture will gradually become smaller and move to the original position. For users, this is a very good experience effect.

So I manually rolled up an animation of entering and exiting. See the figure below for details

Next, the implementation principle is introduced.

First analyze the above Animation:

Through the above analysis, we already know the rough technical scheme, and the next step is to solve some detailed problems.

First, the location information of the picture. Only in this way can we gradually enlarge the picture from the original position. Let's start to get the coordinate parameters of the picture:

Transfer the location information of the picture to the new activity:

Note that you need to remove the default animation of the original activity. Avoid affecting the animation effect of the picture.

Before animation, you need to do some preparatory work, such as calculating the screen width and height, magnification factor, movement factor, etc.

You can refer to the above code for details. Remember to consider the impact of the status bar on the animation. After the calculation, we have to set the existing picture to the original size:

When everything is ready, we have to move the picture from the original position to the middle. Here are the details of animation implementation:

Here, we control the update animation progress through valueanimator. Here, the entry animation of the picture is completed.

For exit animation, the principle is the same:

Here, the main principles of animation have been analyzed.

Source code: https://github.com/huanshen/PictureViewer

At present, this is relatively simple. When the project is implemented, there is still a lot of code and more consideration.

For example, you have to pass the URL of the picture. The picture in the picture viewer can be zoomed in, zoomed out, dragged, etc.