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

This article will explain in detail about the use of Android animation skills, the content of the article is of high quality, so the editor to share with you to do a reference, I hope you have a certain understanding of the relevant knowledge after reading this article.

1. Android View animation framework

The Animation framework defines several common animations of transparency, rotation, scaling and displacement, and controls the whole View. The principle is that every time the view is drawn, the drawChild function in the ViewGroup of the View gets the transformation value of the Animation of the View, and then calls canvas.concat (transformToApply.getMatrix ()) to complete the animation frame through matrix operation. If it is not finished, continue to call the invalidate () function to start the next drawing to drive the animation, thus completing the drawing of the entire animation.

View animation is simple to use and rich in effects. It provides four animation methods: AlphaAnimation, RotateAnimation, TranslateAnimation, ScaleAnimation, and provides animation collection AnimationSet, mixed use of a variety of animation. Before Android3.0, view animation was dominant, but with the introduction of the attribute animation framework after Android3.0, its scenery is not as good as it used to be. Compared with attribute animation, a very big defect of view animation is that it is not interactive. When an element has a view animation, the location of its response event is still in the place before the animation, so view animation can only do ordinary animation effects to avoid interaction. But its advantages are also very obvious, that is, it is more efficient and easy to use.

View animation is very easy to use. You can not only describe an animation process through XML files, but also use code to control the whole animation process.

(1), transparency animation

Transform animation that adds transparency to the view.

AlphaAnimation aa = new AlphaAnimation (0,1); aa.setDuration (1000); view.startAnimation (aa)

(2) rotation animation

Add a transform animation of rotation to the view.

RotateAnimation ra = new RotateAnimation (0360100100); ra.setDuration (1000); view.startAnimation (ra)

The parameters are the starting angle of the rotation and the coordinates of the rotation center point, of course, you can set parameters to control the reference frame of the rotation animation, where the reference frame of the rotation animation is set as the center.

RotateAnimation ra1 = new RotateAnimation (0360, RotateAnimation.RELATIVE_TO_SELF, 0.5F, RotateAnimation.RELATIVE_TO_SELF, 0.5F)

(3), displacement animation

Add displacement animation to the view as it moves.

TranslateAnimation ta = new TranslateAnimation (0,200,0300); ta.setDuration (1000); view.startAnimation (ta)

(4), scale the animation

Add animation to zoom of the view

ScaleAnimation sa = new ScaleAnimation (0,2,0,2); sa.setDuration (1000); view.startAnimation (sa)

Like rotation animation, zoom animation can also set Luo Fang's center point and set the center as its own center effect.

ScaleAnimation sa1 = new ScaleAnimation (0,1,0,1, Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF, 0.5F); sa1.setDuration (1000); view.startAnimation (sa1)

(5) Animation collection

With AnimationSet, you can present the animation in a combination:

AnimationSet as = new AnimationSet (true); as.setDuration (1000); AlphaAnimation aa = new AlphaAnimation (0,1); aa.setDuration (1000); as.addAnimation (aa); RotateAnimation ra = new RotateAnimation (0360,100,100); ra.setDuration (1000); as.addAnimation (ra); TranslateAnimation ta = new TranslateAnimation (0200,0300); ta.setDuration (1000); as.addAnimation (ta); ScaleAnimation sa = new ScaleAnimation (0,2,0,2) Sa.setDuration (1000); as.addAnimation (sa); view.startAnimation (as)

You can directly copy the running code to see the effect!

For animation events, Android also provides the corresponding listening callback, code:

As.setAnimationListener (new Animation.AnimationListener () {@ Override public void onAnimationStart (Animation animation) {/ / Animation start} @ Override public void onAnimationEnd (Animation animation) {/ / Animation end} @ Override public void onAnimationRepeat (Animation animation) {/ / Animation repeat}})

Second, attribute animation

Because the existing animation framework Animation of Android3.0 has some limitations-animation changes only display, and can not respond to events. Therefore, after Android3.0, Google proposed a new animation framework, attribute animation, to achieve richer effects.

The most commonly used in the Animator framework is the combination of AnimatorSet and ObjectAnimator, using ObjectAnimator for more refined control, controlling only one attribute value of an object, and using multiple ObjectAnimator to combine into AnimatorSet to form an animation. And ObjectAnimator can be automatically driven, you can call setFrameDelay (long frameDelay) to set the gap time between animation frames. The most important thing is that attribute animation truly controls the attribute value of a View by calling the get and set methods of attributes, so the powerful attribute animation framework can basically achieve all animation effects.

(1), ObjectAnimator

ObjectAnimator is the most important implementation class in the attribute animation framework. To create an ObjectAnimator, you only need to return an ObjectAnimator object directly through its static factory class. The parameter includes an object and the name of the object's property, but this property must also have get and set functions, and the set function is called internally through the Java reflection mechanism to modify the value of the object's properties. Similarly, you can also call setInterpolator to set the corresponding differentiator.

Next, imagine adding a translation animation to a Button. After using the previous animation frame, the click event will not be triggered, the valid area of the click will still be the same place, and there will be no click event after the click movement. Attribute animation is different, it really changes the properties of a View, so the response area of the event is also changed, at this time, click the move button, it will respond to the click event.

The attribute animation translation code is as follows:

ObjectAnimator animator = ObjectAnimator.ofFloat (imageView, "translationX", 200F); animator.setDuration (300); animator.start ()

When using ObjectAnimator, it is very important that the properties you want to manipulate must have get and set methods, otherwise ObjectAnimator will not take effect. The following are common properties:

TranslationX and translationY: as an increment, these two properties control the position of the View object from the coordinates in the upper-left corner of its layout container.

Rotation, rotationX, and rotationY: these three properties control the 2D and 3D rotation of the View object around the fulcrum.

ScaleX and scaleY: these two properties control the 2D scaling of the View object around its fulcrum.

PivotX and pivotY: these two properties control the fulcrum position of the View object, and rotate and scale transformations around this fulcrum. By default, the location of this fulcrum is the center point of the View object.

X and y: these two simple and practical properties describe the final position of the View object in its container, which is the initial upper-left coordinates and the cumulative sum of translationX and translational values.

Alpha: represents the alpha transparency of the View object. The default value is 1 (opaque), and 0 means completely transparent (invisible).

According to the above, we know that the animation effects achieved by the view animation are basically included here.

So if an attribute does not have get or set methods, is attribute animation helpless? The answer is no. Google provides two solutions to solve this problem at the application layer. One is to add get and set methods to this property indirectly by defining a property class or wrapper class, or through ValueAnimator, as ValueAnimator said later. Let's first look at adding get and set methods to an attribute using the wrapper class. The code is as follows:

Private static class WrapperView {private View mTarget; public WrapperView (View mTarget) {this.mTarget = mTarget;} public int getWidth () {return mTarget.getLayoutParams () .width;} public void setWidth (int width) {mTarget.getLayoutParams (). Width = width; mTarget.requestLayout ();}}

With the above code, there is a layer wrapped with a property, and it is provided with get and set methods. You only need to manipulate the wrapper class to call the get and set methods indirectly. The code is as follows:

WrapperView wrapperView = new WrapperView (view); ObjectAnimator.ofInt (wrapperView, "width", 500) .setDuration (5000) .start ()

(2), PropertyValuesHolder

Similar to AnimationSet in view animation, in attribute animation, if you want to act on multiple animations for multiple attributes of the same object at the same time, you can use PropertyValuesHolder to achieve. For example, panning animation, if you change the zooming of the X and Y axes at the same time in the process of panning, you can achieve this, code:

PropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat ("translationX", 300); PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat ("scaleX", 1f, 0,1f); PropertyValuesHolder pvh4 = PropertyValuesHolder.ofFloat ("scaleY", 1f, 0,1f); ObjectAnimator.ofPropertyValuesHolder (pvh2, pvh3, pvh4) .setDuration (1000). Start ()

In the code, the use of PropertyValuesHolder object to control translationX, scaleX, scaleY these three attributes, the best call ObjectAnimator.ofPropertyValuesHolder method to achieve multi-attribute animation, the whole implementation method is very similar to the use of AnimatorSet.

(3), ValueAnimator

ValueAnimator occupies a very important position in attribute animation. Although it is not as dazzling as ObjectAnimator, it is the core of attribute animation. ObjectAnimator is also inherited from ValueAnimator.

Public final class ObjectAnimator extends ValueAnimator

ValueAnimator itself does not provide any animation effects, it is more like a numerical generator, used to generate regular numbers, so that the caller to control the animation process, the general use of ValueAnimator: usually in the ValueAnimator AnimatorUpdateListener to listen to the numerical transformation, to complete the animation transformation.

ValueAnimator valueAnimator = ValueAnimator.ofFloat (0100); valueAnimator.setTarget (imageView); valueAnimator.setDuration (1000). Start (); valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {Float value = (Float) animation.getAnimatedValue ();}})

(4) Monitoring of animation events

A complete animation has four processes: Start, Repeat, End, and Cancel. Interfaces are provided through Android to easily listen to these four events:

ObjectAnimator anim = ObjectAnimator.ofFloat (imageView, "alpha", 0.5F); anim.addListener (new Animator.AnimatorListener () {@ Override public void onAnimationStart (Animator animation) {} @ Override public void onAnimationEnd (Animator animation) {} @ Override public void onAnimationCancel (Animator animation) {} @ Override public void onAnimationRepeat (Animator animation) {}}); anim.start ()

Most of the time we only care about onAnimationEnd events, so Android also provides an AnimatorListenerAdapter for us to select the necessary events to listen to:

Anim.addListener (new AnimatorListenerAdapter () {@ Override public void onAnimationEnd (Animator animation) {super.onAnimationEnd (animation);}})

(* nimatorSet

For a single attribute to animate multiple attributes at the same time, you have previously used PropertyValuesHolder to achieve this effect. AnimatorSet can not only achieve this effect, but also achieve more accurate sequence control. Also implement the animation effect demonstrated by PropertyValuesHolder above. If you use AnimatorSet to achieve it, the code is as follows:

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat (imageView, "translationX", 300f); ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat (imageView, "scaleX", 1f, 0f, 1f); ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat (imageView, "scaleY", 1f, 0f, 1f); AnimatorSet animatorSet = new AnimatorSet (); animatorSet.setDuration (1000); animatorSet.playTogether (objectAnimator, objectAnimator1, objectAnimator2); animatorSet.start ()

In attribute animation, AnimatorSet controls the cooperative working mode of multiple animations through playTogether (), playSquentially (), animSet.play (). Width (), defore (), after () and other methods, so as to achieve accurate control of the animation playback order.

(6) use attribute animation in XML

Attribute animation, like view animation, can also be written directly in the XML file, code:

If you use XML to define attribute animation, the XML file must be placed under the res/animator/filename.xml folder before it can be recognized, otherwise it cannot be recognized. It is found that the attribute animation is similar to the view animation in the XML file. Use in a program:

Animator anim = AnimatorInflater.loadAnimator (this,R.animator.filename); anim.setTarget (view); anim.start ()

(7) animate method of View

After Android3.0, Google adds an animate method to View to drive the attribute animation directly, as follows:

ImageView.animate () .alpha (0) .y (300) .setDuration (300) .withStartAction (new Runnable () {@ Override public void run () {}}) .withEndAction (new Runnable () {@ Override public void run ()) {runOnUiThread (new Runnable () {@ Override public void run () {}}) }}) .start ()

3. Android layout animation

Layout animation refers to acting on ViewGroup, adding an animated transition effect when adding View to ViewGroup. The simplest layout animation is to open the layout animation in XML in ViewGroup using the following code:

Android:animateLayoutChanges= "true"

With the above settings, when ViewGroup is added to View, the sub-View will show a gradual transition effect, but this effect is the transition effect displayed by Android by default, and cannot be replaced with custom animation.

You can also customize the transition effect of a sub-View by using the LayoutAnimatorController class, and add a view animation to make the sub-View appear with a zoomed animation effect, code:

LinearLayout ll = (LinearLayout) findViewById (R.id.ll); ScaleAnimation sa = new ScaleAnimation (0,1,0,1); sa.setDuration (2000); / / set layout animation display LayoutAnimationController lac = new LayoutAnimationController (sa, 0.5f); / / set layout animation ll.setLayoutAnimation (lac)

The * parameters of LayoutAnimationController are the animation that needs to work, while the second parameter is the delay time displayed by each sub-View. When the delay time is not 0, you can set the order in which the child View is displayed.

/ / Sequential public static final int ORDER_NORMAL = 0; / / Random public static final int ORDER_REVERSE = 1; / / reverse public static final int ORDER_RANDOM = 2

4. Interpolators-- interpolator

Interpolator is a very important concept of animation. Through the interpolator Interpolators, you can define the animation transformation rate, which is very similar to the acceleration in physics. It mainly controls the change value of the target variable to change accordingly.

AccelerateDecelerateInterpolator changes slowly at the beginning of the animation and where introduced, and accelerates in the middle.

AccelerateInterpolator changes slowly at the beginning of the animation, and then starts to accelerate.

AnticipateInterpolator starts backwards and then forward.

AnticipateOvershootInterpolator starts backward and then throws a certain value forward to return the value of * *.

Pop up at the end of the BounceInterpolator animation

CycleInterpolator animation loops for a specific number of times, and the rate changes along the sinusoidal curve

DecelerateInterpolator is fast and then slow at the beginning of the animation

LinearInterpolator changes at a constant rate

OvershootInterpolator throws a certain value forward and then returns to its original position.

PathInterpolator path interpolator

On the Android full set of animation skills are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.