Learn andriod development picture Flip so easy

Source: Internet
Author: User

Hello, everyone, I'm Akira. Let's play a very interesting thing today to see the following short film



So what's this supposed to be so common when you're commuting or in and out of the mall? He's a revolving door.

We're going to go in with the revolving door and then come out, that's it. Maybe there's just one flip door.

This is something that we see in some movies, some of which are similar in some way or the secret path is the use of this kind of door, but the latter is more simple to simplify the two door into a

But the effect is the same, of course, what we're talking about today is not about what the door is about. We are mobile developers who naturally think about this stuff in our

How the Andriod client will be implemented

We're going to introduce a very simple way to do this with a normal animation. Someone might be surprised because this thing involves some effect of 3D so you use 2D

Can animations be implemented? The answer is yes. Because we know that our naked eye is a simple example of how easy it is to be deceived. We've all seen magic.

Close-up Magic we all know very well that magic is fake, but our naked eye is very clear that this thing is really magically disappearing in the hands of the magician so we can get a conclusion sometimes the naked eye is unreliable, but he will give me a sense of deception. The following example is the best proof




What kind of column is round or square do you see it or are there three pillars or two pillars?

OK, since the naked eye can be deceiving, then we can do a pseudo 3D effect. The core class is the Zoom animation in our animation

We know from experience that when you look at a distant object, the object becomes smaller and the object becomes larger when you look closer.

This is in line with the characteristics of our scaleanimation.

Let's use this scaleanimation.

One of the most obscure things about scaleanimation is his structure to explain the problem here.

/** * Constructor to use when building a scaleanimation from code * * @param FromX Horizontal Scaling factor To apply at the start of the * animation * @param ToX horizontal scaling factor to apply at the end of the Animation * @param FromY Vertical scaling factor to apply at the start of the * animation * @param ToY Vertical scaling factor to apply at the end of the animation * @param pivotxtype specifies what pivotxvalue should be I Nterpreted.     One of * Animation.absolute, animation.relative_to_self, or * animation.relative_to_parent. * @param pivotxvalue The X coordinate of the point about which the object * was being scaled, specified as an AB Solute number where 0 is the * left edge. (This point remains a fixed while the object changes * size.) This value can either being an absolute number if pivotxtype * was absolute, or a percentage (where 1.0 is 100%) ot     Herwise. * @param pivotytype Specifies how Pivotyvalue should is interpreted.     One of * Animation.absolute, animation.relative_to_self, or * animation.relative_to_parent. * @param pivotyvalue The Y coordinate of the point about which the object * was being scaled, specified as an AB Solute number where 0 is the * top edge. (This point remains a fixed while the object changes * size.) This value can either being an absolute number if pivotytype * was absolute, or a percentage (where 1.0 is 100%) ot     Herwise. */Public Scaleanimation (float FromX, float toX, float fromY, float toY, int pivotxtype, float pivotxvalue,        int Pivotytype, float pivotyvalue) {mresources = null;        MFROMX = FromX;        Mtox = ToX;        mfromy = FromY;        Mtoy = ToY;        Mpivotxvalue = Pivotxvalue;        Mpivotxtype = Pivotxtype;        Mpivotyvalue = Pivotyvalue;        Mpivotytype = Pivotytype; Initializepivotpoint (); }

This is the scaleanimation of the structure of the source code above the note has been clearly explained that we have the following parameters represent what

Look at the first FromX, apparently from the back, to the obvious, to the x-coordinate.

OK This understanding of the back of the two Y nature is not difficult so the question came back to the four what is it?

We found that the guy in the back has a type and a value, and it's an X and Y, which is obviously the x and Y axes.

And looking at the comments above, it's not hard to see where the X and Y are actually scaled based on what we've often said about the reference Ok.

The next thing we need to know is what type this is going to take care of.

Back to the trajectory of the analysis. We know the scale animation. It's easy to tell that rotation is actually a process of indentation and expansion.

It's just the indentation and the expansion that we've switched to deceive our naked eye into thinking it's spinning.

Look at the code for the layout

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "    android:layout_height=" Match_parent  " Tools:context= ". Mainactivity ">    <!--<textview android:text=" @string/hello_world "android:layout_width=" Wrap_content "        android:layout_height= "wrap_content"/>-->    <imageview        android:id= "@+id/img_ad"        Android:layout_width= "Match_parent"        android:layout_height= "match_parent"        android:background= "@ DRAWABLE/BG "        android:scaletype=" Matrix "        /></linearlayout>
It's a simple picture. Here you will find that I have specified a matrix this is because we want to have a mirror effect on the turn.

The code is as follows

public class Mainactivity extends Activity {private ImageView mimageview;    Private scaleanimation out;    Private scaleanimation in;    Private Boolean ismirror= Whether false;//is mirrored private MediaPlayer mPlayer; String path = "";//play path @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (Savedin        Stancestate);        Setcontentview (R.layout.activity_main);        Initview ();        if (mplayer==null) MPlayer = new MediaPlayer ();//MediaPlayer MP = Mediaplayer.create (THIS,R.M);            try {mplayer.setdatasource (path);            Mplayer.setaudiostreamtype (Audiomanager.stream_music);            Mplayer.prepare (); Mplayer.setonpreparedlistener (New Mediaplayer.onpreparedlistener () {@Override public void O                Nprepared (MediaPlayer MP) {Mplayer.start ();        }            });        } catch (IOException e) {e.printstacktrace ();  }     /**/Mimageview.setonclicklistener (New View.onclicklistener () {@Override public void on                Click (View v) {Matrix matrix = new Matrix (); if (!ismirror) {out = new Scaleanimation ( -1.0f,1.0f,1.0f,1.0f, Animation.relative_to_parent,0.5f,animati On.                    relative_to_parent,0.5f);                    Out.setduration (1200);                    Out.setfillafter (TRUE);                    Mimageview.startanimation (out);                    Matrix.postscale (-1, 1);//-1 representative takes the opposite number, 1 means to remain unchanged matrix.posttranslate (Mimageview.getmeasuredwidth (), 0);                    Mimageview.setimagematrix (matrix);                Ismirror = true; }else{in = new Scaleanimation (1.0f,-1.0f,1.0f,1.0f,animation.relative_to_parent,0.5f,animation.relativ                    e_to_parent,0.5f);                    In.setduration (1200);                    In.setfillafter (TRUE); Mimageview.startanimation (in);//Matrix Matrix = Mimageview.getmatrix ();//Matrix Matrix = new Matrix (); Matrix.postscale (1, 1);//-1 representative takes the opposite number, 1 means to remain unchanged matrix.posttranslate (-MIMAGEVIEW.GETMEASUREDW                    Idth (), 0);                    Mimageview.setimagematrix (matrix);                   Ismirror = false;    }            }        });        } private void Initview () {Mimageview = (ImageView) Findviewbyid (R.ID.IMG_AD);        } @Override protected void OnDestroy () {mplayer.stop ();        Mplayer=null;    Super.ondestroy (); }}

The code here is simpler than the core is designed for two animations here we use a Boolean value to determine if it is mirrored

Then use the Postscale to set the mirror effect and then go to pan here are used post cannot use set and pre unless you are the first time

It's also important to note that posttranslate here translates displacement instead of coordinates Ok, if you want to use music,

can use MediaPlayer to do a play here I didn't do

PS: If you want to play the best advice to use the service to do exactly what MVC thought

The effect is as follows


Here's another situation where we might encounter a situation where we really want to juggle, which means I'm going in and out of the way.

In fact, this is a feature of scaleanimation, but we changed the parameters.

Layout or a picture

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "    android:layout_height=" Match_parent  " Tools:context= ". Mainactivity ">    <imageview        android:id=" @+id/image "        android:layout_width=" Match_parent "        android:layout_height= "match_parent"        android:scaletype= "Fitxy"        android:background= "@drawable/ BG "        /></relativelayout>
The code is not the previous code

The code is as follows

public class Mainactivity extends Activity {private ImageView mimageviwe;    Private Scaleanimation Intwo;    Private Scaleanimation Outtwo; Private Boolean zero = true;//is the first @Override protected void OnCreate (Bundle savedinstancestate) {Super.onc        Reate (savedinstancestate);        Setcontentview (R.layout.activity_main);        Init ();    Mimageviwe.setonclicklistener (New Myonimagecilcklistener ());        } private void Init () {mimageviwe = (ImageView) Findviewbyid (r.id.image); Intwo = new Scaleanimation (1.0f,0.0f,1.0f,1.0f, animation.relative_to_parent,0.5f, Animation.relative_to_parent,        0.5f);        Intwo.setduration (500);        Intwo.setfillafter (TRUE); Outtwo = new Scaleanimation (0.0f,1.0f,1.0f,1.0f, animation.relative_to_parent,0.5f, Animation.relative_to_parent,        0.5f);        Outtwo.setduration (500);    Outtwo.setfillafter (TRUE); }/* @Override public boolean Oncreateoptionsmenu (Menu menu) {//inflate the menu; this adds items to the action bar if it is present.        Getmenuinflater (). Inflate (R.menu.menu_main, menu);    return true; } @Override public boolean onoptionsitemselected (MenuItem Item) {//Handle Action Bar item clicks here.  The action bar would//automatically handle clicks on the Home/up button, so long/As you specify a parent        Activity in Androidmanifest.xml.        int id = item.getitemid ();        Noinspection simplifiableifstatement if (id = = r.id.action_settings) {return true;    } return super.onoptionsitemselected (item);             }*/class Myonimagecilcklistener implements view.onclicklistener{@Override public void OnClick (View v) {                if (zero) {mimageviwe.startanimation (intwo);  Intwo.setanimationlistener (New Animation.animationlistener () {@Override public void                    Onanimationstart (Animation Animation) {} @Override public void Onanimationend (Animation Animation) {                        Mimageviwe.startanimation (Outtwo);                        Bitmap map2 = Bitmapfactory.decoderesource (Getresources (), r.drawable.bg2);                    Mimageviwe.setimagebitmap (MAP2);                    } @Override public void Onanimationrepeat (Animation Animation) {                }                });            Zero = false;                }else{mimageviwe.startanimation (Intwo);  Intwo.setanimationlistener (New Animation.animationlistener () {@Override public void Onanimationstart (Animation Animation) {} @Override public void                        Onanimationend (Animation Animation) {mimageviwe.startanimation (outtwo); Bitmap map = Bitmapfactory.decoderesource (getresoUrces (), r.drawable.bg);                    Mimageviwe.setimagebitmap (map);                    } @Override public void Onanimationrepeat (Animation Animation) {                }                });            Zero = true; }        }    }}

This cycle is all about you. Define the opposite if you don't define a cycle then your animations won't have any effect


It's still a Boolean. We found that because it was going around the center, we had to show the next one before we had a white screen after the animation ended.

This is the use of Animationlistener, the listener in the onanimationend end of the callback to show a new

Okay, so our second kind is done.

Look at the effect


haha buy demo send 0 has become the current domestic host player a stem but individuals are very much looking forward to the new FF

We'll be here in the next issue, and I'll see you guys.

Learn andriod development picture Flip so easy

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.