Shulou(Shulou.com)06/02 Report--

This article is a detailed introduction to "how to realize Android view animation". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to realize Android view animation" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

introduced

There are two main types of view animation:

I. Tween Animation translated as "tween animation"

1, scale translated as "scale, scale", is to zoom in a specific range of View

2, alpha by changing the transparency of View to achieve the effect of View looming

A. move B. move C. move D. move D

rotate rotate

PS: All the View movement, hiding and rotation are only the animation effects seen, and the actual View position/size/scale has not changed substantially (for example, after the View position is moved through animation, you register the click event or you need to click to the original position of the View to be triggered).

Second, Frame Animation translated into frame animation

This is easier to understand is to quickly switch multiple images with specific coherent actions in a short period of time to achieve the effect of animation, essentially all animation effects are this idea.

How to create a view animation file directory

Animation files are stored in the res/anim folder and accessed as R.anim.XXX. The default is that there is no need to manually create this folder (right-click res Directory-->New-->Android Resource Directory--> OK).

image

To create an animation file, right-click the anim folder and select new, then click Animation Resource file and select the animation type.

image

After entering, it will automatically prompt for the animation name, and then enter the name and confirm it.

image

scale animation

This animation parameter is relatively many, personally I spent the longest time learning this animation.

This animation is mainly to achieve the zoom of View, first of all, to achieve a zoom animation, first of all to determine what parameters/information (like cutting a specific size of paper to determine the width and height), then the first is to determine which point (pivot) to zoom around.

You also need to know the size (scale) of the View at the start of the animation (from) and the size (scale) at which the View will be at the end of the animation (to). To complete a zoom animation, you need to determine the following six parameters.

X specifies the width of the control, Y specifies the height of the control, and the higher the value, the more space the control occupies.

Android coordinates start from the top left corner.

image

fromXScale, toXScale, fromYScale, toYScale use floating point type, 1.0 table makes original size, 0.5 is scaled by half, 1.5 is expanded by half. For example: original View width and height 100, 150, 1.0:(100,150), 0.5:(50,75), 1.5:(150,225). Exact values (DP/PX) can also be used.

PivotX and pivotY have three ways to make tables, the first is to use pixel values, the second is a percentage of themselves, and the third is a percentage of their parent views.

For ease of observation, use two Views of the same position and size with different colors for observation. The animation playback code is given below.

Example 1: Using pixel values to determine Pivot points

Here we set pivot X and pivot Y to 200(px) respectively, this is calculated from the View itself, the upper left corner of the View is (0,0) point, and then the X axis coordinates to the right, Y is down 200 pixels respectively, and finally get the point pointed by the arrow (Pivot), then the starting point is determined.

Looking at the other parameters, fromXScale specifies the size of the X-coordinate, or width, at the start of the animation (here scaled), 0.5 represents half the original width of the View, and fromYScale is the height.

Since you're scaling to a particular scale, it's not enough to determine the starting size, you also have to determine the size you want to reach at the end of the animation, so you have toXScale and toYScale, which specify the size of the View after the animation is finished.

Here we zoom from 0.5 to 1.0 of the View, which is 3 seconds from half of the original View (duration is used to control the animation length, 1000 is 1 second.) The original View size is 1.0.

image

image

Example 2: Percent Pivot

Using percentages to determine Pivot is also very simple, so the position of Pivot is: based on the upper left corner of the View, that is, the (0,0) point, plus the View-specific percentage of width and height.

image

image

Example 3: Parent View Percent Pivot

This calculation is actually the same as the one above, only based on different points. The above is based on itself, so this is based on the parent layout of the View. Pivot is located at the upper left corner of the View, i.e., at the (0,0) point, plus the parent View's specified percentage of width and height.

image

image

alpha animation

This can be said to be very simple, mainly to achieve the color of the transition effect, fromAlpha is the animation at the beginning of the transparency,toAlpha is the animation at the end of the transparency. 0.0 1.0 is the primary color of View.

image

rotate animation

First of all, to complete the rotation, what parameters do you need to determine? It is definitely necessary to determine the point around which the rotation is to revolve, that is, pivot. This is also used in scale animation. The usage is the same. I won't say more. Here comes the concept of degrees, i.e. from degrees to degrees centered on a pivot. The following example is from 0 to 360 degrees, exactly one turn.

image

translate animation

To put it bluntly, it is to move the position of View, that is, to move from one point to another point, the most important thing is to determine two points, then you need to determine two pairs of X and Y coordinates.

The following parameters can be used in the same way as the pivot mentioned at the top. Exact values and percentages can be used.

The black line frames the original position of the View, the yellow line frames the position where the View animation starts, the purple line accounts for 70% of the entire View, and the final point is the final position where the View will move to, that is, the end point.

image

Set (set animation)

How to understand Set (set animation), in fact, very simple, for example, now there is a requirement, we want to rotate and gradually appear the effect, then we have to use set, to put it bluntly is to combine multiple animations. As long as you learn all the above, using this set is simply so easy.

image

Create animation dynamically

All of the animations shown above are written through xml files, all of which are statically written. So what if you want to create animated objects dynamically? In fact, it is very simple to create animations by code. Their names correspond to those created using xml files, and the constructor provided is also the required parameter value.

//Create Alpha animation var alpha = AlphaAnimation (0.0F, 1.0F)alpha.duration = 3000this.txtAnimation.startAnimation(alpha)//Create Rotate Animation var rotate = RotateAnimation (0F, 360F, Animation.RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F)(0F, 1F, 0F, 1F, Animation. RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F) Animation.RELATIVE_TO_SELF, 10F, Animation.RELATIVE_TO_SELF, 80F, Animation.RELATIVE_TO_SELF, 0F, Animation.RELATIVE_TO_SELF, 70F)//Create Animation Set var set = AnimationSet(this, null)set.duration = 3000set.addAnimation(alpha)set.addAnimation(rotate) Properties inherited from Animation

All of the above animation objects are inherited from the Animation class, and all common attributes are inherited as well.

image

Play Animation//Load Animation this.btnOpenAnimation.setOnClickListener { var animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim) this.txtAnimation.startAnimation(animation)}Tween Animation

This is an animation in Drawable form, stored in the Drawable folder, represented by the animation-list node. The images are prepared in advance. Try it yourself and you'll understand immediately.

Here we set the background property to a TextView.

specific call

var animationDrawable = this.txtAnimation.background as AnimationDrawableanimationDrawable.start()

display effect

Read here, this article "Android view animation how to achieve" article has been introduced, want to master the knowledge points of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.