Android Application Development: animation development-XML Animation

Android Application Development: animation development-XML Animation
Introduction

Today, Android and IOS are two parts of the world. Tizen and COS blabla are all ant financial products. At first glance, they know that they are products designed to send leaders or make R & D funds, not to win the market, to win a smile from the leaders, you can ignore it. Android development focuses on Java, and the entry threshold is very low, which basically leads to a programmer, or Android Developer Training can come and say, "Brother will develop the Android app! ", So what will stand out from your App? Accurate user pain points, good data structures, easy-to-use interaction processes, generous and avant-garde design styles, and so on are all necessary. For users, the most intuitive, direct, and appealing interface is the interface. This blog is used to describe the development of animations that cannot be underestimated in Android interface development. The initial decision should be divided into three blogs for detailed explanation, xml animation, code animation, and interpolation tool. This article begins with the development of xml animation.

Definition

The first part is a simple xml animation as an example for parsing (the animation xml is in res/anim ). The first is set. set can be understood as a container and its content is animated. With set, multiple different attribute animations can be played simultaneously. In the preceding example, a set (container) contains two sub-animations: scale-zoom animation and alpha-transparency animation. Set also has the android: duration Attribute, which is used to define the duration of all sub-animations, if the time of the sub-animation is the same, you can put it in a set for unified definition. Common set attributes include:

    android:duration="200"    android:interpolator="@android:interpolator/overshoot"    android:repeatCount="infinite"    android:repeatMode="reverse|restart"

Android: duration, defined as the duration of all sub-Animations contained in the set container, in milliseconds;

Android: interpolator is used to define all sub-animation interpolation devices in the container. The following articles will detail what the interpolation tool is;

Android: repeatCount is used to define the number of repetitions of all sub-animations in the container. infinite is unlimited;

Android: repeateMode is used to define the mode when all the sub-animations in the container are repeated. restart indicates replay, and reverse indicates playback (which is strange ).

PS: all the property Animations (subanimations) of the above attributes have the same meaning.

Now let's take a look at the scale scaling animation and pay attention to its attributes (except android: duration are all unique attributes of the scale scaling animation ):

Android: Where is the X axis coordinate of the zoomed TX. The coordinate system where the X axis is located is slightly different from what we have learned from small to large:

Y||-----------------------→ X|↓

The difference is that the Y axis increases downward, and the X axis increases to the right. When scaling, there must be a reference coordinate. Then TX defines the X coordinate part of the reference coordinate. Note that the attribute value is 50% p, which indicates that it is half of the X axis of a certain unit, do not forget "p" (percent), which saves us the trouble of calculating the unit width before processing.

Android: pivotY scales the Y axis coordinates of the benchmark. Don't forget to grow down. Of course, if it is center, it can be defined as 50% p as in the example.

Android: fromXScale the scale ratio of the Start view on the X axis. 1 is 100%, ". 5" is 50%, and fromYScale is the same.

Android: How much is the zoom ratio of the view unit on the X axis after the toXScale scale operation is completed? The Android system will automatically give us an animation of the view from to (Automatic Continuous and natural ), the same applies to toYScale.

Finally, we will summarize the meaning of the scale animation in one sentence: Take the center point of the view unit as the standard, and place the size from 100% to 85% for a duration of 300 milliseconds.

PS: Android has three built-in animation durations: @ android: integer/config_shortAnimTime (200 ms), @ android: integer/config_mediumAnimTime (400 ms), and @ android: integer/config_longAnimTime (500 ms), it is worth noting that in the Android system settings in the developer options, the debugging option of the animation duration takes effect only when these values are used. If you use a custom time, these developer options cannot take effect for your application.

After the scale animation is completed, let's take a look at the next alpha transparency animation. This is much simpler. There are two simple attributes:

Android: view transparency when fromAlpha animation starts;

Android: The view transparency at the end of the toAlpha animation. The same ". 4" represents 40%, and a "." represents the percentage of included packages.

After analyzing the entire xml animation file, we can summarize the animation behavior described in this animation file:Based on the center of the view, the system scales from 100% to 85%. At the same time, the transparency of the view changes from 100% to 40%, and the entire animation process lasts for 200 ms.

In addition to the scale and alpha transparency animations described above, xml animations can also define other animation formats:

Rotate rotation animation and translate displacement animation.

Rotate rotation Animation. Rotate around a vertex (vertex Tx, vertex ty). The starting angle is fromDegrees, And the ending angle is toDegrees.

Translate displacement Animation. Moving from fromXDelta to toXDelta on the X axis and from fromYDelta to toYDelta on the Y axis is easy to understand.

XML animations are defined before Android L (L-version animations are only valid on platform L and are not covered by many devices as beta versions). There are four animation formats in total: scale scaling, alpha transparency, rotate rotation, and translate displacement. Wait. What is missing? What if I want to design a rotation animation around X or Y axis? Sorry, XML animation cannot do this yet. It can only be defined in the Code. Read the post.

Use

How can I use an XML animation file after it is defined? First, identify the places where xml animations can be applied: Activity, Fragment, and all views. First, let's talk about the View. The View animation needs to be implemented in the Code. Suppose we have defined an XML animation named fade_zoom_out.xml to get the animation object:

Animation animation = AnimationUtils.loadAnimation(context, R.anim.fade_zoom_out);

Both Animation and AnimationUtils are subclasses of android. view. animation. They already exist in API 1 and do not worry about compatibility.

For the specified View to play the animation we just obtained, call the startAnimation method of the View:

public void startAnimation(Animation animation) 

In many cases, we need to process different views during different Animation playback periods. here we need to use the Animation listener AnimationListener to set the listener for the Animation, so it must be a method of the Animation class:

public void setAnimationListener(AnimationListener listener)

The animation listener AnimationListener is easy to understand. It listens to the animation start time, end time, and replay time respectively:

public static interface AnimationListener {        void onAnimationStart(Animation animation);        void onAnimationEnd(Animation animation);        void onAnimationRepeat(Animation animation);    }

The application of XML animation in View is as simple as this.

Activiyt has two ways of animation application: code and topic overwrite in styles. xml. I personally recommend that you use the theme definition to apply the Activity animation. In this way, the uniformity of the entire application is better, and problems are easy to modify. But let's talk about how to apply the XML animation to the Activity in the Code:

public void overridePendingTransition(int enterAnim, int exitAnim)

Both enterAnim and exitAnim must be in the form of R. anim. xxx. If there is no animation, 0 is given. This function must be called after startActivity or finish. The enterAnim animation will be applied to the incoming (new) Activity, and the exitAnim animation will be applied to the departing Activity.

Suppose there are two activities, A and B. Execute startActivity (B) from A and then call overridePendingTransition (enterAnim, exitAnim ). B is new, A is old, and needs to disappear. Then enterAnim is applied to B, and exitAnim is applied to.

Topic definition method. When you customize an application topic, the animation style attribute is android: windowAnimationStyle:

 
  @style/Animation
 

Pay attention to parent selection when customizing:

To ensure the existence of the system default animation, the Custom Animation will overwrite the system default animation. If there is no Custom Animation, the system default animation will be used directly, there will be no animation effect without being customized.

Activity-related animation attributes are set in four ways:

It defines a special Tongue Twister, and its understanding is not the same as that of the first impression.

Android: activityOpenEnterAnimation refers to the animation that the new Activity is imported from the open action;

Android: activityOpenExitAnimation refers to the exit animation of the old Activity after the new Activity is generated by the open action;

Android: activityCloseEnterAnimation refers to the animation effect of the Activity that appears when the next Activity in the Activity stack appears due to the closure of the previous Activity;

Android: activityCloseExitAnimation refers to how the closed Activity exits when the next Activity in the stack appears due to the previous Activity being closed.

This is really a big detour. Here is an example to explain:

Assume that there are two Activity A and B with different animation themes. The current window shows A. clicking A button in A will lead to B.

When you click this button in A, B plays the activityOpenEnterAnimation animation of the theme B because B is opened, A plays the activityOpenExitAnimation animation of theme B (because A exits (actually A is removed from the Activity stack) Because B is Open, not because of A's own open or close operations ).

When returned from B, the B interface needs to disappear, and the Activity stack determines that the interface appears on the foreground. So it can be said that A appears because of B's close behavior. The animation played by A and B is defined in Topic A. If A appears due to the close action, activityCloseEnterAnimation is played, and B is the interface to exit in the close action, then play activityCloseExitAnimation.

If you still don't understand it, Let's define several animations with significant differences to test them for yourself. It's absolutely immediate!

Activity animation is like this, which is quite common in the development process. Fragment-related animation settings will be written in another day. It's late today, go to bed ~

Summary

The use of animations can add luster to applications. However, once an animation is abused, the overall user experience cannot be improved, but it is easy for users to feel very pretentious. More about micro-motion pictures, such as slight View jitter. Transition animation should be fresh and elegant. If the animation effect is too strong, you must feel that your application is very difficult to run. XML animation is easy to use and is generally suitable for transition animation. It is not flexible enough for View animation.