安卓属性动画之插值器(TimeInterpolator)和估值器(TypeEvaluator)

我们都知道对于属性动画可以对某个属性做动画,而 插值器(TimeInterpolator) 估值器(TypeEvaluator)在其中扮演了重要角色,下面先了解下 TimeInterpolator TypeEvaluator


TimeInterpolator(时间插值器):


作用:根据时间流逝的百分比计算出当前属性值改变的百分比。


系统已有的插值器: 


  • LinearInterpolator(线性插值器):匀速动画。 

  • AccelerateDecelerateInterpolator(加速减速插值器):动画两头慢,中间快。 

  • DecelerateInterpolator(减速插值器):动画越来越慢。


TypeEvaluator(类型估值算法,即估值器):


作用:根据当前属性改变的百分比来计算改变后的属性值。


系统已有的估值器: 


  • IntEvaluator:针对整型属性 

  • FloatEvaluator:针对浮点型属性 

  • ArgbEvaluator:针对Color属性


那么 TimeInterpolator和 TypeEvaluator是怎么协同工作的呢?


它们是实现 非匀速动画 的重要手段。属性动画是对属性做动画,属性要实现动画,首先由 TimeInterpolator(插值器)根据时间流逝的百分比计算出当前属性值改变的百分比,并且 插值器 将这个百分比返回,这个时候 插值器 的工作就完成了。


比如 插值器 返回的值是0.5,很显然我们要的不是0.5,而是当前属性的值,即当前属性变成了什么值,这就需要 估值器 根据当前属性改变的百分比来计算改变后的属性值,根据这个属性值,我们就可以设置当前属性的值了。


源码分析


上面的理论知识可能比较抽象,下面根据一个实例结合系统源码来分析一下:


下图表示一个匀速动画,采用了线性插值器和整型估值算法,在40ms内,View的x属性实现从0到40的变换。




由于动画的默认刷新率为10ms/帧,所以该动画将分为5帧进行。


当动画进行到第三帧的时候,(x=20,t=20ms)当时间t=20ms 的时候,时间流逝的百分比是 0.5(20/40=0.5),即时间过了一半。这个百分比不是我们最终想要的,我们关心的是x的变化,那么x应该变化多少呢?插值器和估值算法就起作用了。拿线性插值器 来说,线性插值器是实现 匀速动画 的,先看一下线性插值器的源码:




很显然,线性插值器的返回值和输入值一样(看getInterpolation方法),因此t=20ms 插值器 返回的值是 0.5,这意味着 x属性的改变是0.5。这个时候 插值器 的工作已经完成了,插值器的工作就是根据时间流逝的百分比计算出当前属性值改变的百分比。


我们得到了当前属性改变的百分比是0.5,即50%。下一步就是要算出x具体变为了什么值,这个时候 估值算法 就起作用了,它的作用就是根据当前属性改变的百分比来计算改变后的属性值。我们先看看系统提供的 整型估值算法 的源码:




上述代码中的 evaluate方法 的三个参数分别表示 估值小数(fraction)开始值(startValue)和 结束值(endValue)。对于我们的这个例子就是0.5,0和40。我们将这三个值代入求值,即:0+0.5*(40 - 0)=20。没错,这就是当t=20ms x=20 的由来。


其实对于 插值器和估值器 来说,除了系统提供的外,我们还可以自定义。实现方式也很简单,因为插值器和估值器都是一个接口,且内部都只有一个方法,我们只要实现接口就可以了,就可以做出很多绚丽的动画了。其中,自定义插值器需要实现 Interpolator或者TimeInterpolator自定义估值器需要实现TypeEvaluator


但是一般来说,插值器使用系统的就足够了,估值器自定义的可能会多一些,另外就是如果要对其他类型(非Int丶float丶color)做动画,必须自定义类型估值算法。


代码演示(一)


在这里我们用两种方式实现抛物线轨迹,一种是 固定时间的抛物线,一种是 固定长度的抛物线


球按照抛物线轨迹运行1.5秒(参照鸿洋大神的抛物线效果):


首先分析一下实现过程: 


要实现抛物线的效果,水平方向200px/s垂直方向加速度200px/s*s,你会发现我们只需要知道时间的变化,就可以求出某刻小球的水平位移(即x)和 数值位移(即y)。那么公式就是:x = 200t ; y=200t²


但是还有一个问题就是,我们要同时记录两个值并进行 估值算法,所以我们可以创建一个 Point类 来保存这两个值。前面我们使用过 ValueAnimator 的 ofFloat() 和 ofInt()方法,分别用于对 浮点型 整型 的数据进行动画操作的,但实际上 ValueAnimator 中还有一个 ofObject() 方法,是用于对任意对象进行动画操作的。


相比于浮点型或整型数据,对象的动画操作明显要更复杂一些,因为系统将完全无法知道如何从初始对象过度到结束对象,因此这个时候我们就需要实现一个自己的 TypeEvaluator 来告知系统如何进行过度。这里我们要过度的对象就是 Point对象


首先,定义一个 Point类,如下所示:


/**
* 保存小球坐标的类
*/
public class Point {
   float x;
   float y;
   
   public Point(){}
   
   public Point(float x,float y){
       this.x = x;
       this.y = y;    } }


Point类非常简单,x和y两个变量用于记录坐标的位置,并且提供了两个构造方法。


接下来 自定义估值算法,来告知系统如何实现初始对象到结束对象的过度(对于 插值器 来说,我们就使用 系统的线性插值器即可,无须自定义):




对于自定义估值算法,你需要指定一个泛型,这里我们操作的是Point 对象,当我们指定Point 为泛型时,evaluate方法的返回值也是Point ,并且startValue endValue也是 Point 类型,这样就对了,在自定义估值算法中,我们就可以直接使用Point 对象了。


但是你会发现一个问题就是,我们并没有用到 startValue endValue,而是使用了一个写死的1.5f,因为没必要,我们的抛物线是与时间挂钩的,不用他们也是完全可以的,这样写的话,出来的效果就是:球运行1.5s的轨迹图。(下面我们还会有一个例子,它的自定义估值算法就是以startValue和endValue来计算的)。


布局很简单,一个 RelativeLayout 包含一个 显示小球的ImageView 以及一个 用于操控的Button。这里就不贴出了。


下面看 MainActivity 的代码:




通过代码发现,我们调用 ValueAnimator的ofObject() 方法来构建 ValueAnimator 的实例,这里需要注意的是,ofObject()方法要求多传入一个 TypeEvaluator 参数,这里我们只需要传入刚才定义好的 MyTypeEvaluator 的实例就可以了。


还有我们设置了 1500ms 的持续时间,这里的 1500ms和自定义估值器里面的1.5f不是一回事,也就是说我们就算设置的是2000ms的持续时间,得到的小球运行轨迹是一样的,因为自定义估值器里面的1.5f是写死的


运行效果:




我们发现小球确实是抛物线运行,但是仔细看代码你会发现,我们并没有指定小球的落点位置,即 Point对象的终止属性,那么小球落点的位置是哪里呢?其实我们可以算出来,即 x=200*1.5=300;y=200*1.5*1.5=450。但是现在我们更换一下需求,要求小球刚好落在屏幕的右边缘,而不是求具体时间小球的轨迹。


小球呈抛物线轨迹运行到屏幕的右边缘(自己尝试的抛物线效果):


我们知道 y=ax^2 也是抛物线的一个公式,但是仔细看这个公式你会发现,它不是以t为基准了,而是y与x的关系,也就是说y的变化直接与x挂钩。并且对于 y=ax^2,我们知道a越小,开口越大,所以为了抛物线效果好看,我们此次使用的 a=0.001。 


要实现这个效果,其实可以 不用ofObject() 方法,也就是说不用自定义估值算法,直接 使用ofFloat() 也是可以实现的,即直接使用系统的估值器。我们可以为 x属性设置一个匀速动画,然后设置监听器来实现为x和y设置属性值。


代码如下:




运行效果:




确实,小球在碰到右边部就停止了,是我们想要的效果。


其实要实现抛物线效果方法应该还有很多。结合数学公式还可以做出很多效果,比如正选曲线运动等。


代码演示(二)


上面我们演示了抛物线效果,下面我们再来一个效果,这次我们要 自定义估值算法并且使用startValue和endValue参数 来做算法。


自定义估值算法:




代码如下:




理一下思路:


  1. 首先创建Point类用来保存坐标信息,Point对象即是我们要操作的对象 。


  2. 自定义估值算法 MyTypeEvaluator,并制定 泛型为Point类型,在 evaluate方法 中进行估值算法,为point对象的x和y赋值并将该对象返回。


  3. MainActivity 中调用 ValueAnimator.ofObject() 方法获得 ValueAnimator 对象,并传入 自定义估值器对象 和 Point的初始对象与终止对象


  4. ValueAnimator 对象设置 AnimatorUpdateListener 监听,在 onAnimationUpdate() 中通过 Point point = (Point) animation.getAnimatedValue();即可获得在估值算法中返回的Point对象,并为小球设置新的x和y值。


运行效果如下:




没错,小球从(0,0)坐标运行到了(200,300)坐标,并按我们预想的轨迹运行。


转自:http://blog.csdn.net/qq_24530405/article/details/50630744


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值