java插值器_Android 动画：你真的会使用插值器与估值器吗？（含详细实例教学）...

// 实现TypeEvaluator接口

public classObjectEvaluator implements TypeEvaluator{

// 复写evaluate()

// 在evaluate()里写入对象动画过渡的逻辑@Override public Objectevaluate(float fraction, ObjectstartValue, ObjectendValue) { // 参数说明// fraction：表示动画完成度(根据它来计算当前动画的值)// startValue、endValue：动画的初始值和结束值... // 写入对象动画过渡的逻辑returnvalue; // 返回对象动画过渡的逻辑计算后的值} 实例说明

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

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

工程目录文件如下：

步骤1：定义对象类

因为ValueAnimator.ofObject()是面向对象操作的，所以需要自定义对象类。

本例需要操作的对象是 圆的点坐标

Point.javapublic classPoint {

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

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

this.x = x;

this.y = y; }

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

returnx; } public float getY() {

returny; }}

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

实现TypeEvaluator接口的目的是自定义如何 从初始点坐标 过渡 到结束点坐标；

本例实现的是一个从左上角到右下角的坐标过渡逻辑。

PointEvaluator.java

// 实现TypeEvaluator接口

public classPointEvaluator implements TypeEvaluator {

// 复写evaluate()// 在evaluate()里写入对象动画过渡的逻辑@Override public Objectevaluate(float fraction, ObjectstartValue, ObjectendValue) {

// 将动画初始值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 = newPoint(x, y);

returnpoint; }}

上面步骤是根据需求自定义TypeEvaluator的实现

下面将讲解如何通过对 Point 对象进行动画操作，从而实现整个自定义View的动画效果。

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

MyView.java

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

public classMyView extends View {

// 设置需要用到的变量public static final float RADIUS = 70f; // 圆的半径 = 70private Point currentPoint; // 当前点坐标private Paint mPaint; // 绘图画笔// 构造方法(初始化画笔)public MyView(Context context, AttributeSet attrs) { super(context, attrs);

// 初始化画笔mPaint = newPaint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.BLUE); }

// 复写onDraw()从而实现绘制逻辑// 绘制逻辑:先在初始点画圆,通过监听当前坐标值(currentPoint)的变化,每次变化都调用onDraw()重新绘制圆,从而实现圆的平移动画效果@Override protected voidonDraw(Canvas canvas) {

// 如果当前点坐标为空(即第一次)if(currentPoint == null) { currentPoint = newPoint(RADIUS, RADIUS);

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

// (重点关注)将属性动画作用到View中// 步骤1:创建初始动画时的对象点 & 结束动画时的对象点Point startPoint = newPoint(RADIUS, RADIUS); // 初始点为圆心(70,70)Point endPoint = newPoint( 700, 1000); // 结束点为(700,1000)// 步骤2:创建动画对象 & 设置初始值 和 结束值ValueAnimator anim = ValueAnimator.ofObject( newPointEvaluator(), startPoint, endPoint);

// 参数说明// 参数1：TypeEvaluator 类型参数 - 使用自定义的PointEvaluator(实现了TypeEvaluator接口)// 参数2：初始动画的对象点// 参数3：结束动画的对象点// 步骤3：设置动画参数anim.setDuration( 5000);

// 设置动画时长

// 步骤3：通过 值 的更新监听器，将改变的对象手动赋值给当前对象

// 此处是将 改变后的坐标值对象 赋给 当前的坐标值对象// 设置 值的更新监听器// 即每当坐标值(Point对象)更新一次,该方法就会被调用一次anim.addUpdateListener( newValueAnimator.AnimatorUpdateListener() { @Override public voidonAnimationUpdate(ValueAnimator animation) { currentPoint = (Point) animation.getAnimatedValue();

// 将每次变化后的坐标值(估值器PointEvaluator中evaluate()返回的Piont对象值)到当前坐标值对象(currentPoint)// 从而更新当前坐标值(currentPoint)

// 步骤4：每次赋值后就重新绘制，从而实现动画效果invalidate();

// 调用invalidate()后,就会刷新View,即才能看到重新绘制的界面,即onDraw()会被重新调用一次// 所以坐标值每改变一次,就会调用onDraw()一次} }); anim.start();

// 启动动画} else{

// 如果坐标值不为0,则画圆// 所以坐标值每改变一次,就会调用onDraw()一次,就会画一次圆,从而实现动画效果// 在该点画一个圆:圆心 = (30,30),半径 = 30float x = currentPoint.getX(); float y = currentPoint.getY(); canvas.drawCircle(x, y, RADIUS, mPaint); } }}

步骤4：在布局文件加入自定义View空间

activity_main.xml

步骤5：在主代码文件设置显示视图

MainActivity.java

public classMainActivity extends AppCompatActivity { @Override protected voidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}

源码地址：Carson_Ho的Github地址

3. 总结

本文对Android 动画中的 插值器和估值器的使用 进行了详细分析，相信通过本文你已经能实现复杂的动画效果

学习Android 动画最好先了解以下知识：

1.自定义View的原理，请参考我写的文章：

(1)自定义View基础 - 最易懂的自定义View原理系列

(2)自定义View Measure过程 - 最易懂的自定义View原理系列

(3)自定义View Layout过程 - 最易懂的自定义View原理系列

(4)自定义View Draw过程- 最易懂的自定义View原理系列

2.自定义View的应用，请参考我写的文章：

手把手教你写一个完整的自定义View

Path类的最全面详解 - 自定义View应用系列

Canvas类的最全面详解 - 自定义View应用系列

为什么你的自定义View wrap_content不起作用？

本文来自于CSDN博客，作者：Carson_Ho，原文：http://blog.csdn.net/carson_ho/article/details/72863901#t19

欢迎同有博客好文章的作者加微信(ID：tm_forever_miss)或直接邮件(mobilehub@csdn.net)投稿、约稿、给文章纠错。