Android full set of animation usage tips

[Quoted from MrXI's blog] 1. Android View Animation Framework

The Animation framework defines several common animations such as transparency, rotation, scaling, and displacement, and controls the entire View. The implementation principle is that each time a view is drawn, the drawChild function in the ViewGroup where the View is located obtains the Transformation value of the View's Animation, and then calls canvas.concat(transformToApply.getMatrix()) to complete the animation frame through matrix operations. If it is not completed, the invalidate() function is called to start the next drawing to drive the animation, thereby completing the drawing of the entire animation.

View animation is easy to use and has rich effects. It provides four animation methods: AlphaAnimation, RotateAnimation, TranslateAnimation, and ScaleAnimation, and provides an animation set AnimationSet, which can mix and use multiple animations. Before Android 3.0, view animation was the only one, but with the introduction of the attribute animation framework after Android 3.0, its popularity has declined. Compared with attribute animation, a very big flaw of view animation is that it is not interactive. When an element undergoes view animation, its position in response to the event is still where it was before the animation, so view animation can only produce ordinary animation effects to avoid interaction. But its advantages are also very obvious, that is, it is relatively efficient and easy to use.

View animation is very easy to use. Not only can you describe an animation process through XML files, you can also use code to control the entire animation process.

(1) Transparency animation

A transform animation that adds transparency to a view.

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

(2) Rotation animation

Adds a rotation transform animation to the view.

 RotateAnimation ra = new RotateAnimation(0, 360, 100, 100); 
 
 ra.setDuration(1000); 
 
 view .startAnimation(ra);

Its parameters are the starting angle of rotation and the coordinates of the rotation center point. Of course, the reference system of the rotation animation can be controlled by setting parameters. Here, the reference system of the rotation animation is set to the center.

 RotateAnimation ra1 = new RotateAnimation(0, 360, RotateAnimation.RELATIVE_TO_SELF, 0.5F, RotateAnimation.RELATIVE_TO_SELF, 0.5F);

(3) Displacement animation

Added translation animation when the view moves.

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

(4) Zoom animation

Add animation effects to the scaling of views

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

Like the rotation animation, the scaling animation can also set the center point of Luo Fang, setting the center to the 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

Through AnimationSet, animation can be presented in a combined form:

 AnimationSet as = new AnimationSet( true ); 
 
 as .setDuration(1000); 
 
 AlphaAnimation aa = new AlphaAnimation(0, 1); 
 
 aa.setDuration(1000); 
 
 as .addAnimation(aa); 
 
 RotateAnimation ra = new RotateAnimation(0, 360, 100, 100); 
 
 ra.setDuration(1000); 
 
 as .addAnimation(ra); 
 
 TranslateAnimation ta = new TranslateAnimation(0, 200, 0, 300); 
 
 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 and run the code to see the effect!

For animation events, Android also provides corresponding listening callbacks, code:

 as .setAnimationListener(new Animation.AnimationListener() { 
 
 @Override 
 
 public void onAnimationStart(Animation animation) { 
 
 // animation starts 
 
 } 
 
 @Override 
 
 public void onAnimationEnd(Animation animation) { 
 
 //End of animation 
 
 } 
 
 @Override 
 
 public void onAnimationRepeat(Animation animation) { 
 
 // animation repeat 
 
 } 
 
 });

2. Attribute Animation

Because the existing animation framework Animation before Android 3.0 has some limitations - animation only changes the display and cannot respond to events. Therefore, after Android 3.0, Google proposed a new animation framework called attribute animation to achieve richer effects.

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

(1) ObjectAnimator

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

Next, imagine adding a translation animation to a Button. If you use the previous animation framework, the click event will not be triggered after translation. The effective click area is still the original location, and no click event will occur when you click the moved location. However, attribute animation is different. It actually changes the attributes of a View, so the event response area also changes. At this time, clicking the moved button will respond to the click event.

The property 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 to be manipulated must have get and set methods, otherwise ObjectAnimator will not work. The following are commonly used properties:

• translationX and translationY: These two properties control the position of the View object from the top-left corner of its layout container as an increment.
• rotation, rotationX, and rotationY: These three properties control the 2D and 3D rotation of the View object around the pivot.
• scaleX and scaleY: These two properties control the 2D scaling of the View object around its pivot point.
• pivotX and pivotY: These two properties control the pivot point of the View object, around which rotation and scaling transformations are performed. By default, the pivot point 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. It is the accumulation of the initial upper left corner coordinates and the translationX and translationY values.
• alpha: Indicates the alpha transparency of the View object. The default value is 1 (opaque), and 0 represents completely transparent (invisible).

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

So if an attribute does not have get and set methods, is the attribute animation helpless? The answer is no. Google provides two solutions to this problem at the application layer. One is to add get and set methods to this attribute indirectly by customizing an attribute class or wrapper class; or to implement it through ValueAnimator. ValueAnimator will be discussed in the following content. Let's first look at the method of using the wrapper class to add get and set methods to an attribute. 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();
 }
 }

Through the above code, a layer of wrapping is added to a property, and get and set methods are provided for it. When using it, you only need to manipulate the wrapper class to indirectly call the get and set methods. 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 property animation, if you want to apply multiple animations to multiple properties of the same object at the same time, you can use PropertyValuesHolder to achieve it. For example, if you want to change the scale of the X and Y axes at the same time during the translation process, you can do it like this:

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

In the code, the PropertyValuesHolder object is used to control the three properties of translationX, scaleX, and scaleY. The coolest method is to call the ObjectAnimator.ofPropertyValuesHolder method to realize the joint effect of multi-property 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 also inherits from ValueAnimator.

 public final class ObjectAnimator extends ValueAnimator

ValueAnimator itself does not provide any animation effects. It is more like a value generator that generates numbers with a certain pattern, so that the caller can control the implementation process of the animation. The general usage of ValueAnimator is: usually listen to the change of the value in the AnimatorUpdateListener of ValueAnimator to complete the animation change.

 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100); 
 
 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 animation events

A complete animation has four processes: Start, Repeat, End, and Cancel. Android provides an interface to easily monitor 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 the onAnimationEnd event, so Android also provides an AnimatorListenerAdapter to let us select the necessary events to listen to:

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

(***nimatorSet

For a property to have multiple property animation effects at the same time, we have used PropertyValuesHolder to achieve this effect. AnimatorSet can not only achieve this effect, but also achieve more precise sequence control. If we use AnimatorSet to achieve the same animation effect demonstrated above using PropertyValuesHolder, 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 uses methods such as playTogether(), playSquentially(), animSet.play().width(), defore(), and after() to control the collaborative working mode of multiple animations, thereby achieving precise control over the animation playback order.

(6) Using attribute animation in XML

Property animation is the same as view animation, and can also be written directly in the XML file. The code is as follows:

 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 <objectAnimator xmlns:android= "http://schemas.android.com/apk/res/android"   
 
 android:duration= "1000"   
 
 android:propertyName= "scaleX"   
 
 android:valueFrom= "1.0"   
 
 android:valueTo= "2.0"   
 
 android:valueType= "floatType" > 
 
 </objectAnimator>

Prerequisite: Use XML to define attribute animation. The XML file must be placed in the res/animator/filename.xml folder to be recognized. Otherwise, it cannot be recognized. It is found that the writing methods of attribute animation and view animation in XML files are very similar. Use in the program:

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

(7) View's animate method

After Android 3.0, Google added the animate method to View to directly drive attribute animation. The code is 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 is applied to ViewGroup, adding an animated transition effect when adding View to ViewGroup. The simplest layout animation is in the XML of ViewGroup, using the following code to turn on layout animation:

 android:animateLayoutChanges= "true"  

With the above settings, when ViewGroup is added to View, the child View will show a gradual display transition effect. However, this effect is the default display transition effect of Android and cannot be replaced by a custom animation.

You can also customize the transition effect of a sub-View by using the LayoutAnimatorController class and adding a view animation so that the sub-View appears with a scaling animation effect. The code is as follows:

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

The first parameter of LayoutAnimationController is the animation to be applied, and the second parameter is the delay time for each sub-View to be displayed. When the delay time is not 0, the order in which the sub-Views are displayed can be set.

 //order 
 
 public   static final int ORDER_NORMAL = 0; 
 
 //random 
 
 public   static final int ORDER_REVERSE = 1; 
 
 //Reverse order 
 
 public   static final int ORDER_RANDOM = 2;

4. Interpolators

Interpolators are a very important concept in animation. Through interpolators, the animation transformation rate can be defined, which is very similar to acceleration in physics. Its main function is to control the change value of the target variable to make corresponding changes.

• AccelerateDecelerateInterpolator changes the rate slowly at the beginning and introduction of the animation, and accelerates in the middle
• AccelerateInterpolator changes slowly at the beginning of the animation, then starts to accelerate
• AnticipateInterpolator starts backwards and then swings forward
• AnticipateOvershootInterpolator starts by going backwards and then forwards a certain value before returning the highest value.
• BounceInterpolator bounces when the animation ends
• CycleInterpolator The animation loops a specific number of times, with the rate changing along a sine curve.
• DecelerateInterpolator is fast at the beginning of the animation and then slows down
• LinearInterpolator changes at a constant rate
• OvershootInterpolator throws forward a certain value and then returns to the original position
• PathInterpolator

To be continued...

5. Open Source Code Library

*** I will share another code library that I have accumulated for a long time. There is nothing you can't think of and nothing you can't use. Welcome to star

https://github.com/xijiufu

Since the GitHub server is in the United States, sometimes the access is slow. We also provide an open source Chinese address library. The codes of the two repositories are updated synchronously:

http://git.oschina.net/xijiufu