Android animation implementation principle and code

As we all know, a beautiful user interface is a very important basis to measure the "good or bad" of an application, because people are visual animals. For example, men are always attracted to beauty, and handsome can always win hearts. This is an indisputable fact, so is our application. A beautiful user interaction interface can improve users' favor for the application and improve the user experience. Animation is an important factor to improve the user experience. Good animation interaction makes people feel more comfortable. Today's article is to introduce the implementation of animation in Android and make our applications move.

Android animation classification

In Android, we generally divide animation into two categories: View animation and property animation. Of course, there are three types: frame animation, Tween animation and property animation. Since the first two are generally applied to the whole view, they are collectively referred to as view animation. It is also explained according to two categories in Google's official documents.

Material design has been added in Android 5.0. Some animations have been implemented in material design to provide operation feedback for users and provide visual continuity when users interact with your application. It will provide some default animation for button and operation behavior conversion. We can customize touch feedback, use exposure effect, customize operation behavior conversion, specify custom conversion, start an operation behavior with conversion, start an operation behavior with shared elements, and so on.

Frame Animation

Since the implementation of frame animation and tween animation are different, let's introduce these two methods separately. Frame animation actually shows a series of pictures one by one, which is similar to watching movies. Because the human eye has an acceptable retention time, this is why people feel stuck when watching videos online. Of course, this is the basis for our implementation of frame animation. When playing the same number of pictures, the shorter it is, the smoother it will be, and natural people will feel it is an animation. In fact, our common GIF is also a frame animation. If you open the GIF animation with Photoshop, you will find that there are many layers, that is, many frames.

There are two ways to implement frame animation. The first way is to create an XML file in the drawable folder. Its syntax is very simple, as follows

After reading the above, you will find that the implementation of frame animation is very simple with few attributes. Animation list is the root element of animation. The oneshot attribute in the root element indicates the number of animation execution times. If it is set to true, it means that it will be played only once. If it is false, it means that it will be executed circularly all the time. There is an item element under the root element, which is the picture we want to add. Each item represents a frame, the drawable under item is our picture resource, and the duration is the execution time of the animation of the frame. for example

The usage is as follows

The running effect is shown above. If we do not add the oneshot attribute, the attribute defaults to false, that is, the animation will be executed circularly all the time. When we set true, the animation will stop when it is played to the last frame. When we want to stop, we can use the stop method of animationdrawable, which also provides the isrunning () method to judge whether the animation is already executing. In addition, we also need to pay attention to oom.

Of course, the code implementation is also very simple, as follows

Tween Animation

Tween animation, that is, make-up animation, is mainly divided into four types: translation, scaling, rotation and transparency, which are directly related to syntax

This is the official syntax. Set is an animation set. It can be a combination of multiple animations or nested set. It contains all the attributes of animation implementation. In the above syntax, we need to pay attention to the fact that the position accepts the percentage value when translating: the value from - 100 to 100 ends with "%", indicating the percentage relative to itself; A value from - 100 to 100, ending with "% P", representing a percentage relative to the parent container. For example, if the translation start position is in the middle of itself, it is 50%. If the translation start position is in the parent container, it is 50% p

For example, some people will add some left in right out animations to our activity. When we open the activity, set the fromxdelta value of the activity layout to - 100% P and the toxelta value to 0% P, then we see the effect of entering from the left.

Interpolator

The role of the animation interpolator is mainly to change the execution rate of the animation. Generally, we don't need to implement the interpolator ourselves, because nine interpolators have been provided to us in Android, which should be enough for us to use. After we use the interpolator, the effect of animation execution will be more cool. Of course, it's not difficult to customize the interpolator, You can view the implemented interpolator source code for reference.

accelerate_ decelerate_ Interpolator: accelerate before decelerate_ Interpolator: always accelerating anticipate_ Interpolator: at the beginning, throw back a little and then move forward, just like people throw things back first, so that they can throw far_ overshoot_ Interpolator: similar to the previous interpolator, first throw back and then forward. After reaching the end point, there will be a rebound effect. For example, we throw the ball to the wall and then bounce back_ Interpolator: it bounces up at the end of the animation, which is similar to the landing of a ball. It will bounce several times before it stops the cycle_ Interpolator: the animation loops a certain number of times back to the origin, and the rate changes along the sine curve_ Interpolator: an interpolator that slows down. It starts fast, then slows down until it stops linear_ Interpolator: linear interpolator. Uniform motion overshoot from start to end_ Interpolator: move forward a little more than the set value, and then return

The following is a simple animation. The animation effect is as shown in the screenshot below. It is an animation executed simultaneously with the animation of transparency, translation and scaling.

Then use the following code to animate the ImageView.

Of course, we can also add monitoring to the animation. as

The above monitoring is the callback at the beginning and end of the animation and the update. We do some additional operations in the callback. The implementation of animation in the code is not detailed. It mainly corresponds to animationset, translateanimation, scaleanimation, alphaanimation and rotateanimation.

Propterty Animation

Attribute animation was introduced after 3.0. In view animation, although we saw that the position of our controls changed, for example, although the position of the button changed, the click response area was still in its original position. Attribute animation can solve this problem. It can act on the properties of the view. grammar

Common attribute names are listed below. In addition, it should be noted that when using attribute animation, there must be a set / get method for the corresponding attribute, otherwise the attribute animation will have no effect.

Translationx and translationy: controls the increase in the distance of the view from the left and top. Is a relative value. Specific relative to its position.

Rotation, rotationx, and rotationy: rotation controls the rotation of the view around its fulcrum. Rotationx and rotationy rotate around the X and Y axes, respectively.

ScaleX and Scaley: controls the scaling of the view.

Pivot X and pivot Y: control the pivot position of the view, rotate and zoom. The default is the midpoint of the view. They are all float values, 0 represents the leftmost and topmost of the view, and 1 represents the rightmost and bottom.

Alpha: controls the transparency of the view.

X and Y: controls the distance of the view from the left and top in the layout container. Is an absolute value.

For example, we realize an animation of rotation and transparency change. The effect picture is as follows

then

Of course, writing without XML is also very simple, as shown in the following code

The effect of the code is to rotate to 180 degrees in 2 seconds, return to 90 degrees and return to 180 degrees, as shown in the figure below

In the above code, the attribute animation is implemented all the time. If we want to act on several attributes at the same time, what should we do. At this time, we have two implementation methods, namely, the class propertyvaluesholder and animatorset. We won't say much. First, the figure above and then the code directly.

Fragment / activity animation

In fact, it is also very simple to realize the switching animation between activity and fragment. The specific animation effect can be used, even the gap animation described above. For example, we fragment animation.

The animation of the activity is also very simple. The overridependingtransition (int enteranim, int exitanim) method is provided in the activity. This method receives two parameters. The first parameter is the animation when the activity enters and the second parameter is the animation when the activity exits. This method is usually written after startactivity() and finish(). If we want to open or exit without displaying animation, we can set the parameter to 0.

In the above, we introduced the method of implementing animation in activity / fragment code. Of course, there is a simple implementation method, that is, animating in the theme. For activity

Maybe you don't quite understand why there are four, if there are activity1 and activity2. When we jump to activity2 in activity1, activity1 disappears on the page and is executed: activityopenexitanimation animation. The animation that activity2 appears on the screen is activityopenenteranimation. When activity2 finish returns activity1, the animation executed by activity2 is activitycloseexitanimation, and activity1 is displayed on the screen and executes activitycloseenteranimation. After creating the above topic, we need to apply the topic to our activity.

Similarly, fragment can also be set accordingly. For example, the activitycloseenteranimation can be changed to fragment closeenteranimation.

In addition, we can also use windows animation, which includes windows enteranimation and windows exitanimation. Note that the control of windowanimation is greater than that of activity / fragment animation.

In addition to the animation implementation described above, some animations are added from Android 5.0. You can refer to the link article given at the end of the article to switch animations with cool activities to create a better user experience. Personally, I think this article is very detailed. It also makes a supplement to the missing content of this paper. At this point, the article will come to an end for the time being. If you have any questions, please point out that have a wonderful day

Define custom animation

Cool activity switching animation to create a better user experience