// 实现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)投稿、约稿、给文章纠错。