属性动画ValueAnimator在自定义View中的使用

心已赠人 2022-07-17 01:25 224阅读 0赞

转载地址：http://mafei.site/2016/07/17/android-valueanimator/?sukey=3997c0719f1515205be8ad9aea79b9ad51de542a2b92fc95a19db31c5683e178477941e608c949305e1948a0d90a8f7b

最近在学习有关自定义 View 的内容，在 Github 上看到好多开源的 View 控件，如果涉及动画，基本上都使用的是功能更加强大的属性动画，真心觉得属性动画比之前的补间动画强大太多饿了，也学到了使用属性动画自定义 View 的方便和强大。所以想记录一下在自定义 View 时，使用属性动画的几个方面。

> 属性动画的强大之处在于可以对任意对象的任意属性增加动画效果，并且可以自定义值的类型和变化过程（TypeEvaluator）和过渡速度（Interpolator）。

这篇文章先来看看 ValueAnimator 的使用方法。

## ValueAnimator ##

ValueAnimator 是属性动画的核心类，最常用的 ObjectAnimator （下篇会讲到）就是它的子类。此类只是以特定的方式（可以自定义）对值进行不断的修改，已达到某种想要的过渡效果。此类提供设置播放次数、动画间隔、重复模式、开始动画以及设置动画监听器的方法。

看一个最简单的例子吧。

以上代码先使用 ofFloat() 方法接收 0 和 1 参数初始化了一个 ValueAnimator 对象，接着设置动画播放的时间，设置变化速率为系统提供的线性变化，最后启动动画。

达到的效果是，在3000毫秒内从0线性增加到1。我们试着打印出这些值。

结果打印从0到1 线性 变化的值，并且耗时3000毫秒。如果我们不设置 Interpolator，会调用默认的 Interpolator，先加速增加后减速增加。

这些值对于动画有什么用呢？我们可以添加监听器获取每次改变的值，并且可以把此值用在改变 view 的某些属性上，从而达到动画效果。

## 怎样使用ValueAnimator自定义View动画？ ##

当然，上面的代码只是对数字的变化的操作，并没有涉及到动画效果。接下来我们通过在动画开始前（start()方法）设置监听器来让自定义 View 做出相应的动画。

如果想要做出如下图所示的效果，使用 ValueAnimator 就特别简单。

![valueAnimator1.gif][]  
横向移动gif

由于效果是一个小球从左边移动一段距离后，重复执行。变化的值只有小球圆心的X轴坐标。所以可以利用 ValueAnimator 产生从开始位置到结束位置的一系列中间值，设置小球移动的动画。

直接上代码：  
onDraw() 方法：根据 XPoint (x轴坐标)绘制圆形。

对外提供开始动画的 start() 方法：创建 ValueAnimator 对象，以及各种属性，添加监听器把每次改变的值赋值给 xPoint，并且通知 view 重绘，最后开始动画。

以上代码首先创建一个从 60 变化到 600 的 ValueAnimator 对象，接着设置动画时间、重播方式、重播次数和速度变化情况，最后增加监听器，每次获取变化的值再赋值给 xPoint ，接着很重要的一点，调用 invalidate() 方法通知 View 重绘，即值每次改变都需要 View 重绘。

这样就很方便的根据属性动画控制 float 值的改变，给 view 增加了动画的效果。

## TypeEvaluator ##

前面的例子，创建 ValueAnimator 的时候，都是使用的 ValueAnimator.ofFloat(float, float) 方法，这个方法传递的参数为可变参数。其实创建 ValueAnimator 也可以使用 ofInt() 等方法，得到 Int 值得改变动画。  
在使用 ofInt() 或 ofFloat() 方法时，其实是使用了 FloatEvaluator、FloatArrayEvaluator、IntEvaluator、IntArrayEvaluator 这些系统已经实现好了的 TypeEvaluator。我们使用这些方法创建 ValueAnimator 时就不必自定义类来继承 TypeEvaluator。

还有一个很重要的方法： ValueAnimator.ofObject(TypeEvaluator, Object…)，此方法和其他方法不同之处在于参数 TypeEvaluator 和 Object，需要我们自己去实现，此处需要使用系统已经实现好的或自定义子类，用于设定自定义类型。

假如现在需要这个圆形像下图这样斜着移动，使用 ValueAnimator 该怎样实现？当然很很多简单的实现方法，比如 Path 路径的使用，这里为了演示自定义 TypeEvaluator，使用自定义 TypeEvaluator 的方式来实现。

![valueAnimator2.gif][]  
斜着移动gif

自定义类 PointEvaluator 实现 TypeEvaluator 接口。

这里需要实现 evaluate() 方法，根据动画完成的百分比返回对应的值。其中 fraction 参数和动画时间有关，一般代表动画执行的完成程度，比如动画总时间为2000毫秒，现在执行了1000毫秒，那么此刻传递进来的 fraction 参数值为二分之一。

在 onDraw() 方法中依然还是简单的绘制一个圆形，此圆的圆心坐标是成员变量 mPoint 的 x , y值。

最后提供 start() 方法开始动画。

和上边的代码类似，只是 ValueAnimotor 操作的值从 float 改变成了 Point (可以自定义类型)，不再做过多的解释了。

这个例子，我们可以知道 ValueAnimotor 操作的值的类型是任意的，可以由我们来自定义，只要自定义类实现 TypeEvaluatorb，并且实现此接口的唯一一个方法 evaluate() 即可。

## TimeInterpolator ##

TimeInterpolator 表示动画的速率，上边代码中我们就设置了动画速率，只不过使用的是API中已经实现好了的 LinearInterpolator。

查询API知道 TimeInterpolator 接口有很多已知的实现类，比如  
AccelerateDecelerateInterpolator 表示先加速后减速，  
AccelerateInterpolator 表示一直加速，  
DecelerateInterpolator 表示一直加速等。  
BounceInterpolator 可以模拟物理规律，实现反弹的效果

如果不设置 setInterpolator(),那么默认使用 AccelerateDecelerateInterpolator。

在自定义 TimeInterpolator 之前，我们先看看API中提供的实现的例子：LinearInterpolator，AccelerateInterpolator。

TimeInterpolator 接口，只有一个方法：getInterpolation(float input)，此方法接收一个 float 类型的 input 值，此值的变化范围为0~1，并且根据动画运行的时间，均匀增加，和 TypeEvaluator 接口方法中的参数 fraction 很像， fraction 也是根据动画运行的时间，均匀增加。

注意:getInterpolation() 方法的返回值传递给了 TypeEvaluator 的 fraction 参数

LinearInterpolator 源码：

从源码中，可以看到 getInterpolation 的逻辑简单到不能再简单，直接返回 input，因为 input 本身表示的就是均匀增加的。

AccelerateInterpolator 源码：

构造函数接收一个 mFactor 表示加速的倍数，接收1.0f以上的数，`mDoubleFactor = 2 * mFactor`。  
在 getInterpolation() 方法中，判断 mFactor 如果等于1.0f，直接返回`input * input`（默认，二次函数增长），否则返回 input 的 mDoubleFactor 次方（mDoubleFactor次函数增长）。

看来要想实现一个自定义的 TimeInterpolator，得要有一些必要的数学修养了。没办法，数学没有那么好，只能实现一个简单的TimeInterpolator，演示自定义 TimeInterpolator 的步骤。

注意：最好让 getInterpolation() 方法返回的值在0~1之间，并且递增。以便在使用fraction参数时意思明确

下面我们实现一个以10给底数的负指数函数减速的例子：

然后在设置`animator.setInterpolator(new LgDecelerateInterpolator());`,就可以使用了。

成员变量`background`表示底数，在构造方法中初始化为10，因为是减速，所以用到了负指数，得到的值从1变化到0，所以再用1减去这个结果值，就得到了最终的结果。

## AnimatorSet ##

AnimatorSet 表示动画的集合，可以把几个动画一起播放，或按次序播放。提供 paly、with、after 等方法。

接下来，把以上用到的全部结合起来，播放一个动画的效果：圆形从 View 的左上角移动到右下角，伴随着颜色的变化，移动速度和颜色变化的速率都由上面自定义的 LgDecelerateInterpolator 实现。

这是效果图：  
![valueAnimator3.gif][]  
斜着指数减速移动伴随颜色指数渐变gif

这是完整的代码：

<table style="border-spacing:0px; border-collapse:collapse; width:676px; max-width:100%; margin-bottom:20px; margin-top:0px; background-color:transparent"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; border-top:1px solid rgb(221,221,221); border-right:1px solid rgb(238,238,238)!important; border-bottom:1px solid rgb(238,238,238)!important; border-left:1px solid rgb(255,255,255); line-height:1.42857; vertical-align:top; color:rgb(102,102,102)"> <pre style="overflow:auto; font-family:Menlo,Monaco,Consolas,&quot;Courier New&quot;,monospace; font-size:13px; padding:10px; margin-top:0px; margin-bottom:0px; line-height:1.42857; color:rgb(51,51,51); word-break:break-all; word-wrap:break-word; border:none; background-color:rgb(245,245,245)">
      
       
     <div style="height:20px">
       
        
      <span style="color:rgb(133,153,0)">public</span> 
       
        
      <span style=""><span style="color:rgb(133,153,0)">class</span> <span style="color:rgb(181,137,0)">MyView</span> <span style="color:rgb(133,153,0)">extends</span> <span style="color:rgb(181,137,0)">View</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(133,153,0)">private</span> Paint mPaint;
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(133,153,0)">private</span> Point mPoint;
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style="color:rgb(133,153,0)">private</span> 
       
        
      <span style="color:rgb(133,153,0)">int</span> mColor;
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(38,139,210)">MyView</span><span style="">(Context context, AttributeSet attrs)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">super</span>(context, attrs);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               initPaint();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(38,139,210)">MyView</span><span style="">(Context context)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">super</span>(context);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               initPaint();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">private</span> <span style="color:rgb(133,153,0)">void</span> <span style="color:rgb(38,139,210)">initPaint</span><span style="">()</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               mPaint = 
       
        
      <span style="color:rgb(133,153,0)">new</span> Paint();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               mPaint.setColor(
       
        
      <span style="color:rgb(42,161,152)">0xFFF00000</span>);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               mPaint.setAntiAlias(
       
        
      <span style="color:rgb(133,153,0)">true</span>); 
       
        
      <span style="margin-top:20px; color:rgb(147,161,161); font-style:italic">// 抗锯齿</span>
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style="">@Override</span>
      
       
     </div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">protected</span> <span style="color:rgb(133,153,0)">void</span> <span style="color:rgb(38,139,210)">onDraw</span><span style="">(Canvas canvas)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">super</span>.onDraw(canvas);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               canvas.drawCircle(mPoint.x, mPoint.y, 
       
        
      <span style="color:rgb(42,161,152)">60</span>, mPaint);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(133,153,0)">void</span> <span style="color:rgb(38,139,210)">start</span><span style="">()</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">final</span> ValueAnimator animator = ValueAnimator.ofObject(
       
        
      <span style="color:rgb(133,153,0)">new</span> PointEvaluator(),
      
       
     </div>
      
       
     <div style="height:20px">                
       
        
      <span style="color:rgb(133,153,0)">new</span> Point(
       
        
      <span style="color:rgb(42,161,152)">60</span>, 
       
        
      <span style="color:rgb(42,161,152)">60</span>), 
       
        
      <span style="color:rgb(133,153,0)">new</span> Point(
       
        
      <span style="color:rgb(42,161,152)">990</span>, 
       
        
      <span style="color:rgb(42,161,152)">1050</span>));
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animator.setRepeatCount(ValueAnimator.INFINITE);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animator.addUpdateListener(
       
        
      <span style="color:rgb(133,153,0)">new</span> ValueAnimator.AnimatorUpdateListener() {
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style="">@Override</span>
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(133,153,0)">void</span> <span style="color:rgb(38,139,210)">onAnimationUpdate</span><span style="">(ValueAnimator animation)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       mPoint = (Point) animation.getAnimatedValue();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       invalidate();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               });
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">final</span> ValueAnimator animator1 = ValueAnimator.ofArgb(
       
        
      <span style="color:rgb(42,161,152)">0xFFF00000</span>,
       
        
      <span style="color:rgb(42,161,152)">0xFFFFFF00</span>);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animator1.setRepeatCount(ValueAnimator.INFINITE);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animator1.addUpdateListener(
       
        
      <span style="color:rgb(133,153,0)">new</span> ValueAnimator.AnimatorUpdateListener() {
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style="">@Override</span>
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(133,153,0)">void</span> <span style="color:rgb(38,139,210)">onAnimationUpdate</span><span style="">(ValueAnimator animation)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       mColor = (
       
        
      <span style="color:rgb(133,153,0)">int</span>) animation.getAnimatedValue();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                       mPaint.setColor(mColor);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               });
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">
      
        
               AnimatorSet animationSet = 
       
        
      <span style="color:rgb(133,153,0)">new</span> AnimatorSet();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animationSet.setDuration(
       
        
      <span style="color:rgb(42,161,152)">3000</span>);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animationSet.setInterpolator(
       
        
      <span style="color:rgb(133,153,0)">new</span> LgDecelerateInterpolator());
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">
      
        
               animationSet.play(animator).with(animator1);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               animationSet.start();
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">class</span> <span style="color:rgb(181,137,0)">PointEvaluator</span> <span style="color:rgb(133,153,0)">implements</span> <span style="color:rgb(181,137,0)">TypeEvaluator</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">        
       
        
      <span style="">@Override</span>
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> Object <span style="color:rgb(38,139,210)">evaluate</span><span style="">(<span style="color:rgb(133,153,0)">float</span> fraction, Object startValue, Object endValue)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   Point startPoint = (Point) startValue;
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   Point endPoint = (Point) endValue;
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">            
       
        
      <span style="color:rgb(133,153,0)">int</span> x = (
       
        
      <span style="color:rgb(133,153,0)">int</span>) (startPoint.x + fraction * (endPoint.x - startPoint.x));
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style="color:rgb(133,153,0)">int</span> y = (
       
        
      <span style="color:rgb(133,153,0)">int</span>) (startPoint.y + fraction * (endPoint.y - startPoint.y));
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">            
       
        
      <span style="color:rgb(133,153,0)">return</span> 
       
        
      <span style="color:rgb(133,153,0)">new</span> Point(x, y);
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">    
       
        
      <span style=""><span style="color:rgb(133,153,0)">class</span> <span style="color:rgb(181,137,0)">LgDecelerateInterpolator</span> <span style="color:rgb(133,153,0)">implements</span> <span style="color:rgb(181,137,0)">TimeInterpolator</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">        
       
        
      <span style="color:rgb(133,153,0)">private</span> 
       
        
      <span style="color:rgb(133,153,0)">float</span> background;
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(38,139,210)">LgDecelerateInterpolator</span><span style="">()</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">
      
        
                   background = 
       
        
      <span style="color:rgb(42,161,152)">10</span>;
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">        
       
        
      <span style="">@Override</span>
      
       
     </div>
      
       
     <div style="height:20px">        
       
        
      <span style=""><span style="color:rgb(133,153,0)">public</span> <span style="color:rgb(133,153,0)">float</span> <span style="color:rgb(38,139,210)">getInterpolation</span><span style="">(<span style="color:rgb(133,153,0)">float</span> input)</span> </span>{
      
       
     </div>
      
       
     <div style="height:20px">            
       
        
      <span style="color:rgb(133,153,0)">return</span> (
       
        
      <span style="color:rgb(42,161,152)">1</span> - (
       
        
      <span style="color:rgb(133,153,0)">float</span>) Math.pow(background, -input));
      
       
     </div>
      
       
     <div style="height:20px">
      
        
               }
      
       
     </div>
      
       
     <div style="height:20px">
      
        
           }
      
       
     </div>
      
       
     <div style="height:20px"></div>
      
       
     <div style="height:20px">
      
        
       }
      
       
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

start() 方法中创建了两个 ValueAnimator，第一个使用 ofObject() 方法，使用自定义的 PointEvaluator，第二个使用API已经实现的ofArgb 使颜色值变化的动画属性(API21以上支持)，都添加监听器以实现对成员变量的修改，重绘 View，最后创建 AnimatorSet 对两个动画进行叠加，在播放移动动画的同时播放颜色渐变的动画。

[valueAnimator1.gif]: http://7xscwt.com1.z0.glb.clouddn.com/valueAnimator1.gif
[valueAnimator2.gif]: http://7xscwt.com1.z0.glb.clouddn.com/valueAnimator2.gif
[valueAnimator3.gif]: http://7xscwt.com1.z0.glb.clouddn.com/valueAnimator3.gif