Activity Toggle Animation (Xiaomi Gallery list goes to Details page, image zooms in from fixed position, zooms out)

Directly on

OK, let's analyze how it's going to be implemented.

Analysis principle

First of all, this is two different Activity, from the Picture List page to jump into the picture details page, first look at the details page of the animation, from the list of item's position has been magnified to the details page display location, here I can tell you, when we clicked on this item, You have started the details page and then animated the details page accordingly. Since it is animated on the detail page, it is necessary to pass the corresponding values in the list page, the list page item's position on the screen, the size of item, and of course the resource of the picture, then the details page calculates the parameters of the animation execution. Analysis of the entry animation, then quit the Activity of the animation is good to achieve, and into the animation, but also to determine when to execute the exit animation, where the exit animation is also placed on the Details page implementation, when the return button is pressed, the start to execute the exit animation, after the animation, the details of the page The Activity is over; People will ask, can you put the animation on the list page to execute? People think about it, if it is to enter the animation, it is certainly not, because the details of the page does not start, some parameters can not be known, such as magnification to how big, where the position is magnified later, but the exit animation is possible, but more troublesome, you need to return the details of the page parameters to the list page, if interested can try to

Effect implementation

1. Parameter acquisition of the incoming detail 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());}

Item coordinates in the screen, which can be

intnewint[2] ;view.getLocationOnScreen(location);

To get, remember to remove the Activity switch animation

getActivity().overridePendingTransition(00);

2, enter the animation parameters to get

Get the values passed in the list page

 final  int  left = Geti Ntent (). Getintextra ( "Locationx" , 0 ); final  int  top = getintent (). Getintextra ( "Locationy" , 0 ); final  int  width = getintent (). Getintextra (, Span class= "Hljs-number" >0 ); final  int  height = getintent (). Getintextra (, 0 ); int  resId = Getintent (). Getintextra ( "resId" , Span class= "Hljs-number" >0 ); 

Calculate parameters for animation execution

Mimageview.getviewtreeobserver (). Addonpredrawlistener (NewViewtreeobserver.onpredrawlistener () {@Override             Public Boolean Onpredraw() {mimageview.getviewtreeobserver (). Removeonpredrawlistener ( This);intLocation[] =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, can not directly get the size of the view, because this time the view has not been measured, the need to listen to the view of the drawing to get, here to calculate the currently displayed view distance list view distance and scale;

3. Set the position where the animation begins to execute

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

4. Start execution into animation
This time the Details page has been launched, so do not need to do any action after the animation

Mimageview. Animate(). ScaleX(1). ScaleY(1). Translationx(0). Translationy(0). Setduration ( +). Setinterpolator(New Decelerateinterpolator ()). Start();Objectanimator Objectanimator = Objectanimator. Ofint(Mbackground,"Alpha",0,255);Objectanimator. Setinterpolator(New Decelerateinterpolator ());Objectanimator. Setduration( +);Objectanimator. Start();

Take a look at this.

5. Exit animation

Mimageview. Setpivotx(0);Mimageview. Setpivoty(0);Mimageview. Animate(). ScaleX(Mscalex). ScaleY(Mscaley). Translationx(Mleft). Translationy(Mtop).                Withendaction (runnable). Setduration ( +). Setinterpolator(New Decelerateinterpolator ()). Start();Objectanimator Objectanimator = Objectanimator. Ofint(Mbackground,"Alpha",255,0);Objectanimator. Setinterpolator(New Decelerateinterpolator ());Objectanimator. Setduration( +);Objectanimator. Start();

Here at the end of the animation passed a Runnable object, the role of this Runnable is to end the detail page

        activityExitAnim(new Runnable() {            @Override            publicvoidrun() {                finish();                overridePendingTransition(00);            }        });

When you're doing it you may find a phenomenon that comes to see

Why is that? I wrote it in front of the blog gesture Sliding End Activity (a) The implementation of basic functions, after reading you will understand.

Summarize

This blog content is not much, the realization of the page is not difficult, just see if you can think of. Of course, some knowledge points are involved:
1, the use of property animation,
2, the View on the screen location of the acquisition, you can pass
int location[] = new INT[2];
View.getlocationonscreen (location);
3, in the onCreate measurement of the size of the view, can not be directly obtained, you need to listen to the drawing of the view, or other measurement after the completion of the return interface.

Click to download the source code

Activity Toggle Animation (Xiaomi Gallery list goes to Details page, image zooms in from fixed position, zooms out)