directory

  • preface
  • Initial use of ObjectAnimator
  • AnimatorSet for animation blending
  • Write the animation in XML
  • The animation listener
  • ViewPropertyAnimator to fit
  • The last

preface

Official document portal

Property animation is very, very useful, and Google itself says it’s a powerful framework. Learn about it today.

Initial use of ObjectAnimator

The biggest feature of attribute animation is that it can make any Object move. I will give you a small chestnut first, so that you can feel it.

TextView tvTest = (TextView) findViewById(R.id.tv_test);
float curTranslationY = tvTest.getTranslationY();
ObjectAnimator animator
        = ObjectAnimator.ofFloat(tvTest, "translationY",
        curTranslationY, curTranslationY + 100f);
animator.setDuration(2000);
animator.start();
Copy the code

An important aspect of property animation is that after the animation, the control itself is actually transformed, not just drawn.

The first argument to the ofFloat() function is a control. The second argument can be filled in as many as possible, such as “alpha”, “rotation”. And then the next parameter is based on the second parameter, but it can be multiple, and it may not be very clear here, so let’s do a little chestnut.

TextView tvTest = (TextView) findViewById(R.id.tv_test);
ObjectAnimator animator
        = ObjectAnimator.ofFloat(tvTest, "alpha",
        1f, 0f, 1f, 0f, 1f, 0f, 1f);
animator.setDuration(2000);
animator.start();
Copy the code

AnimatorSet for animation blending

Generally speaking, the animation that makes people feel comfortable is not a single transformation animation, but a mixture of animation, to achieve some effect. I’m going to try to mix things up a little bit and show you a couple of animations.

// Move verticallyfloat curTranslationY = tvTest.getTranslationY();
ObjectAnimator translationY
        = ObjectAnimator.ofFloat(tvTest, "translationY",
        curTranslationY, curTranslationY + 500f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(tvTest, "scaleY", 1f, 5f, 1f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(tvTest, "scaleX", 1f, 5f, 1f);

AnimatorSet animSet = new AnimatorSet();
animSet.play(scaleY).with(scaleX).after(translationY);
animSet.setDuration(2000);
animSet.start();
Copy the code

This is a mix of vertical motion animation, horizontal scaling, and vertical scaling, and I’m sure you can see the play(), with(), after() functions.

  • After (Animator anim) Animations in After are executed first, before animations in Play.
  • After (long delay) Set the time in after, then the animation in Play will be delayed according to the time.
  • Before (Animator anim) before is executed, play is executed first.
  • Animations in With (Animator anim) play are executed together with animations in with.
  • PlayTogether () allows all animations to be executed together, not after(), before(). Have a little chestnut.
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(translationY, scaleX, scaleY);
animSet.setDuration(2000);
animSet.start();
Copy the code

Write the animation in XML

The benefits of writing in XML are self-evident and highly reusable. Direct paste code, very easy to understand.

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="1000"
        android:propertyName="translationY"
        android:valueFrom="0"
        android:valueTo="500"
        android:valueType="floatType" />

    <set android:ordering="sequentially">
        <objectAnimator
            android:duration="1000"
            android:propertyName="rotation"
            android:valueFrom="0"
            android:valueTo="360"
            android:valueType="floatType" />

        <set android:ordering="together">
            <objectAnimator
                android:duration="1000"
                android:propertyName="scaleX"
                android:valueFrom="1"
                android:valueTo="5"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="1000"
                android:propertyName="scaleY"
                android:valueFrom="1"
                android:valueTo="5"
                android:valueType="floatType" />
        </set>
    </set>
</set>
Copy the code

Then invoke the XML animation with the following code.

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.anim_set);
set.setTarget(tvTest);
set.start();
Copy the code

The animation listener

Animation monitor is very important to know, we are making software, not movie, can not let it continue to play. Let’s start with a fuller wiretap.

translationY.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) {

    }
});
Copy the code

This is very troublesome, so there are adapted version of the monitor. If you use Android Studio it will pop up a box for you to choose.

translationY.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); }});Copy the code

ViewPropertyAnimator to fit

ViewPropertyAnimator was introduced in android3.0 and ViewPropertyAnimator was introduced in android 3.1.

tvTest.animate().translationY(curTranslationY + 500)
        .scaleX(5).scaleY(5)
        .setDuration(1000);
Copy the code

The purpose of ViewPropertyAnimator is to simplify code and implement it quickly. If you want to handle some complex animations, you should take your time with them as described in the previous article. Let’s modify the code a little bit and see what happens.

tvTest.animate().translationYBy(250)
        .scaleX(5).scaleY(5)
        .setDuration(1000);
Copy the code

So if you look at the function, if you don’t add By it means you move something, if you add By it means you move something. Ok, let’s look at one more classic code that perfectly demonstrates the simplicity of ViewPropertyAnimator:

View.animate ()// Get ViewPropertyAnimator. SetDuration (5000) // transparence.alpha (0).alphaby (0) // Rotation (360) .rotationBy(360).rotationX(360).rotationXby (360).rotationy (360).rotationyby (360) // scale.scalex (1).scalexby (1) .scaley (1).scaleyby (1) // translationX(100).translationxby (100).translationy (100).translationyby (100) .translationz (100).translationzby (100) // Change the coordinates on screen.x(10).xby (10).y(10).yby (10).z(10).zby (10) // interpolator SetInterpolator (new BounceInterpolator ()). / / the springback setInterpolator (new AccelerateDecelerateInterpolator ()) / / haste and slow .setinterpolator (new AccelerateInterpolator())// acceleration. SetInterpolator (new interpolator ())// deceleration .setinterpolator (new LinearInterpolator())// Linear // animation delay.setStartDelay(1000) // Whether hardware acceleration is enabled.withLayer() // Listener .setListener(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) {
            }
        })

        .setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
            }
        })

        .withEndAction(new Runnable() {
            @Override
            public void run() {
            }
        })
        .withStartAction(new Runnable() {
            @Override
            public void run() {}});Copy the code

So it’s enough for everyday animation.

The last

With property animation, the interface is less rigid. And because of the properties of animation, so that it can complete the animation part of the matter, even can complete a lot of interface interaction on the matter. Like remember to like or follow me oh.