Share three common Android animations

Share three common Android animations

 

Before Android3.0 (API Level11), Android only supports two types of animations: Frame-by-Frame Animation and Tween Animation ), after Android 3.0, Android supports a new Animation system called Property Animation ).

 

I. Frame Animation: (Frame-by-Frame Animation)

This is easy to understand. A frame-frame playing image uses the residual principle of human eyes to give us the feeling of animation. It works in the same way as GIF images and movies.

1. It is relatively simple to define a frame-by-frame animation, as long as it is used in The child element defines all the playback frames.

 

 

(1) android: oneshot sets whether to play only once

(2) android: drawable

(3) android: duration sets the switching interval between images

 

2. Set AnimationDrawable as the background of ImageView.

Android: background = @ anim/frame_anim

Then we can get the AnimationDrawable object in the java code.

AnimationDrawable anim = (AnimationDrawable) imageView. getBackground ();

(It should be noted that the animation drawable is not played by default. Call its start () method to start playing and stop playing)

 

3. the above animation file is configured through an xml file. If you like it, you can also create an AnimationDrawable object in java code, and then use addFrame (Drawable frame, int duration) method to add frames to the animation, and then start ()...

 

Ii. Tween Animation: (replenishment Animation)

The compensation animation only needs to specify the "Key Frame" for the start and end. Other frames in the change are calculated by the system and do not need to be defined by one frame.

1. Android uses Animation to represent abstract animations, including four sub-classes: AlphaAnimation (Transparency Animation), ScaleAnimation (scaling Animation), TranslateAnimation (displacement Animation), and RotateAnimation (Transparency Animation ). Android allows you to create an Animation class object in java. However, Animation resource files are usually used to define the Animation and separate the interface from the logic.

 

 

(A set can define multiple animations for execution at the same time .)

 

2. android: interpolator = @ android: anim/linear_interpolator controls the number of frames to be added during an animation. in simple words, it controls the animation speed. In some cases, it is translated as "interpolation". Interpolator has several implementation classes: LinearInterpolator, AccelerateInterpolator, AccelerateDecelerateInterpolator, CycleInterpolator, and DecelerateInterpolator. For details, refer to the official API Demo.

 

3. After defining the anim file, we can use the AnimationUtils tool class to load them. After loading successfully, an Animation is returned. Then you can run the animation through startAnimation (anim) of the View.

 

Animation anim = AnimationUtils. loadAnimation (this, R. anim. anim); // you can specify the anim status after the animation ends. setFillAfter (true); // set the interpolation effect anim. setInterpolator (interpolator); // execute an animated view on The view. startAnimation (anim );

 

3. Property Animation: (Property Animation)

Property animation, which was introduced in Android 3.0, can directly change the attributes of our objects. In the Tween Animation mentioned above, only the painting effect of the View is changed, and the actual attribute of the View is not changed. If you use a Tween animation to move a Button from the left to the right, no matter how you click the Button after the movement, it does not respond. When you click the position of the Button before moving, the response is triggered because the location attribute of the Button is changed. Property Animation can directly change the attribute value of the View object, which allows us to do less processing and improve efficiency and code readability.

(1) ValueAnimator: includes all the core functions of the Property Animation, such as the Animation time, start and end attribute values, and the calculation method of the corresponding time attribute values. There are two steps to apply ValueAnimator.

1. Calculate the property value.

2. Execute the corresponding action based on the property value, such as modifying a certain property of the object.

The main step is step 2. You need to implement the ValueAnimator. onUpdateListener interface. This interface has only one function, onAnimationUpdate (), which is used to do things that will change the attribute of the View object in this interface.

 

animation.addUpdateListener(new AnimatorUpdateListener() {    @Override    public void onAnimationUpdate(ValueAnimator animation) {        //do your work    }});

 

(2) ObjectAnimator: inherits from ValueAnimator. You must specify an object and an attribute of the object. When the calculation of the attribute value is complete, the object is automatically set to the corresponding attribute, this completes all two steps of Property Animation. In practice, ObjectAnimator is usually used to change a certain attribute of an object. However, ObjectAnimator has certain restrictions. To use ObjectAnimator, the following conditions must be met:

1. The object should have a setter function: set (Camper method)

2. In the following example, for a factory method like ofFloat, the first parameter is the object name, the second parameter is the attribute name, and the following parameter is a variable parameter. If values... If only one value is set for the parameter, it is assumed as the destination value. The change range of the attribute value is from the current value to the destination value. To obtain the current value, the object must have the getter method of the corresponding property: get

3 if the getter method is available, the type of the response value should be the same as the parameter type of the corresponding setter method.

 

ObjectAnimator oa=ObjectAnimator.ofFloat(tv, alpha, 0f, 1f);oa.setDuration(3000);oa.start();

 

If the above conditions are not met, we can only use ValueAnimator to create an animation.

 

(3) Animator. AnimatorListener: You can set an animation listener for Animator. You need to override the following four methods.

 

onAnimationStart()onAnimationEnd()onAnimationRepeat()onAnimationCancel()

 

Here, we can also implement the AnimatorListenerAdapter. The advantage is that we can only define the event we want to listen to, instead of every function, but only define an empty function body. As follows:

 

anim.addListener(new AnimatorListenerAdapter() {    public void on AnimationEnd(Animator animation){        //do your work    }});

 

(4) AnimationSet: Multiple animations can be combined to work together.

 

AnimatorSet bouncer = new AnimatorSet();bouncer.play(anim1).before(anim2);bouncer.play(anim2).with(anim3);bouncer.play(anim2).with(anim4)bouncer.play(anim5).after(amin2);animatorSet.start();

 

The above code indicates: First play anim1; then play anim2, anim3, anim4; then play anim5.

 

(5) TimeInterplator: similar to interpolator in Tween. There are several

AccelerateInterpolator acceleration, slow intermediate acceleration at the beginning

DecelerateInterpolator slows down, starts fast, and then slows down

AccelerateDecelerateInterolator accelerates and then slows down.

AnticipateInterpolator reversely, first changes to the opposite direction and then accelerates playback.

AnticipateOvershootInterpolator reversely adds a rebound, first changes to the opposite direction, and then accelerates the playback, which will go beyond the target value and then slowly move to the target value

BounceInterpolator jumps when it is approaching the destination value. For example, if the destination value is 100, the following values may be 90,100

CycleIinterpolator loop. The animation loops for a certain number of times. The value changes to a sine function: Math. sin (2 * mCycles * Math. PI * input)

LinearInterpolator linear, linear and even change

OvershottInterpolator rebounded, and then slowly changed to the target value after it finally exceeded the target value

TimeInterpolator: an interface that allows you to customize interpolator.

 

(6) Keyframes: Let's define the key frames except the start and end. KeyFrame is an abstract class. You must use ofInt (), ofFloat (), ofObject () to obtain the appropriate KeyFrame, and then use PropertyValuesHolder. ofKeyframe to obtain the PropertyValuesHolder object, as follows:

 

Keyframe kf0 = Keyframe.ofInt(0, 400);Keyframe kf1 = Keyframe.ofInt(0.25f, 200);Keyframe kf2 = Keyframe.ofInt(0.5f, 400);Keyframe kf4 = Keyframe.ofInt(0.75f, 100);Keyframe kf3 = Keyframe.ofInt(1f, 500);PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(width, kf0, kf1, kf2, kf4, kf3);ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(btn, pvhRotation);

The code above indicates: Set the width attribute value of the btn object so that it: Width = 400 at the start, Width = 1/4 at the start of the animation 200, Width = 1/2 at the start of the animation, width = 3/4 when the animation starts 100, and Width = 500 when the animation ends.

 

(7) ViewPropertyAnimator: it is recommended to change multiple attributes of a View at the same time. This class optimizes the multi-attribute animation and merges some invalidate () to reduce the refresh view. It is easy to use, but requires api level 12, that is, Android 3.1 or above. Only one line of code is required for horizontal and vertical movement.

 

myView.animate().translationX(50f). translationY(100f);

 

(8) attributes that need to be changed:

TranslationX, translationY: offset of the View relative to the original position

Rotation, rotationX, rotationY: rotation. rotation is used for 2D rotation angles. The last two values are used in 3D.

ScaleX, scaleY: scaling ratio

X, y: The final coordinate of the View, which is left of the View. The top position is added with translationX and translationY.

Alpha: Transparency

 

4. Summarize the advantages and disadvantages of the three types of animations:

(1) Frame Animation)It is mainly used to play images prepared at one frame, similar to gif images. It is easy to use and has the disadvantage that each frame must be prepared in advance;

(2) Tween Animation)You only need to define the start and end key frames, and the changed intermediate frame is supplemented by the system. The advantage is that you do not need to prepare each frame. The disadvantage is that only the object painting is changed, the View attributes are not changed. Therefore, if you change the button location, you still need to click the original button location.

(3) Property Animation)It is an animation launched after 3.0. It is easy to use, reduces implementation complexity, directly changes object attributes, and is almost applicable to any object rather than View classes, the disadvantage is that more than 3.0 of API support is required, with a large limit! However, there is an open-source Library outside China, which can provide support for earlier versions!