【Android】Property Animation（属性动画

作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：www.ibooker.cc。

本文选自书客创作平台第23篇文章。阅读原文 。

书客创作

​Property Animation：

属性动画，是Android3.0中才引进的，不同于其他动画（补间动画，帧动画），它是通过改变控件属性来实现的一种动画效果。简单来说在动画执行的过程中，控件的属性也会发生更改。

a. 支持对所有View能更新的属性的动画（需要属性的setXxx()和getXxx()）。

b. 更改的是View实际的属性，所以不会影响其在动画执行后所在位置的正常使用。

c. Android3.0 （API11）及以后出现的功能，3.0之前的版本可使用github第三方开源库nineoldandroids.jar进行支持。

属性动画组成部分、相关类介绍：

1. ObjectAnimator：对象动画执行类。

2. ValueAnimator：值动画执行类，常配合AnimatorUpdateListener使用。

3. PropertyValuesHolder: 属性存储器，为两个执行类提供更新多个属性的功能。

4. Keyframe：为 PropertyValuesHolder提供多个关键帧的操作值。

5. AnimatorSet：一组动画的执行集合类：设置执行的先后顺序，时间等。

6. AnimatorUpdateListener：动画更新监听。

7. AnimatorListener：动画执行监听，在动画开始、重复、结束、取消时进行回调。

8. AnimatorInflater：加载属性动画的xml文件。

9. TypeEvaluator：类型估值，用于设置复杂的动画操作属性的值。

10. TimeInterpolator：时间插值，用于控制动画执行过程。

Property Animation工作方式：

如果使用ValueAnimator设置控件的X坐标在40ms内从0移动到40 pixel，按默认的10ms刷新一次，这个控件会移动4次，每次移动40/4=10pixel。但是如果同时设置AccelerateDecelerateInterpolator插值器，控件将会根据插值进行速率的变化。

分析：

ValueAnimator即表示一个动画，包含动画的开始值，结束值，持续时间等属性。

ValueAnimator封装了一个TimeInterpolator，TimeInterpolator定义了属性值在开始值与结束值之间的插值方法。

ValueAnimator还封装了一个TypeAnimator，根据开始、结束值与TimeIniterpolator计算得到的值计算出属性值。

ValueAnimator根据动画已进行的时间跟动画总时间（duration）的比计算出一个时间因子（0~1），然后根据TimeInterpolator计算出另一个因子，最后TypeAnimator通过这个因子计算出属性值，如上例中10ms时：

首先计算出时间因子，即经过的时间百分比：t=10ms/40ms=0.25

经插值计算(inteplator)后的插值因子:大约为0.15，上述例子中用了AccelerateDecelerateInterpolator，计算公式为（input即为时间因子）：

(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;

最后根据TypeEvaluator计算出在10ms时的属性值：0.15*（40-0）=6pixel。上例中TypeEvaluator为FloatEvaluator，计算方法为 ：

public Float evaluate(floatfraction, Number startValue, Number endValue) {
   float startFloat = startValue.floatValue();
   return startFloat + fraction * (endValue.floatValue() - startFloat);
}

参数分别为上一步的插值因子，开始值与结束值。

1. ObjectAnimator对象动画执行类

1. 通过静态方法ofInt、ofFloat、ofObject、ofPropertyValuesHolder 获取类对象。

2. 根据属性值类型选择静态方法，如view的setLeft(int left) 则选用ofInt方法, setY(float y)则选用ofFloat方法。

3. 同ValueAnimator一样，可以进行串联式使用。

实例1：ImageView在X轴方向，向右平移150px。

// 设置作用对象、属性名称、数值集合
ObjectAnimator.ofFloat(imageView,"translationX",0.0F,150.0F)
   // 设置执行时间(1000ms)
   .setDuration(1000)
   .start();

实例2：imageView在X轴上旋转360度，同时在X轴上向右移动150px

// imageView在X轴上旋转360度
ObjectAnimator.ofFloat(imageView,"rotationX",0.0F,360.0F)
   .setDuration(1000)
   .start();

// imageView在X轴上向右移动150px
ObjectAnimator.ofFloat(imageView,"translationX",0.0F,150.0F)
   .setDuration(1000)
   .start();

2. ValueAnimator 值动画执行类：+
3. AnimatorUpdateListener动画更新监听：+
4. AnimatorListener 动画执行监听：

1. 构造方法与ObjectAnimator类似。

2. 与ObjectAnimator的区别在于ValueAnimator构造函数的参数中不包含动画“属性”信息。

3. 优点：结合动画更新监听onAnimationUpdate使用，可以在回调中不断更新View的多个属性，使用起来更加灵活。

实例：ImageView在X轴方向，向右平移150px。

ValueAnimator valueAnimator =ValueAnimator.ofFloat(150);
valueAnimator.setDuration(1000);
//        valueAnimator.addListener(new Animator.AnimatorListener() {
//            @Override
//            public void onAnimationStart(Animator animation) {
//                //动画开始
//            }
//            @Override
//            public void onAnimationEnd(Animator animation) {
//                //动画结束
//            }

//            @Override
//            public void onAnimationCancel(Animator animation) {
//              //动画取消
//            }

//            @Override
//            public void onAnimationRepeat(Animator animation) {
//              //动画重复
//            }
//        });

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
      // imageView在X轴上向右移动
      imageView.setTranslationX((Float) animation.getAnimatedValue());
   }
});

//设置插值器，反复执行3次
valueAnimator.setInterpolator(new CycleInterpolator(3));
valueAnimator.start();

5. PropertyValuesHolder 属性存储器

为ValueAnimator提供多个操作属性及相应的执行参数。

实例：设置ImageView同时执行多个动画。

// 同时进行
// 在X轴缩放从原始比例1f,缩小到最小0f,再放大到原始比例1f
PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX",1f,0f,1f);
// 在Y轴缩放从原始比例1f,缩小到最小0f,再放大到原始比例1f
PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY",1f,0f,1f);
// 将PropertyValuesHolder交付给ObjectAnimator进行构建
ObjectAnimator customAnim = ObjectAnimator.ofPropertyValuesHolder(imageView,pvhScaleX,pvhScaleY);
// 设置执行时间(4000ms)
customAnim.setDuration(4000);
// 开始动画
customAnim.start();

6. Keyframe 关键帧

为 PropertyValuesHolder提供关键帧的操作值集合。

实例：该PropertyValuesHolder进行的旋转（rotation）动画，在执行时间在0%, 50%, 100%时,其旋转角度分别为0°, 360°, 0°。动画执行过程中自动进行补间。表现为自旋360°后再转回来。

// 设置在动画开始时,旋转角度为0度
Keyframe kf0 = Keyframe.ofFloat(0f,0f);
// 设置在动画执行50%时,旋转角度为360度
Keyframe kf1 = Keyframe.ofFloat(.5f,360f);
// 设置在动画结束时,旋转角度为0度
Keyframe kf2 = Keyframe.ofFloat(1f,0f);
//使用PropertyValuesHolder进行属性名称和值集合的封装
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation",kf0,kf1,kf2);
// 通过ObjectAnimator进行执行
ObjectAnimator.ofPropertyValuesHolder(imageView,pvhRotation)
   // 设置执行时间(1000ms)
   .setDuration(1000)
   // 开始动画
   .start();

7. AnimatorSet 执行集合类

1. 为多个属性动画提供播放顺序控制(注意play,with,after,before的用法)。

2. AnimatorSet类与AnimationSet类不能搞混，AnimatorSet在3.0及以上版本中才有。3.0之前的版本可使用第三方开源库nineoldandroids.jar进行支持，功能使用完全一致。

ObjectAnimatorobjectAnimator1 =ObjectAnimator.ofFloat(imageView,"translationX",0.0F,150.0F).setDuration(1000);
ObjectAnimatorobjectAnimator2 =ObjectAnimator.ofFloat(imageView,"translationY",0.0F,150.0F).setDuration(1000);
ObjectAnimatorobjectAnimator3 =ObjectAnimator.ofFloat(imageView,"rotationX",0.0F,360.0F).setDuration(1000);
AnimatorSet animatorSet =newAnimatorSet();
animatorSet.setDuration(3*1000);

// 随机设置
animatorSet.play(objectAnimator1)
   .with(objectAnimator2)
   .after(objectAnimator3);

// 一起播放
animatorSet.playTogether(objectAnimator1,objectAnimator2,objectAnimator3);

// 顺序播放
animatorSet.playSequentially(objectAnimator1,objectAnimator2,objectAnimator3);
animatorSet.start();

8. AnimatorInflater 动画加载器

1. 属性动画可以通过xml文件的形式加载。

2. set标签内的animator也可单独使用。

实例：

1.XML文件

<set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="1000"
      android:propertyName="x"
      android:repeatCount="1"
      android:repeatMode="reverse"
      android:valueTo="200"
      android:valueType="floatType"/>

   <objectAnimator
      android:duration="1000"
      android:propertyName="y"
      android:repeatCount="1"
      android:repeatMode="reverse"
      android:valueTo="400"
      android:valueType="floatType"/>
</set>

2.引用

// 加载xml属性动画
Animator anim = AnimatorInflater.loadAnimator(this,R.anim.animator);
anim.setTarget(imageView);
anim.start();

9. TypeEvaluator 类型估值

1. TypeEvaluator可传入参数值的类型（本例为PointF）。

2. 重写函数public T evaluate(floatfraction, T startValue, T endValue);实现不同需求值的计算。

3. 注意fraction的使用，fraction是从开始到结束的分度值0.0 -> 1.0。

//类型估值-抛物线示例
TypeEvaluator typeEvaluator =new TypeEvaluator() {
   @Override
   public Point Fevaluate(float fraction,PointF startValue,PointF endValue) {
      float time = fraction *3;
      // x方向200px/s，y方向0.5 * 200 * t * t
      PointF point =new PointF();
      point.x=120* time;
      point.y=0.5f*200* time * time;
      return point;
   }
};

ValueAnimator valueAnimator = ValueAnimator.ofObject(typeEvaluator, newPointF(0,0));
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setDuration(3000);
valueAnimator.start();

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
      PointF point = (PointF) animation.getAnimatedValue();
      imageView.setX(point.x);
      imageView.setY(point.y);
   }
});

10. TimeInterpolator 时间插值器

1. AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate _interpolator 先加速再减速

2. AccelerateInterpolator @android:anim/accelerate_interpolator 加速

3. AnticipateInterpolator @android:anim/anticipate_interpolator 先回退一小步然后加速前进

4. AnticipateOvershootInterpolator @android:anim/anticipate_overshoot _interpolator 在上一个基础上超出终点一小步再回到终点

5. BounceInterpolator @android:anim/bounce_interpolator 最后阶段弹球效果

6. CycleInterpolator @android:anim/cycle_interpolator 周期运动

7. DecelerateInterpolator @android:anim/decelerate_interpolator 减速

8. LinearInterpolator @android:anim/linear_interpolator 匀速

9. OvershootInterpolator @android:anim/overshoot_interpolator 快速到达终点并超出一小步最后回到终点

GitHub地址
阅读原文

---

微信公众号：书客创作