Activity switching animation (the Xiaomi Image Library list is displayed on the details page, and the image is zoomed in from a fixed position, zoomed out ),

Go directly

OK. Let's analyze how to implement it.

Analysis Principle

First, make sure that there are two different activities. jump from the image list page to the image details page. First, you can see the animation when you enter the details page, from the position of the item in the list to the display position on the details page, I can tell you that when we click this item, the details page has been started, then, make the corresponding animation effect on the details page. Since it is an animation effect on the details page, you need to pass the corresponding value on the list page, the position of the List page item on the screen, the size of the item, and of course the image resources, then, compute the animation execution parameters on the details page. After analyzing the animation entry, the animation exiting the Activity can be implemented. This is the opposite of entering the animation, but it is also necessary to determine when to exit the animation. Here, the animation exit is also implemented on the details page, when you press the return button, start to exit the animation. After the animation is executed, the Activity on the details page is ended. You will ask, can you put the animation on the list page for execution? When you think about it, you will know that it is impossible to enter the animation, because the details page is not started and some parameters cannot be known, such as how large the page is to be enlarged, if you want to zoom in, you can exit the animation, but it is troublesome. You need to return the parameters on the details page to the List page. If you are interested, try again.

Effect implementation

1. Retrieve parameters on the input details page

@Override            public void onItemClick(View view) {                int location[] = new int[2] ;                view.getLocationOnScreen(location);                int resId = (int) view.getTag();                Bundle bundle = new Bundle() ;                bundle.putInt("locationX",location[0]);                bundle.putInt("locationY",location[1]);                bundle.putInt("width",view.getWidth());                bundle.putInt("height",view.getHeight());                bundle.putInt("resId",resId);                Intent intent = new Intent() ;                intent.putExtras(bundle);                intent.setClass(getActivity(),PicDetailActivity.class) ;                getActivity().startActivity(intent);                getActivity().overridePendingTransition(0, 0);                Log.v("zgy","========view========"+view.getWidth()) ;            }

The coordinates of items on the screen can be

int location[] = new int[2] ;view.getLocationOnScreen(location);

To retrieve the animation. Remember to remove the Activity switching animation.

getActivity().overridePendingTransition(0, 0);

2. Enter the animation parameter acquisition

Obtains the value passed in from the list page.

final int left = getIntent().getIntExtra("locationX", 0);        final int top = getIntent().getIntExtra("locationY", 0);        final int width = getIntent().getIntExtra("width", 0);        final int height = getIntent().getIntExtra("height", 0);        int resId = getIntent().getIntExtra("resId", 0);

Calculate animation execution Parameters

mImageView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                mImageView.getViewTreeObserver().removeOnPreDrawListener(this);                int location[] = new int[2];                mImageView.getLocationOnScreen(location);                mLeft = left - location[0];                mTop = top - location[1];                mScaleX = width*1.0f / mImageView.getWidth();                mScaleY = height*1.0f / mImageView.getHeight();                Log.v("zgy", "========resId========" + mImageView.getWidth()) ;                Log.v("zgy", "========resId========" + mScaleY) ;                activityEnterAnim();                return true;            }        });

Because it is executed in the OnCreate method, the size of the View cannot be obtained directly, because the View has not been measured yet, and you need to listen for the View to draw, calculate the distance and scale-down ratio of the currently displayed View distance list;

3. Set the animation start position

mImageView.setPivotX(0);        mImageView.setPivotY(0);        mImageView.setScaleX(mScaleX);        mImageView.setScaleY(mScaleY);        mImageView.setTranslationX(mLeft);        mImageView.setTranslationY(mTop);

4. Start to execute the animation.
The details page has been started at this time, so no operation is required after the animation is executed.

mImageView.animate().scaleX(1).scaleY(1).translationX(0).translationY(0).                setDuration(1000).setInterpolator(new DecelerateInterpolator()).start();        ObjectAnimator objectAnimator = ObjectAnimator.ofInt(mBackground,"alpha",0,255);        objectAnimator.setInterpolator(new DecelerateInterpolator());        objectAnimator.setDuration(1000);        objectAnimator.start();

Let's take a look at this time.

5. Exit the animation

mImageView.setPivotX(0);        mImageView.setPivotY(0);        mImageView.animate().scaleX(mScaleX).scaleY(mScaleY).translationX(mLeft).translationY(mTop).                withEndAction(runnable).                setDuration(1000).setInterpolator(new DecelerateInterpolator()).start();        ObjectAnimator objectAnimator = ObjectAnimator.ofInt(mBackground,"alpha",255,0);        objectAnimator.setInterpolator(new DecelerateInterpolator());        objectAnimator.setDuration(1000);        objectAnimator.start();

Here, a Runnable object is input at the end of the animation. This Runnable is used to end the details page.

activityExitAnim(new Runnable() {            @Override            public void run() {                finish();                overridePendingTransition(0, 0);            }        });

When you are doing something, you may find this phenomenon.

Why? I have previously written a blog gesture to slide and complete the implementation of the basic functions of Activity (1). After reading it, you will understand it.

Summary

This blog does not have much content, so it is not difficult to implement the page, but you can think of it. Of course, some knowledge points are involved:
1. Use of attribute Animation,
2. You can obtain the View position on the screen through
Int location [] = new int [2];
View. getLocationOnScreen (location );
3. The size of the measurement View in onCreate cannot be obtained directly. You need to listen to the painting of the View, or return the interface after other measurements are completed.

Click to download source code