Android 属性动画详解

最新推荐文章于 2022-07-28 19:04:38 发布
最新推荐文章于 2022-07-28 19:04:38 发布
阅读量410 收藏 1
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010852160/article/details/80940519
版权

1. 属性动画出现的原因

逐帧动画 & 补间动画存在一定的缺点：

a. 作用对象局限：View

即补间动画 只能够作用在View上，只可以对一个Button甚至是LinearLayout、或者其它继承自View的组件进行动画操作，但无法对非View的对象进行动画操作

  1. 有些情况下的动画效果只是视图的某个属性 & 对象而不是整个视图；
  2. 如实现视图的颜色动态变化，那么就需要操作视图的颜色属性从而实现动画效果，而不是针对整个视图进行动画操作
b. 没有改变View的属性，只是改变视觉效果
  • 补间动画只是改变了View的视觉效果，而不会真正去改变View的属性。
  • 将屏幕左上角的按钮 通过补间动画 移动到屏幕的右下角
  • 点击当前按钮位置（屏幕右下角）是没有效果的，因为实际上按钮还是停留在屏幕左上角，补间动画只是将这个按钮绘制到屏幕右下角，改变了视觉效果而已。
c. 动画效果单一
  • 补间动画只能实现平移、旋转、缩放 & 透明度这些简单的动画需求
  • 一旦遇到相对复杂的动画效果，即超出了上述4种动画效果，那么补间动画则无法实现。

即在功能 & 可扩展性有较大局限性

2. 工作原理

  • 在一定时间间隔内，通过不断对值进行改变，并不断将该值赋给对象的属性，从而实现该对象在该属性上的动画效果

可以是任意对象的任意属性

  • 具体的工作原理逻辑如下：

  • 从上述工作原理可以看出属性动画有两个非常重要的类：ValueAnimator 类和ObjectAnimator 类
  • 其实属性动画的使用基本都是依靠这两个类
  • 插值器（Interpolator）和估值器（TypeEvaluator）是实现 复杂动画效果的关键

3. 插值器

1.1 简介

  • 定义：一个接口
  • 作用：设置 属性值 从初始值过渡到结束值 的变化规律 ,是个变化的趋势
    1. 如匀速、加速 & 减速 等等 
    2. 即确定了 动画效果变化的模式，如匀速变化、加速变化 等等

1.2 应用场景

实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

1.3 具体使用

a. 设置方式

插值器在动画的使用有两种方式：在XML / Java代码中设置：

设置方法1：在 动画效果的XML代码中设置插值器属性android:interpolator

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/overshoot_interpolator"
    // 通过资源ID设置插值器
    android:duration="3000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="2"
    android:toYScale="2" />

设置方法2：在 Java 代码中设置

Button mButton = (Button) findViewById(R.id.Button);
        // 步骤1:创建 需要设置动画的 视图View

Animation alphaAnimation = new AlphaAnimation(1,0);
        // 步骤2：创建透明度动画的对象 & 设置动画效果

        alphaAnimation.setDuration(3000);
        Interpolator overshootInterpolator = new OvershootInterpolator();
        // 步骤3：创建对应的插值器类对象

        alphaAnimation.setInterpolator(overshootInterpolator);
        // 步骤4：给动画设置插值器

        mButton.startAnimation(alphaAnimation);
        // 步骤5：播放动画
  • 那么使用插值器时的资源ID是什么呢？即有哪些类型的插值器可供我们使用呢？
  • 下面将介绍 Android内置默认的插值器
b. 系统内置插值器类型
  • Android内置了 9 种内置的插值器实现：
作用资源ID对应的Java类
动画加速进行@android:anim/accelerate_interpolatorAccelerateInterpolator
快速完成动画，超出再回到结束样式@android:anim/overshoot_interpolatorOvershootInterpolator
先加速再减速@android:anim/accelerate_decelerate_interpolatorAccelerateDecelerateInterpolator
先退后再加速前进@android:anim/anticipate_interpolatorAnticipateInterpolator
先退后再加速前进，超出终点后再回终点@android:anim/anticipate_overshoot_interpolatorAnticipateOvershootInterpolator
最后阶段弹球效果@android:anim/bounce_interpolatorBounceInterpolator
周期运动@android:anim/cycle_interpolatorCycleInterpolator
减速@android:anim/decelerate_interpolatorDecelerateInterpolator
匀速@android:anim/linear_interpolatorLinearInterpolator

使用时：

  • 当在XML文件设置插值器时，只需传入对应的插值器资源ID即可

  • 当在Java代码设置插值器时，只需创建对应的插值器对象即可

    系统默认的插值器是AccelerateDecelerateInterpolator，即先加速后减速

  • 系统内置插值器的效果图： 
    效果图

  • 使用Android内置的插值器能满足大多数的动画需求

  • 如果上述9个插值器无法满足需求，还可以自定义插值器
  • 下面将介绍如何自定义插值器（Interpolator）
c. 自定义插值器
  • 本质：根据动画的进度（0%-100%）计算出当前属性值改变的百分比
  • 具体使用：自定义插值器需要实现 Interpolator / TimeInterpolator接口 & 复写getInterpolation（） 
    1. 补间动画 实现 Interpolator接口；属性动画实现TimeInterpolator接口 
    2. TimeInterpolator接口是属性动画中新增的，用于兼容Interpolator接口，这使得所有过去的Interpolator实现类都可以直接在属性动画使用

// Interpolator接口
public interface Interpolator {  

    // 内部只有一个方法
     float getInterpolation(float input) {  
         // 参数说明
         // input值值变化范围是0-1，且随着动画进度（0% - 100% ）均匀变化
        // 即动画开始时，input值 = 0；动画结束时input = 1
        // 而中间的值则是随着动画的进度（0% - 100%）在0到1之间均匀增加

      ...// 插值器的计算逻辑

      return xxx；
      // 返回的值就是用于估值器继续计算的fraction值，下面会详细说明
    }  

// TimeInterpolator接口
// 同上
public interface TimeInterpolator {  

    float getInterpolation(float input);  

}

在学习自定义插值器前，我们先来看两个已经实现好的系统内置差值器：

  • 匀速插值器：LinearInterpolator
  • 先加速再减速 插值器：AccelerateDecelerateInterpolator
// 匀速差值器：LinearInterpolator
@HasNativeInterpolator  
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {  
   // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return input;  
        // 没有对input值进行任何逻辑处理，直接返回
        // 即input值 = fraction值
        // 因为input值是匀速增加的，因此fraction值也是匀速增加的，所以动画的运动情况也是匀速的，所以是匀速插值器
    }  


// 先加速再减速 差值器：AccelerateDecelerateInterpolator
@HasNativeInterpolator  
public class AccelerateDecelerateInterpolator implements Interpolator, NativeInterpolatorFactory {  
      // 仅贴出关键代码
  ...
    public float getInterpolation(float input) {  
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
        // input的运算逻辑如下：
        // 使用了余弦函数，因input的取值范围是0到1，那么cos函数中的取值范围就是π到2π。
        // 而cos(π)的结果是-1，cos(2π)的结果是1
        // 所以该值除以2加上0.5后，getInterpolation()方法最终返回的结果值还是在0到1之间。只不过经过了余弦运算之后，最终的结果不再是匀速增加的了，而是经历了一个先加速后减速的过程
        // 所以最终，fraction值 = 运算后的值 = 先加速后减速
        // 所以该差值器是先加速再减速的
    }  


    }

  • 从上面看出，自定义插值器的关键在于：对input值 根据动画的进度（0%-100%）通过逻辑计算 计算出当前属性值改变的百分比
  • 下面我将用一个实例来说明该如何自定义插值器

实例

  • 目的：写一个自定义Interpolator：先减速后加速

步骤1：根据需求实现Interpolator接口 
DecelerateAccelerateInterpolator.java

/**
 * Created by Carson_Ho on 17/4/19.
 */

public class DecelerateAccelerateInterpolator implements TimeInterpolator {

    @Override
    public float getInterpolation(float input) {
        float result;
        if (input <= 0.5) {
            result = (float) (Math.sin(Math.PI * input)) / 2;
            // 使用正弦函数来实现先减速后加速的功能，逻辑如下：
            // 因为正弦函数初始弧度变化值非常大，刚好和余弦函数是相反的
            // 随着弧度的增加，正弦函数的变化值也会逐渐变小，这样也就实现了减速的效果。
            // 当弧度大于π/2之后，整个过程相反了过来，现在正弦函数的弧度变化值非常小，渐渐随着弧度继续增加，变化值越来越大，弧度到π时结束，这样从0过度到π，也就实现了先减速后加速的效果
        } else {
            result = (float) (2 - Math.sin(Math.PI * input)) / 2;
        }
        return result;
        // 返回的result值 = 随着动画进度呈先减速后加速的变化趋势
    }
  • }

2. 估值器（TypeEvaluator）

2.1 简介

  • 定义：一个接口
  • 作用：设置 属性值 从初始值过渡到结束值 的变化具体数值 
    1. 插值器（Interpolator）决定 值 的变化规律（匀速、加速blabla），即决定的是变化趋势；而接下来的具体变化数值则交给 
      而估值器 
    2. 属性动画特有的属性

2.2 应用场景

协助插值器 实现非线性运动的动画效果

非线性运动：动画改变的速率不是一成不变的，如加速 & 减速运动都属于非线性运动

2.3 具体使用

a. 设置方式
ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator()，1，3);
// 在第4个参数中传入对应估值器类的对象
// 系统内置的估值器有3个：
// IntEvaluator：以整型的形式从初始值 - 结束值 进行过渡
// FloatEvaluator：以浮点型的形式从初始值 - 结束值 进行过渡
// ArgbEvaluator：以Argb类型的形式从初始值 - 结束值 进行过渡
b. 自定义估值器

  • 本质：根据 插值器计算出当前属性值改变的百分比 & 初始值 & 结束值 来计算 当前属性具体的数值

    如：动画进行了50%（初始值=100，结束值=200 ），那么匀速插值器计算出了当前属性值改变的百分比是50%，那么估值器则负责计算当前属性值 = 100 + （200-100）x50% = 150.

  • 具体使用：自定义估值器需要实现 TypeEvaluator接口 & 复写evaluate()

public interface TypeEvaluator {  

    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：插值器getInterpolation（）的返回值
// startValue：动画的初始值
// endValue：动画的结束值

        ....// 估值器的计算逻辑

        return xxx；
        // 赋给动画属性的具体数值
        // 使用反射机制改变属性变化

// 特别注意
// 那么插值器的input值 和 估值器fraction有什么关系呢？
// 答：input的值决定了fraction的值：input值经过计算后传入到插值器的getInterpolation（），然后通过实现getInterpolation（）中的逻辑算法，根据input值来计算出一个返回值，而这个返回值就是fraction了
    }  
}
  • 我们先来看一个已经实现好的系统内置估值器：浮点型：FloatEvaluator
public class FloatEvaluator implements TypeEvaluator {  
// FloatEvaluator实现了TypeEvaluator接口

// 重写evaluate()
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
// 参数说明
// fraction：表示动画完成度（根据它来计算当前动画的值）
// startValue、endValue：动画的初始值和结束值
        float startFloat = ((Number) startValue).floatValue();  

        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);  
        // 初始值 过渡 到结束值 的算法是：
        // 1. 用结束值减去初始值，算出它们之间的差值
        // 2. 用上述差值乘以fraction系数
        // 3. 再加上初始值，就得到当前动画的值
    }  
}
  • 属性动画中的ValueAnimator.ofInt（） & ValueAnimator.ofFloat（）都具备系统内置的估值器，即FloatEvaluator & IntEvaluator 
    即系统已经默认实现了  如何从初始值 过渡到 结束值 的逻辑
  • 但对于ValueAnimator.ofObject（），从上面的工作原理可以看出并没有系统默认实现，因为对对象的动画操作复杂 & 多样，系统无法知道如何从初始对象过度到结束对象
  • 因此，对于ValueAnimator.ofObject（），我们需自定义估值器（TypeEvaluator）来告知系统如何进行从 初始对象 过渡到 结束对象的逻辑
  • 自定义实现的逻辑如下
// 实现TypeEvaluator接口
public class ObjectEvaluator implements TypeEvaluator{  

// 复写evaluate（）
// 在evaluate（）里写入对象动画过渡的逻辑
    @Override  
    public Object evaluate(float fraction, Object startValue, Object endValue) {  
        // 参数说明
        // fraction：表示动画完成度（根据它来计算当前动画的值）
        // startValue、endValue：动画的初始值和结束值

        ... // 写入对象动画过渡的逻辑

        return value;  
        // 返回对象动画过渡的逻辑计算后的值
    }

实例说明

  • 下面我将用实例说明 该如何自定义TypeEvaluator接口并通过ValueAnimator.ofObject（）实现动画效果

  • 实现的动画效果：一个圆从一个点 移动到 另外一个点 
    效果图

  • 工程目录文件如下： 
    工程目录

步骤1：定义对象类

  • 因为ValueAnimator.ofObject（）是面向对象操作的，所以需要自定义对象类。
  • 本质其实还是操作的值，只是把一个动画期间变化的所有属性值都定义到一个对象类里，方便同时操作多个属性值
  • 本例需要操作的对象是 圆的点坐标 
    Point.java

public class Point {

    // 设置两个变量用于记录坐标的位置
    private float x;
    private float y;

    // 构造方法用于设置坐标
    public Point(float x, float y) {
        this.x = x;
        this.y = y;
    }

    // get方法用于获取坐标
    public float getX() {
        return x;
    }

    public float getY() {
        return y;
    }
}

步骤2：根据需求实现TypeEvaluator接口

  • 实现TypeEvaluator接口的目的是自定义如何 从初始点坐标 过渡 到结束点坐标；
  • 本例实现的是一个从左上角到右下角的坐标过渡逻辑。 
    效果图

PointEvaluator.java

// 实现TypeEvaluator接口
public class PointEvaluator implements TypeEvaluator {

    // 复写evaluate（）
    // 在evaluate（）里写入对象动画过渡的逻辑
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        // 将动画初始值startValue 和 动画结束值endValue 强制类型转换成Point对象
        Point startPoint = (Point) startValue;
        Point endPoint = (Point) endValue;

        // 根据fraction来计算当前动画的x和y的值
        float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
        float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());

        // 将计算后的坐标封装到一个新的Point对象中并返回
        Point point = new Point(x, y);
        return point;
    }

}

  • 上面步骤是根据需求自定义TypeEvaluator的实现
  • 下面将讲解如何通过对 Point 对象进行动画操作，从而实现整个自定义View的动画效果。

步骤3：将属性动画作用到自定义View当中

MyView.java

/**
 * Created by Carson_Ho on 17/4/18.
 */
public class MyView extends View {
    // 设置需要用到的变量
    public static final float RADIUS = 70f;// 圆的半径 = 70
    private Point currentPoint;// 当前点坐标
    private Paint mPaint;// 绘图画笔


    // 构造方法(初始化画笔)
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
    }

    // 复写onDraw()从而实现绘制逻辑
    // 绘制逻辑:先在初始点画圆,通过监听当前坐标值(currentPoint)的变化,每次变化都调用onDraw()重新绘制圆,从而实现圆的平移动画效果
    @Override
    protected void onDraw(Canvas canvas) {
        // 如果当前点坐标为空(即第一次)
        if (currentPoint == null) {
            currentPoint = new Point(RADIUS, RADIUS);
            // 创建一个点对象(坐标是(70,70))

            // 在该点画一个圆:圆心 = (70,70),半径 = 70
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);


 // (重点关注)将属性动画作用到View中
            // 步骤1:创建初始动画时的对象点  & 结束动画时的对象点
            Point startPoint = new Point(RADIUS, RADIUS);// 初始点为圆心(70,70)
            Point endPoint = new Point(700, 1000);// 结束点为(700,1000)

            // 步骤2:创建动画对象 & 设置初始值 和 结束值
            ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
            // 参数说明
            // 参数1：TypeEvaluator 类型参数 - 使用自定义的PointEvaluator(实现了TypeEvaluator接口)
            // 参数2：初始动画的对象点
            // 参数3：结束动画的对象点

            // 步骤3：设置动画参数
            anim.setDuration(5000);
            // 设置动画时长

// 步骤3：通过 值 的更新监听器，将改变的对象手动赋值给当前对象
// 此处是将 改变后的坐标值对象 赋给 当前的坐标值对象
            // 设置 值的更新监听器
            // 即每当坐标值（Point对象）更新一次,该方法就会被调用一次
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    currentPoint = (Point) animation.getAnimatedValue();
                    // 将每次变化后的坐标值（估值器PointEvaluator中evaluate（）返回的Piont对象值）到当前坐标值对象（currentPoint）
                    // 从而更新当前坐标值（currentPoint）

// 步骤4：每次赋值后就重新绘制，从而实现动画效果
                    invalidate();
                    // 调用invalidate()后,就会刷新View,即才能看到重新绘制的界面,即onDraw()会被重新调用一次
                    // 所以坐标值每改变一次,就会调用onDraw()一次
                }
            });

            anim.start();
            // 启动动画
        } else {
            // 如果坐标值不为0,则画圆
            // 所以坐标值每改变一次,就会调用onDraw()一次,就会画一次圆,从而实现动画效果

            // 在该点画一个圆:圆心 = (30,30),半径 = 30
            float x = currentPoint.getX();
            float y = currentPoint.getY();
            canvas.drawCircle(x, y, RADIUS, mPaint);
        }
    }


}

  • 效果图

MainActivity.java 
 mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        float curTranslationX = mButton.getTranslationX();
        // 获得当前按钮的位置

        ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);
        // 创建动画对象 & 设置动画
        // 表示的是:
        // 动画作用对象是mButton
        // 动画作用的对象的属性是X轴平移
        // 动画效果是:从当前位置平移到 x=1500 再平移到初始位置
        animator.setDuration(5000);
        animator.setInterpolator(new DecelerateAccelerateInterpolator());
        // 设置插值器
        animator.start();
        // 启动动画

效果图

差值器.gif

5. ValueAnimator类的使用


实现动画的原理：通过不断控制 值 的变化，再不断 手动 赋给对象的属性，从而间接实现动画效果。


ValueAnimator类中有3个重要方法：

1.ValueAnimator.ofInt（int values）采用默认的整型估值器 IntEvaluator

2.ValueAnimator.ofFloat（float values）  采用默认的浮点型估值器 (FloatEvaluator)

3.ValueAnimator.ofObject（int values）需要自定义object对象.自定义估值器对object对象中封装的多个属性进行变化处理


定义的时候系统不知道是改变的哪个属性。只有值的范围



获取到当前变化的值后需要手动赋值给要改变的属性值然后刷新


自定义估值器的用法看上面的例子。


6. ObjectAnimator类的使用


实现动画的原理：自动赋值 给对象的属性从而实现动画；是 直接 对对象属性进行操作；

6.1 具体使用

由于是继承了ValueAnimator类，所以使用的方法十分类似：XML 设置 / Java设置

设置方法2：在XML 代码中设置

  • 步骤1：在路径 res/animator 的文件夹里创建动画效果.xml文件

此处设置为res/animator/set_animation.xml

  • 步骤2：设置动画参数

set_animation.xml

// ObjectAnimator 采用<animator>  标签
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"  
    android:valueFrom="1"   // 初始值
    android:valueTo="0"  // 结束值
    android:valueType="floatType"  // 变化值类型 ：floatType & intType
    android:propertyName="alpha" // 对象变化的属性名称

/>

在Java代码中启动动画

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.view_animation);  
// 载入XML动画
animator.setTarget(view);  
// 设置动画对象
animator.start();  
// 启动动画使用实例
  • 此处先展示四种基本变换：平移、旋转、缩放 & 透明度

a. 透明度

mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "alpha", 1f, 0f, 1f);
        // 表示的是:
        // 动画作用对象是mButton
        // 动画作用的对象的属性是透明度alpha
        // 动画效果是:常规 - 全透明 - 常规
        animator.setDuration(5000);
        animator.start();

属性动画 - 透明度.gif

b. 旋转

mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

  ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "rotation", 0f, 360f);
属性动画- 旋转.gif

c. 平移

mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

  float curTranslationX = mButton.getTranslationX();
        // 获得当前按钮的位置
        ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);
属性动画 - X轴平移.gif

d. 缩放

mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

  ObjectAnimator animator = ObjectAnimator.ofFloat(mButton, "scaleX", 1f, 3f, 1f);
属性动画 - 缩放.gif
  • 在上面的讲解，我们使用了属性动画最基本的四种动画效果：透明度、平移、旋转 & 缩放

即在ObjectAnimator.ofFloat（）的第二个参数String property传入alpha、rotation、translationX 和 scaleY 等blabla

属性作用数值类型
Alpha控制View的透明度float
TranslationX控制X方向的位移float
TranslationY控制Y方向的位移float
ScaleX控制X方向的缩放倍数float
ScaleY控制Y方向的缩放倍数float
Rotation控制以屏幕方向为轴的旋转度数float
RotationX控制以X轴为轴的旋转度数float
RotationY控制以Y轴为轴的旋转度数float

问题：那么ofFloat()的第二个参数还能传入什么属性值呢？
答案：任意属性值。可以是自定义的属性。后面例子会介绍

6.2 自动赋值的原理
  • 自动赋给对象的属性的本质是调用该对象属性的set（） & get（）方法进行赋值
  • 所以，ObjectAnimator.ofFloat(Object object, String property, float ....values)的第二个参数传入值的作用是：让ObjectAnimator类根据传入的属性名 去寻找 该对象对应属性名的 set（） & get（）方法，从而进行对象属性值的赋值，如上面的例子：

  • 自动赋值的逻辑：

    1. 初始化时，如果属性的初始值没有提供，则调用属性的 get（）进行取值；
    2. 当 值 变化时，用对象该属性的 set（）方法，从而从而将新的属性值设置给对象属性。

    所以：

    • ObjectAnimator 类针对的是任意对象 & 任意属性值，并不是单单针对于View对象
    • 如果需要采用ObjectAnimator 类实现动画效果，那么需要操作的对象就必须有该属性的set（） & get（）
    • 同理，针对上述另外的三种基本动画效果，View 也存在着setRotation()、getRotation()、setTranslationX()、getTranslationX()、setScaleY()、getScaleY()等set（） & get（） 。



6.3 通过自定义对象属性实现动画效果

上面都是介绍的系统view本来就已经实现的属性

属性动画可以对任何属性进行改变，可以自定义属性。前提是要相应的定义该属性对应set和get方法用来执行属性的改变 操作。

那么，该如何自定义属性呢？本质上，就是：

  • 为对象设置需要操作属性的set（） & get（）方法
  • 通过实现TypeEvaluator类从而定义属性变化的逻辑

下面，我将用一个实例来说明如何通过自定义属性实现动画效果

  • 实现的动画效果：一个圆的颜色渐变

这里需要改变的属性是圆的背景色。但是系统本来没有这个属性。所以需要自定义一个属性表示圆的背景色

步骤1：设置自定义属性的set（） & get（）方法

设置自定义属性的set（） & get（）有两种方法：

  1. 通过继承原始类，直接给类加上新属性以及该属性的 get（）& set（）

  2. 通过包装原始类，间接给对象加上该属性的 get（）&
    set（）。即 用一个类来包装原始对象

1. 先介绍继承原始类的方法.第二种方法下面会举例说明

MyView2.java

步骤2： 根据需求实现TypeEvaluator接口

此处实现估值器的本质是：实现 颜色过渡的逻辑。

ColorEvaluator.java

public class ColorEvaluator implements TypeEvaluator {
    // 实现TypeEvaluator接口

    private int mCurrentRed;

    private int mCurrentGreen ;

    private int mCurrentBlue ;

    // 复写evaluate（）
    // 在evaluate（）里写入对象动画过渡的逻辑:此处是写颜色过渡的逻辑
    @Override
    public Object evaluate(float fraction, Object startValue, Object endValue) {

        // 获取到颜色的初始值和结束值
        String startColor = (String) startValue;
        String endColor = (String) endValue;

        // 通过字符串截取的方式将初始化颜色分为RGB三个部分，并将RGB的值转换成十进制数字
        // 那么每个颜色的取值范围就是0-255
        int startRed = Integer.parseInt(startColor.substring(1, 3), 16);
        int startGreen = Integer.parseInt(startColor.substring(3, 5), 16);
        int startBlue = Integer.parseInt(startColor.substring(5, 7), 16);

        int endRed = Integer.parseInt(endColor.substring(1, 3), 16);
        int endGreen = Integer.parseInt(endColor.substring(3, 5), 16);
        int endBlue = Integer.parseInt(endColor.substring(5, 7), 16);

        // 将初始化颜色的值定义为当前需要操作的颜色值
            mCurrentRed = startRed;
            mCurrentGreen = startGreen;
            mCurrentBlue = startBlue;


        // 计算初始颜色和结束颜色之间的差值
        // 该差值决定着颜色变化的快慢:初始颜色值和结束颜色值很相近，那么颜色变化就会比较缓慢;否则,变化则很快
        // 具体如何根据差值来决定颜色变化快慢的逻辑写在getCurrentColor()里.
        int redDiff = Math.abs(startRed - endRed);
        int greenDiff = Math.abs(startGreen - endGreen);
        int blueDiff = Math.abs(startBlue - endBlue);
        int colorDiff = redDiff + greenDiff + blueDiff;
        if (mCurrentRed != endRed) {
            mCurrentRed = getCurrentColor(startRed, endRed, colorDiff, 0,
                    fraction);
                    // getCurrentColor()决定如何根据差值来决定颜色变化的快慢 ->>关注1
        } else if (mCurrentGreen != endGreen) {
            mCurrentGreen = getCurrentColor(startGreen, endGreen, colorDiff,
                    redDiff, fraction);
        } else if (mCurrentBlue != endBlue) {
            mCurrentBlue = getCurrentColor(startBlue, endBlue, colorDiff,
                    redDiff + greenDiff, fraction);
        }
        // 将计算出的当前颜色的值组装返回
        String currentColor = "#" + getHexString(mCurrentRed)
                + getHexString(mCurrentGreen) + getHexString(mCurrentBlue);

        // 由于我们计算出的颜色是十进制数字，所以需要转换成十六进制字符串:调用getHexString()->>关注2
        // 最终将RGB颜色拼装起来,并作为最终的结果返回
        return currentColor;
    }


    // 关注1:getCurrentColor()
    // 具体是根据fraction值来计算当前的颜色。

    private int getCurrentColor(int startColor, int endColor, int colorDiff,
                                int offset, float fraction) {
        int currentColor;
        if (startColor > endColor) {
            currentColor = (int) (startColor - (fraction * colorDiff - offset));
            if (currentColor < endColor) {
                currentColor = endColor;
            }
        } else {
            currentColor = (int) (startColor + (fraction * colorDiff - offset));
            if (currentColor > endColor) {
                currentColor = endColor;
            }
        }
        return currentColor;
    }

    // 关注2:将10进制颜色值转换成16进制。
    private String getHexString(int value) {
        String hexString = Integer.toHexString(value);
        if (hexString.length() == 1) {
            hexString = "0" + hexString;
        }
        return hexString;
    }

}

步骤3：调用ObjectAnimator.ofObject（）方法

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MyView2 myView2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myView2 = (MyView2) findViewById(R.id.MyView2);
        ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "color", new ColorEvaluator(),
                "#0000FF", "#FF0000");
        // 设置自定义View对象、背景颜色属性值 & 颜色估值器
        // 本质逻辑：
        // 步骤1：根据颜色估值器不断 改变 值 
        // 步骤2：调用set（）设置背景颜色的属性值（实际上是通过画笔进行颜色设置）
        // 步骤3：调用invalidate()刷新视图，即调用onDraw（）重新绘制，从而实现动画效果

        anim.setDuration(8000);
        anim.start();
    }
}

6.4 特别注意：如何手动设置对象类属性的 set（） & get（）

a. 背景

从上面的原理可知，如果想让对象的属性a的动画生效，属性a需要同时满足下面两个条件：

  1. 对象必须要提供属性a的set（）方法

a. 如果没传递初始值，那么需要提供get（）方法，因为系统要去拿属性a的初始值
b. 若该条件不满足，程序直接Crash

  1. 对象提供的 属性a的set（）方法 对 属性a的改变 必须通过某种方法反映出来

a. 如带来ui上的变化
b. 若这条不满足，动画无效，但不会Crash）

上述条件，一般第二条都会满足，主要是在第一条

  1. 比如说：由于View的setWidth（）并不是设置View的宽度，而是设置View的最大宽度和最小宽度的；所以通过setWidth（）无法改变控件的宽度；所以对View视图的width做属性动画没有效果
  2. 具体请看下面Button按钮的例子
       Button  mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例
        // 此Button的宽高设置具体为具体宽度200px

               ObjectAnimator.ofInt(mButton, "width", 500).setDuration(5000).start();
                 // 设置动画的对象

效果图 

效果图：不会有动画效果

为什么没有动画效果呢？我们来看View 的 setWidth方法

public void setWidth(int pixels) {  
    mMaxWidth = mMinWidth = pixels;  
    mMaxWidthMode = mMinWidthMode = PIXELS;  
    // 因为setWidth（）并不是设置View的宽度，而是设置Button的最大宽度和最小宽度的
    // 所以通过setWidth（）无法改变控件的宽度
   // 所以对width属性做属性动画没有效果   // 但是因为这里重新进行了刷新，所以界面会有闪烁的效果
    requestLayout();  
    invalidate();  
}  
b. 问题

那么，针对上述对象属性的set（）不是设置属性 或 根本没有set（） / get （）的情况应该如何处理？

c. 解决方案

手动设置对象类属性的set（） & get（）。共有两种方法：

  1. 通过继承原始类，直接给类加上该属性的 get（）& set（），从而实现给对象加上该属性的 get（）& set（）

  2. 通过包装原始动画对象，间接给对象加上该属性的 get（）&
    set（）。即 用一个类来包装原始对象

对于第一种方法，在上面的例子已经说明；下面主要讲解第二种方法：通过包装原始动画对象，间接给对象加上该属性的get（）& set（）

本质上是采用了设计模式中的装饰模式，即通过包装类从而扩展对象的功能

还是采用上述 Button 按钮的例子

public class MainActivity extends AppCompatActivity {
    Button mButton;
    ViewWrapper wrapper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        wrapper = new ViewWrapper(mButton);
        // 创建包装类,并传入动画作用的对象
        
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(3000).start();
                // 设置动画的对象是包装类的对象
            }
        });

    }
    // 提供ViewWrapper类,用于包装View对象
    // 本例:包装Button对象
    private static class ViewWrapper {
        private View mTarget;

        // 构造方法:传入需要包装的对象
        public ViewWrapper(View target) {
            mTarget = target;
        }

        // 为宽度设置get（） & set（）
        public int getWidth() {
            return mTarget.getLayoutParams().width;
        }

        public void setWidth(int width) {
            mTarget.getLayoutParams().width = width;
            mTarget.requestLayout();
        }

    }

}

6.5 总结

  • 对比ValueAnimator类 & ObjectAnimator 类，其实二者都属于属性动画，本质上都是一致的：先改变值，然后 赋值 给对象的属性从而实现动画效果。
  • 但二者的区别在于：
    ValueAnimator 类是先改变值，然后 手动赋值 给对象的属性从而实现动画；是 间接 对对象属性进行操作；

ValueAnimator 类本质上是一种 改变 值 的操作机制

ObjectAnimator类是先改变值，然后 自动赋值 给对象的属性从而实现动画；是 直接 对对象属性进行操作；

可以理解为：ObjectAnimator更加智能、自动化程度更高

7. 额外的使用方法

7.1 组合动画（AnimatorSet 类）

  • 单一动画实现的效果相当有限，更多的使用场景是同时使用多种动画效果，即组合动画
  • 实现 组合动画 的功能：AnimatorSet类
  • 具体使用：
AnimatorSet.play(Animator anim)   ：播放当前动画
AnimatorSet.after(long delay)   ：将现有动画延迟x毫秒后执行
AnimatorSet.with(Animator anim)   ：将现有动画和传入的动画同时执行
AnimatorSet.after(Animator anim)   ：将现有动画插入到传入的动画之后执行
AnimatorSet.before(Animator anim) ：  将现有动画插入到传入的动画之前执行
  • 实例
  • 主要动画是平移，平移过程中伴随旋转动画，平移完后进行透明度变化

实现方式有 XML设置 / Java代码设置

设置方式1：Java代码设置

// 步骤1：设置需要组合的动画效果
ObjectAnimator translation = ObjectAnimator.ofFloat(mButton, "translationX", curTranslationX, 300,curTranslationX);  
// 平移动画
ObjectAnimator rotate = ObjectAnimator.ofFloat(mButton, "rotation", 0f, 360f);  
// 旋转动画
ObjectAnimator alpha = ObjectAnimator.ofFloat(mButton, "alpha", 1f, 0f, 1f);  
// 透明度动画

// 步骤2：创建组合动画的对象
AnimatorSet animSet = new AnimatorSet();  

// 步骤3：根据需求组合动画
animSet.play(translation).with(rotate).before(alpha);  
animSet.setDuration(5000);  

// 步骤4：启动动画
animSet.start();

效果图

组合动画.gif

设置方式2：XML设置

  • 步骤1：在 res/animator的文件夹里创建动画.xml文件

此处为 res/animator/set_animation.xml

  • 步骤2：设置动画效果

set_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially" >
    // 表示Set集合内的动画按顺序进行
    // ordering的属性值:sequentially & together
    // sequentially:表示set中的动画，按照先后顺序逐步进行（a 完成之后进行 b ）
    // together:表示set中的动画，在同一时间同时进行,为默认值

    <set android:ordering="together" >
        // 下面的动画同时进行
        <objectAnimator
            android:duration="2000"
            android:propertyName="translationX"
            android:valueFrom="0"
            android:valueTo="300"
            android:valueType="floatType" >
        </objectAnimator>
        
        <objectAnimator
            android:duration="3000"
            android:propertyName="rotation"
            android:valueFrom="0"
            android:valueTo="360"
            android:valueType="floatType" >
        </objectAnimator>
    </set>

        <set android:ordering="sequentially" >
            // 下面的动画按序进行
            <objectAnimator
                android:duration="1500"
                android:propertyName="alpha"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType" >
            </objectAnimator>
            <objectAnimator
                android:duration="1500"
                android:propertyName="alpha"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" >
            </objectAnimator>
        </set>

</set>

在Java代码中启动动画

mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        AnimatorSet animator = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.set_animation);
// 创建组合动画对象  &  加载XML动画
        animator.setTarget(mButton);
        // 设置动画作用对象
        animator.start();
        // 启动动画

效果图

同第一种方式相同。

7.2 ViewPropertyAnimator用法

  • 从上面可以看出，属性动画的本质是对值操作
  • 但Java是面向对象的，所以 Google 团队添加面向对象操作的属性动画使用 - ViewPropertyAnimator类

可认为是属性动画的一种简写方式

  • 具体使用
// 使用解析
        View.animate().xxx().xxx();
        // ViewPropertyAnimator的功能建立在animate()上
        // 调用animate()方法返回值是一个ViewPropertyAnimator对象,之后的调用的所有方法都是通过该实例完成
        // 调用该实例的各种方法来实现动画效果
        // ViewPropertyAnimator所有接口方法都使用连缀语法来设计，每个方法的返回值都是它自身的实例
        // 因此调用完一个方法后可直接连缀调用另一方法,即可通过一行代码就完成所有动画效果
        
// 以下是例子
        mButton = (Button) findViewById(R.id.Button);
        // 创建动画作用对象：此处以Button为例

        mButton.animate().alpha(0f);
        // 单个动画设置:将按钮变成透明状态 
        mButton.animate().alpha(0f).setDuration(5000).setInterpolator(new BounceInterpolator());
        // 单个动画效果设置 & 参数设置 
        mButton.animate().alpha(0f).x(500).y(500);
        // 组合动画:将按钮变成透明状态再移动到(500,500)处
        
        // 特别注意:
        // 动画自动启动,无需调用start()方法.因为新的接口中使用了隐式启动动画的功能，只要我们将动画定义完成后，动画就会自动启动
        // 该机制对于组合动画也同样有效，只要不断地连缀新的方法，那么动画就不会立刻执行，等到所有在ViewPropertyAnimator上设置的方法都执行完毕后，动画就会自动启动
        // 如果不想使用这一默认机制，也可以显式地调用start()方法来启动动画

7.3 监听动画

  • Animation类通过监听动画开始 / 结束 / 重复 / 取消时刻来进行一系列操作，如跳转页面等等
  • 通过在Java代码里addListener（）设置
      Animation.addListener(new AnimatorListener() {
          @Override
          public void onAnimationStart(Animation animation) {
              //动画开始时执行
          }
      
           @Override
          public void onAnimationRepeat(Animation animation) {
              //动画重复时执行
          }

         @Override
          public void onAnimationCancel()(Animation animation) {
              //动画取消时执行
          }
    
          @Override
          public void onAnimationEnd(Animation animation) {
              //动画结束时执行
          }
      });

// 特别注意：每次监听必须4个方法都重写。
  • 因Animator类、AnimatorSet类、ValueAnimator、ObjectAnimator类存在以下继承关系
各类继承关系
  • 所以AnimatorSet类、ValueAnimator、ObjectAnimator都可以使用addListener()监听器进行动画监听

动画适配器AnimatorListenerAdapter

  • 背景：有些时候我们并不需要监听动画的所有时刻
  • 问题：但addListener(new AnimatorListener())监听器是必须重写4个时刻方法，这使得接口方法重写太累赘
  • 解决方案：采用动画适配器（AnimatorListenerAdapter），解决
    实现接口繁琐 的问题
anim.addListener(new AnimatorListenerAdapter() {  
// 向addListener()方法中传入适配器对象AnimatorListenerAdapter()
// 由于AnimatorListenerAdapter中已经实现好每个接口
// 所以这里不实现全部方法也不会报错
    @Override  
    public void onAnimationStart(Animator animation) {  
    // 如想只想监听动画开始时刻，就只需要单独重写该方法就可以
    }  
});




butterfly1122
关注
专栏目录
Android属性动画,看完这篇够用了吧
2401_84413531的博客
05-01 489
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的最后，互联网不存在所谓的寒冬，只是你没有努力罢了！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！性百分比时对象的属性值**。对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，
Android动画之(PropertyAnimation)属性动画详解(一)
02-04
博客示例代码：http://blog.csdn.net/xiaohao0724/article/details/54863112
Android属性动画
泡泡唐 - Android
03-03 1229
什么是Android属性动画? 与之相似的技术有哪些? 属性动画的组成部分详情及使用
Android 动画之属性动画详解
安卓兼职framework和app工程师的博客
08-02 301
在Android 开发中，属性动画也是常有的动画，要做一些比较炫的动画效果的话，多半是采用属性动画实现的 属性动画分类： 透明动画 alpha 旋转动画 rotation 缩放动画 scaleX 平移动画 translationX 动画集合 AnimatorSet 动画监听事件 addListener 动画关键类 案例如下： 透明动画 alpha 旋转动画 rotation 缩放动画 scaleX 平移动画 translationX 动画集合 AnimatorSet 动
Android属性动画完全解析
金福林的博客
02-24 667
Android属性动画完全解析(上)，初识属性动画的基本用法 转载请注明出处：http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情，因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式，逐帧动画(frame-by-frame
Android属性动画特点详解
08-26
Android 属性动画特点详解 Android 属性动画是 Android 系统中的一种动画技术，自 Android 3.0 以来，Android 属性动画已经成为了 Android 动画系统的核心组件之一。它提供了一种灵活、强大且易于使用的动画解决...
Android动画教程之属性动画详解
01-20
Android 动画教程之属性动画详解 在Android开发中，为用户提供流畅的交互体验和吸引人的视觉效果至关重要，为此Google提供了两种主要的动画框架：传统动画（Animation）和属性动画（Animator）。这两种动画机制有着...
图文详解Android属性动画
01-04
Android中的动画分为视图动画(View Animation)、属性动画（Property Animation）以及Drawable动画。从Android 3.0(API Level 11)开始，Android开始支持属性动画，本文主要讲解如何使用属性动画。关于视图动画可以...
android属性动画
授人以鱼不如授人以渔
01-07 3493
android动画
动画(其二)
heqiang260的博客
07-28 486
补间动画功能比较单调,只有四种动画(透明度,旋转,倾斜和位移)补间动画针对的对象只是UI控件补间动画只是改变View的显示效果,不会去改变View的属性eg左边的按钮移到右边,但是此时的按钮其实还停留在左边，假如你去点右面的按钮,是不会触发按钮的点击事件的~...
Android 属性动画 详解
keen_zuxwang的博客
07-05 989
Android 属性动画 详解 Android动画类型： View Animation（即所谓的Tween Animation补间动画）：View Animation相当简单，不过只能支持简单的缩放、平移、旋转、透明度基本的动画 Drawable Animation （即所谓Frame Animation逐帧动画） Property Animation 利用对象的属性变化形成动画的效果
android属性动画详解
willba的博客
12-07 600
先看效果图,再说话! 图中的这些引导条(原点),ui可以给我们提供,我们自己也可以自定义画!1,首先在res下的drawable建立一个Drawable resource file资源文件,给Root element为shape 代码:即可达到如图效果<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://sch
Android：属性动画详解
weixin_43747497的博客
12-14 162
package com.example.a51044.myapplicationli; import android.animation.AnimatorInflater; import android.animation.AnimatorSet; import android.animation.ObjectAnimator; import android.animation.ValueAni...
android 动画详解之属性动画
暮醉南山的博客
08-10 437
动画的分类在android3.0以前，android的动画机制比较简单，也可以说不健全，那时候是分为两种实现方式：帧动画和补间动画。 1. 帧动画说白了就像gif，在实现的过程中依赖一帧帧的图片资源，然后加载轮播 2. 补间动画倒是可以对view做一些简单的动态效果，但是功能过于简陋，只能够实现移动、缩放、旋转和淡入淡出这四种动画操作，局限性很大。 在3.0之后android提供了一个更加全面
Android 动画详解之属性动画(Property Animation)（下）
WRH的专栏
12-01 1561
Hello，大家好，最近好长时间没有写博客了，因为我决定辞职了。 废话不多说，我们还是来看属性动画在上一篇 Android 动画详解之属性动画(Property Animation)中我们简单的介绍了一下属性动画的用法，其实属性动画还有更多有趣的用法。 1,在xml中使用 在eclipse中我们右键新建xml可以选择新建属性动画，如图 我们选择objectAnimator,然后我们
Android之属性动画
丶巴黎塔、上的星空╮
05-23 396
什么是Android属性动画     属性动画(Property Animation)系统是一个健壮的动画框架系统，它可以满足你大部分动画需求。不管动画对象是否已经绘制到屏幕上，你都可以在动画执行过程中改变它任意的属性值。一个属性动画会在一段特定长度的时间内改变一个属性(一个对象中的字段)的值。你可以通过以下几步定义一个动画：指定你要执行动画的属性，比如动画对象(View)在屏幕上的位置，指定执
Android属性动画详解：ValueAnimator与ObjectAnimator
"Android属性动画是实现复杂动画效果的重要工具，相比传统的帧动画和补间动画，它具有更大的灵活性，能够作用于任何对象的属性。本文将深入探讨属性动画的基础使用，包括ValueAnimator、ObjectAnimator、关键帧、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值