Android App development: Animation development--xml Animation

Introduction

Today, Android, iOS, the world, what Tizen, COS blabla are ants, a look at know is to send leadership or to spend research and development funds output products, is not to win the market, for just won the leadership a smile, completely can be ignored. Android development and because the development of Java-based language, entry threshold is very low lead to basically a programmer, soak two days eoe, or Android Developer training can say "brother will develop Android app!" "So what's going to make your app stand out?" Accurate user pain points, good data structure, simple and easy to use interactive process, generous avant-garde design style and so on are necessary, and for users, the most intuitive, most direct, the most can be touched by the interface, this blog is to tell the Android interface development can not be underestimated animation development, Preliminary decision to be divided into three blog to explain, respectively, is the XML animation, code animation, Interpolator. This article begins with the development of XML animation.

Defined

<?xml version= "1.0" encoding= "Utf-8"? ><set xmlns:android= "Http://schemas.android.com/apk/res/android" >    <scale        android:pivotx= "50%p"        android:pivoty= "50%p"        android:fromxscale= "1" android: Toxscale= ". android:fromyscale="        1 "android:toyscale=". "        android:duration=" @android: Integer/config_ Shortanimtime "/>    <alpha        android:fromalpha=" 1 "        android:toalpha=". 4 "        android:duration=" @ Android:integer/config_shortanimtime "/></set>

The opening is to post a simple XML animation as an example of parsing (animated XML is in Res/anim). The first is that Set,set can be understood as a container, and the content that is hosted is animated. With set, you can have several different property animations play at the same time. In the example above, a set (container) contains two sub-animations, namely the scale--scale animation and the alpha--transparency animation. The set also has the Android:duration attribute, which defines the duration of all the sub-animations, which are clearly committed in the example, and can be defined uniformly in a set if the time of the sub-animation is the same. The common properties of set are:

    android:duration= "android:interpolator="    @android: Interpolator/overshoot "    android:repeatcount=" Infinite "    android:repeatmode=" Reverse|restart "

As Android:duration has said, it defines the duration of all the sub-animations contained in the set container, in milliseconds MS;

Android:interpolator is used to define the Interpolator for all the sub-animations in the container, and the post will detail what the interpolator is;

Android:repeatcount is used to define the number of repetitions of all sub-animations in a container, infinite is infinite;

Android:repeatemode is used to define the pattern of all the sub-animations in the container, restart to play back, reverse for playback (very weird).

PS: Above these properties all property animations (sub-animations) have the same meaning.

Now look at scale scaling animation, and note the description of its properties (except that android:duration is a property specific to scale scaling animations):

Android:pivotx the x-axis coordinates of the scaling. The coordinate system of this x-axis is slightly different from what we learned from small to large:

y| | -----------------------→x|↓

The difference is that the y axis grows downward, and X is the same as the right. When zooming, you need to have a datum coordinate, Pivotx defines the x-coordinate part of this datum coordinate, note that its attribute value is 50%p, it represents half of the x-axis of a unit, do not forget "P" (percent), so we have to calculate this unit width to do the trouble of processing.

Android:pivoty the y-coordinate of the scaling datum point, don't forget to grow downward, of course, if it is the center, it can be as simple as the example is defined as 50%p.

Android:fromxscale Scale start view units are scaled on the x-axis, 1 is 100%, and ". 5" is the same as 50%,fromyscale.

Android:toxscale the magnification of the view unit on the x-axis after the zoom end, the Android system automatically tells the view to make a motion tween (auto-continuous and natural) for us, toyscale the same.

Finally, the meaning of scale scaling animation is summed up in a sentence: the center point of the view unit, the size from 100% to 85%, the duration is 300 milliseconds.

The ps:android contains three animated durations of @android:integer/config_shortanimtime (200ms), @android: Integer/config_mediumanimtime ( 400MS), @android: Integer/config_longanimtime (500ms), and it's worth noting that in the developer options in Android settings, the debug option for animation duration only takes effect when these values are used. If you use a custom time, these developer options will not work for your app.

After explaining the scale scaling animation, and then looking at the next Alpha Transparency animation, this is going to be a lot simpler and a simple two properties:

Android:fromalpha the transparency of the view at the beginning of the animation;

Android:toalpha The view transparency at the end of the animation, the same ". 4" represents 40%, a "." is the package percentage.

Analyze the entire XML animation file, summarize the animation file described by the animation behavior is: the View Center as a benchmark for 100% to 85% Zoom, while the transparency of the view from 100% to 40%, the entire animation process continues to 200ms.

In addition to scale scaling animations and alpha transparency animations described above, XML animations can also define other forms of animation:

    <rotate        android:fromdegrees= ""        android:todegrees= ""        android:pivotx= ""        android:pivoty= ""/ >    <translate        android:fromxdelta= "" Android:toxdelta= ""        android:fromydelta= "" Android:toydelta= ""/>

Rotate rotate animations and translate displacement animations.

rotate rotate the animation . Rotates around a point (Pivotx, Pivoty) with a starting angle of fromdegrees and an end angle of todegrees.

Translate displacement animation . Moving from the Fromxdelta to the toxdelta,y axis on the x-axis from Fromydelta to Toydelta is easy to understand.

The definition of XML animation before Android L is these (L version of the animation is only valid on the L platform, as the beta version does not currently have much device coverage), a total of four animation forms: scale scaling, alpha transparency, rotate rotation, translate displacement. Wait, is there something missing? What if you want to design a rotation animation around the x or Y axis? Sorry, XML animation can not do this, only in the code to define, read the article after it.

Use

How do I use the XML animation file after it has been defined? First, identify where the XML animations can be applied: Activity, fragment, and all view. To start with the view, the animation about the view needs to be implemented in the code, assuming we have defined an XML animation, named Fade_zoom_out.xml, to get the object of this animation:

Animation Animation = animationutils.loadanimation (context, r.anim.fade_zoom_out);

Both animation and Animationutils are android.view.animation subclasses and already exist in API 1 without worrying about compatibility.

Having the specified view play the animation we just acquired requires calling the Startanimation method of view:

And many times, we in the animation play different time needs to do different processing to the view, here needs to use the animation listener Animationlistener, sets the listener for the animation, therefore must be the animation class method:

public void Setanimationlistener (Animationlistener listener)

The animation listener Animationlistener is well understood, listening separately when the animation starts, ends, and repeats:

public static interface Animationlistener {        void Onanimationstart (Animation Animation);        void Onanimationend (Animation Animation);        void Onanimationrepeat (Animation Animation);    }

The application of XML animation in view is like this, very simple.

There are two ways in which Activiyt's animation is applied, in both the code and the Styles.xml theme overlay. The individual advocates the application of activity animations through the theme definition, so that the whole application is more unified and has problems and is easier to modify. But let's talk about how to apply XML animations to the activity in your code:

public void overridependingtransition (int enteranim, int exitanim)

The parameters Enteranim and Exitanim should all be in the form of r.anim.xxx. If there is no animation, give 0. This function needs to be called after a call such as startactivity or finish. Enteranim animations are applied to the activity that comes in (new), and the Exitanim animation is applied to the departed activity.

Suppose there are now two activity,a and B. Execute StartActivity (B) from a, and then call Overridependingtransition (Enteranim, Exitanim). At this point B is new, a is old and needs to disappear. The Enteranim will be applied to B, and the Exitanim will be applied on a.

The way the theme is defined. When you customize the theme of your app, the animation style property is Android:windowanimationstyle:

<item name= "Android:windowanimationstyle" > @style/animation</item>

When customizing, note the parent's choice:

    <style name= "Animation"           parent= "@android: style/animation.activity" >    </style>

This is to ensure that the system default animation exists, the custom will override the system default, no custom directly adopt the system default, there will be no non-customizable directly without animation effect.

There are four settings for activity-related animation properties:

<item name= "android:activityopenenteranimation" ></item><item name= "Android: Activityopenexitanimation "></item><item name=" Android:activitycloseenteranimation "></item> <item name= "Android:activitycloseexitanimation" ></item>

Define a particular raozui, and the understanding is not the same as the first impression of the literal.

Android:activityopenenteranimation refers to the animation of the new activity entered by the open action.

Android:activityopenexitanimation refers to what the old activity's exit animation is when the new activity is drawn out by the open action;

Android:activitycloseenteranimation refers to the animation effect of the activity that occurs when the next activity in the activity stack occurs due to the closure of the previous activity;

Android:activitycloseexitanimation refers to how the closed activity exits the animation when the next activity in the stack is caused by the last activity shutdown.

It is very raozui, the following is an example to explain:

Let's say there are two activity A and B, with different animated themes set up separately. The current window shows a, clicking a button in a will lead to B.

When you click on the button in a, because B is opened, B plays the B-themed activityopenenteranimation animation, And a plays the B-theme Activityopenexitanimation animation (because the exit of a (which is actually a step backwards in the activity stack) is because B is caused by open, not because of its own open or close operation).

When returning from B, the B interface needs to disappear, and the activity stack determines that the a interface should appear in the foreground. So it can be said that the appearance of a is due to the close behavior of B. So the animations played by A and B are those defined in the a topic, and a because of the close behavior, the playback activitycloseenteranimation,b is the interface that needs to be exited in this close behavior. The activitycloseexitanimation is played.

If you still do not understand, define a few significant differences in animation to personally test it, absolutely immediate!

Animation of activity is like this, the development process is still more common. About fragment animation settings write another day, it's late, go to sleep ~

Summarize

The use of animation can be used to enhance the luster of the application, but everything, once the animation is abused, the overall user experience not only can not improve, but easy to let users feel very contrived. More emphasis on some micro-animation bar, such as the slight jitter of the view. And the transition animation should be more emphasis on fresh and elegant, if the animation effect is too strong, users must feel that your application runs very laborious. XML animation application is relatively simple, generally suitable for the transition animation, for the view animation is not flexible.

Android App development: Animation development--xml Animation