There may be problems with the CSDN picture, please see the original address:

www.jianshu.com/p/d98e79486…

Classification of animation

Android animations fall into three categories:

  1. TweenAnimation

    • TranslateAnimation
    • ScaleAnimation
    • RotateAnimation
    • AlphaAnimation

  2. FrameAnimation

  3. PropertyAnimation

PropertyAnimation PropertyAnimation

Let’s start with property animation, which is popular and recommended by Google.

The important differences between property animation and general View animation are: 1. Property animation controls real properties, but View animation only produces an animation, and does not change the properties of the control. 2. View animation can only control the properties of the View. Property animation can control all properties of the View, as long as the property has get/set methods.

For example, if we look at the ImageView source code, we can see that it has a private property called alpha, which means transparency, and a setAlpha()/getAlpha() method, so we can use the property animation to modify the ImageView alpha value to complete the animation.

So how does animation come about? The ValueAnimator class can use these three basic values to calculate a sequence of numbers that represent the animation’s progress. For example: alpha from 0 to 255. If the time is set to 255 seconds, ValueAnimator will generate values that change every second 1,0,1,2,3,4,5,6… , then set these values to the ImageView via setAlpha() to complete the animation. Of course this is a weird example, but I think it’s easier to understand.

So how do I put this into practice? Let’s look at an example:

ValueAnimator

This is the initial use of ValueAnimator. We use the ofFloat() method to set the starting x-coordinate, starting x+100, starting x-coordinate, which is an animation that moves 100px back and forth on the X-axis. The interval is 1000ms. Note that in order to associate the animation with the control (animation needs to be applied to the control), we need to add an AnimatorUpdateListener. This callback is used to generate a set of intermediate values. Then the animation is complete.

Finally, we print out the intermediate values in Log, so it is easier to understand that ValueAnimator is used to generate a sequence of values that change. Of course, the default linear interpolator is used here, and the rate of change is uniform. Other interpolators can also produce uneven results.

float fromX = ivLogo.getTranslationX(); ValueAnimator va = ValueAnimator.ofFloat(fromX, fromX + 100f, fromX); va.setDuration(1000); va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float v = (float) animation.getAnimatedValue(); ivLogo.setTranslationX(v); Log.d(TAG, "v:" + v); }}); va.start();Copy the code

Effect:

Printed Log:

D/ANIMATION: v: 0.0d /ANIMATION: v: 0.14258027d /ANIMATION: v: 0.53691864d /ANIMATION: v: 1.2311637d /ANIMATION: V :2.2070706 D/ANIMATION: v:3.3803642 D/ANIMATION: v:4.894352... D/ANIMATION: v:84.35657 D/ANIMATION: v:89.65131 D/ANIMATION: v:94.66184 D/ANIMATION: v: 100.0d /ANIMATION: V :94.66184 D/ANIMATION: v:89.651306 D/ANIMATION: v:84.35657... D/ANIMATION: v:6.679535 D/ANIMATION: V :4.894348 D/ANIMATION: v:3.380371 D/ANIMATION: v:2.2070618 D/ANIMATION: v:6.679535 D/ANIMATION: v:4.894348 D/ANIMATION: v:3.380371 D/ANIMATION: v:2.2070618 D/ANIMATION: V :1.2311707 D/ANIMATION: v:0.53691864 D/ANIMATION: v:0.14257813 D/ANIMATION: v:0.0Copy the code

With that in mind, we can move on to the next more useful class

ObjectAnimator

public final class ObjectAnimator extends ValueAnimator{... }Copy the code

ObjectAnimator is easier to use, because ValueAnimator also needs us to call back. ObjectAnimator does not need to write callback. We just tell it what properties, controls, ranges we want to set, and it does the animation for us.

Example:

float fromX = ivLogo.getTranslationX(); ObjectAnimator oa = ObjectAnimator.ofFloat(ivLogo, "translationX", fromX, fromX + 100f, fromX); oa.setDuration(300); oa.start(); oa.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); }});Copy the code

The effect is the same as using ValueAnimator, so no textures. A callback Listener is not required. A callback Listener is not required. You can delete this, but I’m adding it here just to show that if you want to listen for the end of the animation, the animation starts… And so in between, ObjectAnimator can do that. Just add the AnimatorListenerAdapter abstract class. In order not to implement all callback methods, we have added an abstract class to implement the AnimatorListener interface, so that we can override any method we want. We do not need to override all methods. This can also be interpreted as an adapter pattern in design mode. The original interface does not meet my requirements, and I need an adapter to complete the transformation

AnimatorSet

If you understand both of these, then this should make a lot of sense. An AnimatorSet is a collection of animations. We want to run several properties together, either in sequence or in any order.

ObjectAnimator oaScaleX = ObjectAnimator.ofFloat(ivLogo, "scaleX", 0, 1) ObjectAnimator oaScaleY = ObjectAnimator.ofFloat(ivLogo, "scaleY", 0, 1) ObjectAnimator oaRotation = ObjectAnimator.ofFloat(ivLogo, "rotation", 0, 360) ObjectAnimator oaAlpha = ObjectAnimator.ofFloat(ivLogo, "alpha", 1, 0) AnimatorSet as = new AnimatorSet() as.play(oaScaleX).with(oaScaleY).with(oaRotation) as.play(oaAlpha).after(oaRotation) as.setDuration(1000) as.addListener(new AnimatorListenerAdapter() { @Override public Void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation) ivlogo.setalpha (1.0f) log. d(TAG, "finish:" + ivLogo.getAlpha()) } }) as.start()Copy the code

First we construct 4 ObjectAnimator objects, deform along the X axis, deform along the Y axis, rotate, and transparence, then we execute the first 3 together, then perform gradient, and finally add an animation-ending callback that sets Alpha to 1 to indicate opacity, otherwise our control will not be visible.

Effect:

Configure the property animation using an XML file

Android will definitely allow you to configure animations using XML, so let’s see how:

Create a new animator folder under “res” and create an animation XML file:




    

    

    


Copy the code

Android :ordering=”sequentially”

Android :propertyName=”rotation” indicates the modified property value

Android :valueType=”floatType” indicates the attribute valueType

Everything else makes sense.

Then use it in your code:

Animator animator = AnimatorInflater.loadAnimator(PropertyActivity.this, R.animator.animator_1)
animator.setTarget(ivLogo)
animator.start()Copy the code

Effect:

Use interpolator

We know that ValueAnimator is used to generate intermediate values for animation properties, but the default value is uniform. The interpolator is used to make the intermediate sequence non-uniform. Here are some of the interpolators you can try, but I’m just going to show you the simplest ones:

Usage:

float fromX = ivLogo.getTranslationX()
ObjectAnimator oa = ObjectAnimator.ofFloat(ivLogo, "translationX", fromX, fromX + 100, fromX)
oa.setInterpolator(new BounceInterpolator())
oa.setDuration(1000)
oa.start()Copy the code

Interpolator(new BounceInterpolator());

Effect:

TweenAnimation TweenAnimation

If you understand the above property animation, then the tween animation should be better understood:

Create the Animation through code and XML configuration

btnAnimation.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Animation animation  = new TranslateAnimation(0, 200, 0, 200); animation.setDuration(1000); animation.setFillAfter(true); ivLogo.startAnimation(animation); }}); btnXml.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Animation animation = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.anim1); animation.setDuration(1000); animation.setFillAfter(true); ivLogo.startAnimation(animation); }}); ivLogo.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Log.d(TAG, "onClick"); }});Copy the code

anim1.xml




    


Copy the code

Add an onclick event to the ivLogo to show that the tween animation is not modifying the real properties of the view. If you click on the first animation, the position of ivLogo has deviated from the original position to (+200, +200), but if you still click on the original position of ivLog, it will still print “onClick”, so the position property of View is not changed. So the Tween animation does not modify the property value, but only the resulting animation effect.

Effect:

When learning Animation, you should pay more attention to some property Settings of Animation. If you are interested, you can refer to the official website.

FrameAnimation frame animation

The above two animations are related to controls, but the frame animation is simply an overlay of images. It works the same way as giFs or movies, because each frame passes too fast for our eyes to react so we think it’s animation.

anim_frame.xml



    
    
    
    
    
    

Copy the code
  1. The root element is animation-list
  2. Android :oneshot= “false” indicates that the animation is always looping

Code call:

btnStart.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ivWifi.setImageResource(R.drawable.anim_frame);
        AnimationDrawable animationDrawable = (AnimationDrawable) ivWifi.getDrawable();

        if (isRun) {
            animationDrawable.stop();
        } else {
            animationDrawable.start();
        }
        isRun = !isRun;
    }
});Copy the code

A global variable indicates whether the animation is executing and then changes state when the button is clicked.

Effect:

conclusion

The example code download links: download.csdn.net/detail/u013…

Android provides 3 kinds of animation, the future trend is still attribute animation, so don’t hesitate to delve into attribute animation!