欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Android属性动画基础篇

程序员文章站 2022-03-16 14:36:50
...

1、什么是属性动画

  • 简单来说就是通过改变对象属性而形成的动画效果。

2、为什么使用属性动画

我们知道，在属性动画之前，Android 提供了视图动画（view Animation），而视图动画又分为帧动画（Frame Animation）和补间动画（Tween Animation）。帧动画就像我们看的影片一样，是一系列图片连贯起来播放形成的动画；补间动画是在针对 view 的一些操作，比如：平移、透明度、旋转、缩放。既然有了视图动画，我们为什么还要使用属性动画？原因很简单，因为它牛逼啊。为什么说它牛逼，因为它突破了视图动画的种种局限性。下面我们来看看视图动画都有哪些局限性？

  • 视图动画的作用对象是 view。也就是说，我们只能对view对象做动画。
  • 视图动画效果只有上面说到的平移、透明度、旋转、缩放效果。
  • 视图动画只有视觉效果，无法改变对象的属性。

首先，视图动画只对 view 对象起作用，比如 Button。虽然我们平时能看到的都是界面都是 view 组成的，但是背后可能需要改变的是非 view 对象的属性。比如一个圆的圆心坐标对象。然后，视图动画的效果有限，如果我们想实现复杂的效果，可能就无能为力了。比如，我们想让一个对象的颜色由红色渐渐变为黄色，这中间是一个动画过程，视图动画是帮我们实现不了的。最后，视图动画只有视觉效果，无法改变对象属性，这会使我们在开发中出现很多麻烦。比如，我们移动了一个按钮，按钮位置的移动只是视觉上的，实际上按钮还在原来的位置，这个时候我们点它移动后的位置，点击事件是不生效的。上面的种种局限性导致了属性动画的诞生。Android 在3.0之后提供了属性动画。

3、属性动画内容

  • 基本用法：ViewPropertyAnimator、ValueAnimator、ObjectAnimator等核心类用法。
  • 高级用法：插值器和估值器

4、基本用法

4.1、ViewPropertyAnimator

ViewPropertyAnimator 是属性动画中专门针对 view 的类，使用起来也很简单，一行代码基本可以搞定。因为简单，所以，我们从它开始。现在我们简单写个demo：布局很简单，一个图片一个按钮，点击按钮，图片执行动画。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:src="@drawable/monkey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />

    <Button
        android:text="ViewPropertyAnimator平移"
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
     />
</android.support.constraint.ConstraintLayout>
复制代码

代码更简单，我们依次执行了平移、旋转、缩小、透明度，每个动画一行搞定：

@OnClick(R.id.button)
public void onViewClicked() {
    button.setText("ViewPropertyAnimator平移");
    switch (count) {
        case 0:
            image.animate().translationX(300).setDuration(1000);
            button.setText("ViewPropertyAnimator旋转");
            break;
        case 1:
            image.animate().rotation(180);
            button.setText("ViewPropertyAnimator缩小");
            break;
        case 2:
            image.animate().scaleX(0.5f).scaleY(0.5f);
            button.setText("ViewPropertyAnimator透明度");
            break;
        case 3:
            image.animate().alpha(0.5f);
            break;
        default:

            break;
    }
    count++;
}
复制代码

可以看出我们先用 image.animate()方法获取 ViewPropertyAnimator 对象，然后执行具体的动画方法。我们看看 ViewPropertyAnimator 类都提供了哪些方法，分别又对应 view 中的哪些方法：

可以看到，每个动画 ViewPropertyAnimator 都提供了两个方法，其中一个都带有 -By 后缀。这两个方法有什么区别呢？ 带有-By后缀的都是增加的意思，比如说：translationX（100）是把 translationX 的值渐变为100，而 translationXBy（100）是把 translationX 的值渐渐增加100。这样就容易理解了。另外我们可以使用setListener()方法设置监听动画的开始、结束、重复、取消操作；也可以通过setUpdateListener（）方法获取动画过程中的每个对象。这点和后面要说的 ObjectAnimator 和 ValueAnimator 不太一样。当我们只是对view对象做一些简单的动画的时候，我们可以选择 ViewPropertyAnimator 类。

4.2、ValuetAnimator

valueAnimator 可以说是动画机制的核心类，后面的 ObjectAnimator 也是它的子类。属性动画是改变一个属性值，从一个初始值变化到一个结果值。ValueAnimator 控制了这个过程，而且根据整个过程的时间比例，不同的时间点赋给对象不同的属性值。ValueAnimator 主要有三个方法：

  • ofInt(int... values)
  • ofFloat(float... values)
  • ofObject(TypeEvaluator evaluator, Object... values)

用法也简单：

ValueAnimator animator = ValueAnimator.ofInt(0,10);
animator.setDuration(300);
animator.start();
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator value：" + animation.getAnimatedValue());
        }
    });
复制代码

这三个方法都是静态方法，可以直接调用，传入我们的参数值，注意，这个参数值是一个数组，就是我们可以传入多个对象。这里我们调用ofInt方法，传入0和10，就是值从0到10的变化过程。我们可以通过addUpdateListener()方法获取整个变化过程，打印出变化过程中的值：

可以看出，这是一个从0到10的变化过程。当然，我们可以传入多个值，这样就是一个依次变化的过程。另外两个方法和这个方法使用类似，其中ofObject(TypeEvaluator evaluator, Object... values)方法用到了估值器，我们放到后面单独总结，这里先说基础用法。

4.3、ObjectAnimator

ValueAnimator是动画机制最核心的类，但却不是我们使用最多的类，和我们打交道最多的是ObjectAniamtor。它是ValueAnimator的子类，但是提供了更丰富的功能。我们可以使用它对任意对象的任意属性进行操作。我们看看它的ofFloat（）方法怎么使用：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:src="@drawable/monkey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

    <Button
        android:text="点我啊"
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
    />
</android.support.constraint.ConstraintLayout>

布局文件同上面一样，一个按钮，一个图片，点击按钮，图片执行动画。按钮的点击事件如下：

@OnClick(R.id.button)
public void onViewClicked() {
    switch (count) {
        case 0:
            button.setText("透明度变化");
            ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(image,"alpha",1f,0f,1f);
            objectAnimator.setDuration(3000);
            objectAnimator.start();
            break;
        case 1:
            button.setText("平移");
            ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(image,"translationX",0,500,0);
            objectAnimator2.setDuration(5000);
            objectAnimator2.start();
            break;
    }
    count++;
}
复制代码

ObjectAnimator类的ofFloat（）方法和 ValueAnimator不一样，第一个参数是我们要操作的对象，第二个参数是对象的属性，后面是一个数组，是这个属性的变化过程。首先，我们让图片的透明度从1到0再到1；然后让图片平移500像素再平移回来：

这里我们做的动画还是view常见的透明度和平移操作。这些动画好像没体现出来属性动画比视图动画的优势，我们自定义一个view，看看ObjectAnimator类对于对象属性的操作。

public class CircleView extends View {
    private float angle;
    private float strokeWidth = 30;
    private RectF rectF = new RectF();
    private float radius = 200;
    private Paint paint;
    
    public float getAngle() {
        return angle;
    }

    public void setAngle(float angle) {
        this.angle = angle;
        invalidate();
    }

    public CircleView(Context context) {
        this(context,null);
    }

    public CircleView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CircleView(Context context, AttributeSet attrs, int       defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float centerX = getWidth() / 2;
        float centerY = getHeight() / 2;
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        canvas.drawCircle(centerX,centerY,200,paint);

        paint.setColor(Color.RED);
        paint.setStrokeCap(Paint.Cap.ROUND);
        rectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(rectF, 180, angle, false, paint);
    }
}
复制代码

我们定义了一个类CircleView，这个view先画了一个黑色的圆环，再根据一个属性angle画一个红色的圆弧，我们使用ObjectAnimator动态控制angle值，不断重绘，形成一个动画效果：

@OnClick(R.id.button)
public void changeRadius() {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(circleView,"angle",0,270,0);
    objectAnimator.setDuration(5000);
    objectAnimator.start();
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Log.d("tag","ValueAnimator: " + animation.getAnimatedValue());
        }
    });
}
复制代码

这是我们ObjectAnimator类相关的操作。ofFloat()方法传入了一个CircleView对象，传入angle参数，弧度从0到270再到0度。我们看看效果：

我们通过不断修改angle的属性值，形成了一个简单的动画。这里的属性可以传入对象的任意属性，前提是这个属性有get（）方法。因为ObjectAnimator类是通过get（）方法获取到属性并操作的。所以，当我们想通过ObjectAnimator类改变一个属性的时候，我们需要给这个属性提供get（）方法。

使用xml定义动画

属性动画和补间动画一样，也可以通过xml定义动画。使用xml定义动画，比直接写在代码里麻烦一点，但更方便我们重用。首先，我们在res文件夹下建立animator文件夹，我们定义的xml放在这个文件夹下。有三种标签：

  • animator

  • objectAnimator

  • set

参数值我们都能看明白是什么意思，然后我们在代码中调用：

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);  
animator.setTarget(view);  
animator.start();
复制代码

4.4、AnimatorSet组合动画

组合动画就是几个动画组合起来使用，我们使用AnimatorSet类来实现。系统提供了几个方法控制动画执行顺序：

  • after（Animator animator）现有动画在传入动画后执行
  • before(Animator animator) 现有动画在传入动画前执行
  • with(Animator animator) 两个动画同时执行

这篇文章介绍了属性动画的基础用法，后面我们将说说属性动画的高级用法：插值器和估值器。当我们想实现酷炫细致的动画时，它们会给我们很大的帮助。

转载于:https://juejin.im/post/5a7fef235188257a642696ff

上一篇： Android 动画（二）-Drawable Animation（Frame Animation）、Property Animation

下一篇： Android样式基础--属性动画((Property Animation)篇

推荐阅读