foreword
We all know that a beautiful user interface is an important basis for measuring the "good or bad" of an application, because people are visual animals, just like saying that men are always attracted by their beauty, and their handsomeness can always win hearts. This is an unquestionable fact, and so is our application. A beautiful user interface can enhance the user's favorable impression of the application and enhance the user experience. Animation is an important factor to improve the user experience. Good animation interaction makes people more comfortable to use. So today's article is to introduce the implementation of animation in Android to make our application move.
Android animation classification
It is also explained in two categories.
Material Design was added starting with Android 5.0, and some animations were implemented in Material Design to provide users with operational feedback and provide visual continuity as users interact with your app. It will provide some default animations for button and action transitions, we can customize touch feedback, use reveal effects, custom action transitions, specify custom transitions, use transitions to initiate an action, share elements to initiate an action, and more.
Frame Animation
Due to Frame Animation, the implementation of Tween Animation is still different. For the time being, we will introduce these two methods separately. Frame Animation actually displays a series of pictures one by one, which is similar to watching movies. Since the human eye has an acceptable dwell time, this is why people feel sluggish watching videos online. Of course, we implement Frame Animation based on this. When playing the same number of pictures, the shorter the time, the smoother it will be, and natural people will feel it is an animation. Our common Gif is actually a frame animation. If you open a Gif animation with PhotoShop, you will find that there are many layers in it, 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 it is very simple to implement Frame animation with few attributes. The animation-list is the root element of the animation. The oneshot attribute in the root element represents the number of animation executions. If it is set to true, it means that it is played only once, and if it is false, it means will keep looping. There is an item element under the root element, which is the image we want to add, each item represents a frame, the drawable under the item is our image resource, and the duration is the execution time of the frame animation. E.g
The method of use is as follows
The running effect diagram is as above. We did not add the oneshot attribute above, and the attribute defaults to false, which means that the animation will be executed in a loop. When we set true, the animation will stop when the last frame is played. When we want to stop, we can Use the stop method of AnimationDrawable, which also provides the isRunning() method to determine whether the animation is already being executed. Another thing we need to pay attention to is to be careful with OOM.
Of course, it is also very simple to implement with code, as follows
Tween Animation
Tween Animation is a tweening animation, which is mainly divided into four types, namely translation, zoom, rotation, transparency, directly on the grammar
This is the official syntax, set is an animation collection, which can be a combination of multiple animations, or nested sets, which contain all the properties of animation implementation. What we need to pay attention to in the above syntax is that when panning, the position actually accepts a percentage value: values from -100 to 100, ending with "%", indicate that the percentage is relative to itself; values from -100 to 100, with "%" p" to indicate a percentage relative to the parent container. For example, if the translation start position is in the middle of itself, it is 50%, and if the normal start position is in the parent container, it is 50%p.
For example, some people will add some animations from the left to the right to our Activity, then when we open the Activity, set the fromXDelta value of the Activity layout to -100%p and toXDelta to 0%p, then the effect we see is from Entered on the left.
interpolator
The main function of the animation interpolator is to change the execution rate of the animation. In general, we do not need to implement the interpolator by ourselves, because 9 kinds of interpolators have been provided to us in Android, which should be enough for us. After we use the interpolator It will make the effect of animation execution more cool. Of course, it is not difficult to customize the interpolator. You can check the source code of the implemented interpolator for reference.
-
accelerate_decelerate_interpolator: accelerate first and then decelerate
-
accelerate_interpolator: Accelerate all the time
-
anticipate_interpolator: At the beginning, throw a little backward and then forward, just like when a person throws something, he throws it backward first, so that he can throw it far
-
anticipate_overshoot_interpolator: Similar to the previous interpolator, it is thrown backwards and then forwards. After reaching the end, there will be a rebound effect. For example, we throw the ball to the wall and then bounce back.
-
bounce_interpolator: bounces up at the end of the animation, similar to a ball landing, it will bounce a few times before it stops
-
cycle_interpolator: The animation loops a specific number of times back to the origin, and the rate changes along a sinusoidal curve
-
decelerate_interpolator: a decelerating interpolator that starts fast, then gets slower and slower until it stops
-
linear_interpolator: Linear interpolator. Uniform motion from start to finish
-
overshoot_interpolator: go forward a bit past the set value and then go back
The following is a simple implementation of an animation. The animation effect is as shown in the screenshot below. It is an animation of transparency, translation, and zooming at the same time.
Then use the following code to animate the ImageView.
Of course, we can also add monitoring to the animation. Such as
。
Thanks to Animation
Property animation was introduced after 3.0. In the View animation, although we see that the position of our controls has changed, for example, although the position of Button has changed, the click response area is still in the original position. And property animation can solve this problem. It can act on View properties.
grammar
The common property names are listed below. In addition, it should be noted that when using property animation, there must be a set/get method for the corresponding property, otherwise the property animation will have no effect.
-
translationX and translationY : Controls the increment of the View's distance from the left and top. is a relative value. Specific to its own position.
-
rotation , rotationX and rotationY : rotation controls the rotation of the View around its pivot. rotationX and rotationY are the rotations around the X and Y axes, respectively.
-
scaleX and scaleY : Control the scaling of the View.
-
pivotX and pivotY : Control the pivot position of the View, rotate and zoom, the default is the midpoint of the View. They are both float values, 0 means the leftmost and topmost of the View, and 1 means the rightmost and bottommost.
-
alpha : Controls the transparency of the View.
-
x and y : Controls how far the View is from the left and top of the layout container. is an absolute value.
For example, we implement an animation of rotation and transparency changes, the effect is as follows
Then
Of course, it is also very simple to write without xml, the following code
The effect achieved by the code is to rotate to 180 degrees in 2 seconds, and then return to 90 degrees and then turn back to 180 degrees.
The effect diagram is as follows
In the above code, the animation of properties has been implemented, so what if we want to act on several properties at the same time. At this point, we have two implementation methods: class PropertyValuesHolder and AnimatorSet. Without further ado, let's go to the picture first and then directly to the code.
Fragment/Activity animation
In fact, it is very simple to realize the switching animation of Activity and Fragment, and the specific animation effect can be made using even the tween animation described above. For example our Fragment animation.
It is also very simple for Activity to implement animation. The overridePendingTransition(int enterAnim, int exitAnim) method is provided in 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 generally written after startActivity() and after 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 Activity/Fragment implementing animation in code. Of course, there is also a simple way to implement it, which is to set animation in the theme.
For Activity
Maybe you don't understand why four kinds are set, if there are Activity1 and Activity2. When we jump to Activity2 in Activity1, Activity1 disappears on the page is executed: activityOpenExitAnimation animation, Activity2 appears on the screen to execute the animation is activityOpenEnterAnimation. When Activity2 finish returns to Activity1, the animation performed by Activity2 is activityCloseExitAnimation, and the animation performed by Activity1 displayed on the screen is activityCloseEnterAnimation. After creating the above theme, we need to apply the theme to our Activty.
Similarly, Fragment can also be set accordingly, such as changing activityCloseEnterAnimation to fragmentCloseEnterAnimation.
In addition, we can also use windowAnimation, which includes windowEnterAnimation and windowExitAnimation. One thing to note is that WindowAnimation has more control than 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 this article, cool Activity switching animations, to create a better user experience. Personally, I think this article is very detailed. A supplement is also made to the missing content of this article. This article will come to an end temporarily. If you have any questions, please point out, Have a wonderful day.