关于动画的使用

1、概述

Android提供了几种动画类型：

• View Animation（Tween Animation）
• Drawable Animation（Frame Animation）

• Property Animation

  View Animation相当简单，不过只能支持简单的缩放、平移、旋转、透明度基本的动画，且有一定的局限性。比如：你希望View有一个颜色的切换动画；你 希望可以使用3D旋转动画；你希望当动画停止时，View的位置就是当前的位置；这些View Animation都无法做到。这就是Property Animation产生的原因。View Animation 移动控件之后，控件的点击事件还在原地，而Property Animation的控件点击事件会移动到动画结束的地方。

2、相关API

Property Animation就是通过动画的方式改变对象的属性，属性：
Duration动画的持续时间，默认300ms。
Time interpolation：时间差值，类似于LinearInterpolator、AccelerateDecelerateInterpolator，定义动画的变化率。
TypeEvaluator：根据属性的开始、结束值与TimeInterpolation计算出的因子计算出当前时间的属性值
Repeat count and behavior：重复次数、以及重复模式；可以定义重复多少次；重复时从头开始，还是反向。
Animator sets: 动画集合，你可以定义一组动画，一起执行或者顺序执行。
Frame refresh delay：帧刷新延迟，对于你的动画，多久刷新一次帧；默认为10ms，但最终依赖系统的当前状态；基本不用管。
ViewPropertyAnimator:

相关的类
ObjectAnimator 动画的执行类，
ValueAnimator 动画的执行类，
AnimatorSet 用于控制一组动画的执行：线性，一起，每个动画的先后执行等。
AnimatorInflater 用户加载属性动画的xml文件
TypeEvaluator 类型估值，主要用于设置动画操作属性的值。
TimeInterpolator 时间插值
总的来说，属性动画就是，动画的执行类来设置动画操作的对象的属性、持续时间，开始和结束的属性值，时间差值等，然后系统会根据设置的参数动态的变化对象的属性。
TypeEvalutors
根据属性的开始、结束值与TimeInterpolation计算出的因子计算出当前时间的属性值，android提供了以下几个evalutor：
● IntEvaluator：属性的值类型为int；
● FloatEvaluator：属性的值类型为float；
● ArgbEvaluator：属性的值类型为十六进制颜色值；
● TypeEvaluator：一个接口，可以通过实现该接口自定义Evaluator。
自定义TypeEvalutor很简单，只需要实现一个方法，如FloatEvalutor的定义：

public class FloatEvaluator implements TypeEvaluator {    public Object evaluate(float fraction, Object startValue, Object endValue) {        float startFloat = ((Number) startValue).floatValue();        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);    }}

自定义TypeEvalutor会取代默认的值返回

PropertyValuesHolder
PropertyValuesHolder的效果和AnimatorSet,ViewPropertyAnimator一样:

    PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);    PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);    ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvyY).start();    ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);    ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);    AnimatorSet animSetXY = new AnimatorSet();    animSetXY.playTogether(animX, animY);    animSetXY.start();    myView.animate().x(50f).y(100f);

TimeInterplator
Time interplator定义了属性值变化的方式，如线性均匀改变，开始慢然后逐渐快等。在Property Animation中是TimeInterplator，在View Animation中是Interplator，这两个是一样的，在3.0之前只有Interplator，3.0之后实现代码转移至了 TimeInterplator。Interplator继承自TimeInterplator，内部没有任何其他代码。
● AccelerateInterpolator　　　　　 加速，开始时慢中间加速
● DecelerateInterpolator　　　 　　 减速，开始时快然后减速
● AccelerateDecelerateInterolator　 先加速后减速，开始结束时慢，中间加速
● AnticipateInterpolator　　　　　　 反向 ，先向相反方向改变一段再加速播放
● AnticipateOvershootInterpolator　 反向加回弹，先向相反方向改变，再加速播放，会超出目的值然后缓慢移动至目的值
● BounceInterpolator　　　　　　　 跳跃，快到目的值时值会跳跃，如目的值100，后面的值可能依次为85，77，70，80，90，100
● CycleIinterpolator　　　　　　　　 循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2 * mCycles * Math.PI * input)
● LinearInterpolator　　　　　　　　 线性，线性均匀改变
● OvershottInterpolator　　　　　　 回弹，最后超出目的值然后缓慢改变到目的值
● TimeInterpolator　　　　　　　　 一个接口，允许你自定义interpolator，以上几个都是实现了这个接口

当Layout改变时应用动画
ViewGroup中的子元素可以通过setVisibility使其Visible、Invisible或Gone，当有子元素可见性改变时(VISIBLE、GONE)，可以向其应用动画，通过LayoutTransition类应用此类动画：
ViewGroup.setLayoutTransition(LayoutTransition transition)
transition.setAnimator(LayoutTransition.DISAPPEARING, customDisappearingAnim);
通过setAnimator应用动画，第一个参数表示应用的情境，可以以下4种类型：
● APPEARING　　　　　　　　当一个元素在其父元素中变为Visible时对这个元素应用动画
● CHANGE_APPEARING　　　 当一个元素在其父元素中变为Visible时，因系统要重新布局有一些元素需要移动，对这些要移动的元素应用动画
● DISAPPEARING　　　　　　 当一个元素在其父元素中变为GONE时对其应用动画
● CHANGE_DISAPPEARING　 当一个元素在其父元素中变为GONE时，因系统要重新布局有一些元素需要移动，这些要移动的元素应用动画.
第二个参数为一Animator。
mTransitioner.setStagger(LayoutTransition.CHANGE_APPEARING, 30);
此函数设置动画延迟时间，参数分别为类型与时间。

3、实际使用

1)ObjectAnimator

①简单使用

   ObjectAnimator//   .ofFloat(view, "rotationX", 0.0F, 360.0F)//   .setDuration(500)//   .start();

ObjectAnimator.ofFloat(expandedImageView, View.X,                            startBounds.left).start();

②设置背景颜色(View中有setBackgroundColor(@ColorInt int color)方法，所以可以直接使用”backgroundColor”的propertyName)：

    ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);    colorAnim.setDuration(3000);    colorAnim.setEvaluator(new ArgbEvaluator());    colorAnim.setRepeatCount(ValueAnimator.INFINITE);    colorAnim.setRepeatMode(ValueAnimator.REVERSE);    colorAnim.start();

③多个ObjectAnimator的简单写法：

    ObjectAnimator anim1 = ObjectAnimator.ofFloat(balls.get(0), "y",                        0f, getHeight() - balls.get(0).getHeight()).setDuration(500);    ObjectAnimator anim2 = anim1.clone();    anim2.setTarget(balls.get(1));

④实现一个动画更改多个效果有两种方法：
使用propertyValuesHolder

    public void propertyValuesHolder(View view)     {      PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f,    0f, 1f);      PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f,        0, 1f);      PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f,        0, 1f);      ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY,pvhZ).setDuration(1000).start();     }

使用AnimatorSet 

    AnimatorSet bouncer = new AnimatorSet();    bouncer.play(bounceAnim).before(squashAnim1);    bouncer.play(squashAnim1).with(squashAnim2);    bouncer.play(squashAnim1).with(stretchAnim1);    bouncer.play(squashAnim1).with(stretchAnim2);    bouncer.play(bounceBackAnim).after(stretchAnim2);    ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);    fadeAnim.setDuration(250);    AnimatorSet animatorSet = new AnimatorSet();    animatorSet.play(bouncer).before(fadeAnim);    animatorSet.start();

AnimatorSet 和propertyValuesHolder一起使用:

  AnimatorSet set = new AnimatorSet();                set.play(                        ObjectAnimator.ofFloat(expandedImageView, View.X,                                startBounds.left))                        .with(ObjectAnimator.ofFloat(expandedImageView, View.Y,                                startBounds.top))                        .with(ObjectAnimator.ofFloat(expandedImageView,                                View.SCALE_X, startScaleFinal))                        .with(ObjectAnimator.ofFloat(expandedImageView,                                View.SCALE_Y, startScaleFinal));

2)自定义propertyName

源码：

public static ObjectAnimator ofFloat(Object target, String propertyName, float... values) {        ObjectAnimator anim = new ObjectAnimator(target, propertyName);        anim.setFloatValues(values);        return anim;    }

target : 执行动画的目标
propertyName : 目标对象中所有的set/get方法,如果需要自定义propertyName，只需要在target的类中添加set方法即可.
propertyName 自定义:

ObjectAnimator animator = ObjectAnimator.ofFloat(CustomView.this,                "customPhase", 1.0f, 0.0f);        animator.setDuration(10000);        animator.start();

//写一个public的方法,set后面的就是propertyName(propertyName第一个字母不需要大写,后面的首字母都需要大写,否则无效).

    public void setCustomPhase(float phase) {        Log.d("pathview", "setPhase called with:" + String.valueOf(phase));        paint.setPathEffect(createPathEffect(length, phase, 0.0f));        invalidate();// will calll onDraw    }

3)自定义Property

源码：

public static <T> ObjectAnimator ofFloat(T target, Property<T, Float> property,            float... values) {        ObjectAnimator anim = new ObjectAnimator(target, property);        anim.setFloatValues(values);        return anim;    }

        public CustomProperty(Class<Float> type, String name) {            super(type, name);        }        @Override        public Float get(View view) {            return 0f;        }        @Override        public void set(View view, Float value) {            view.setTranslationX(view.getWidth() * value);            view.setTranslationY(view.getHeight() * value);            view.setAlpha(value);            view.setRotation(360 * value);        }    }      ObjectAnimator animator = ObjectAnimator.ofFloat(btn,                new CustomProperty(Float.TYPE, "custom"), 0, 1);        animator.setRepeatMode(ObjectAnimator.REVERSE);        animator.setRepeatCount(Integer.MAX_VALUE);        animator.start();

常用的propertyName:
● translationX and translationY
● rotation, rotationX, and rotationY
● scaleX and scaleY
● pivotX and pivotY
● x and y
● alpha

ofInt、ofFloat、ofObject，这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。
当对于属性值，只设置一个的时候，会认为对象该属性的值为开始（getPropName反射获取），然后设置的值为终点。如果设置两个，则一个为开始、一个为结束
动画更新的过程中，会不断调用setPropName更新元素的属性，所有使用ObjectAnimator更新某个属性，必须得有getter（设置一个属性值的时候）和setter方法

4)ValueAnimator实现动画

不需要操作的对象的属性一定要有getter和setter方法，可以根据当前动画的计算值，来操作任何属性，

public void verticalRun(View view) {  ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight    - mBlueBall.getHeight());  animator.setTarget(mBlueBall);  animator.setDuration(1000).start(); }/**  * 自由落体  * @param view  */ public void verticalRun( View view) {  ValueAnimator animator = ValueAnimator.ofFloat(0, mScreenHeight    - mBlueBall.getHeight());  animator.setTarget(mBlueBall);  animator.setDuration(1000).start();// animator.setInterpolator(value)  animator.addUpdateListener(new AnimatorUpdateListener()  {   @Override   public void onAnimationUpdate(ValueAnimator animation)   {    mBlueBall.setTranslationY((Float) animation.getAnimatedValue());   }  }); }/**  * 抛物线  * @param view  */ public void paowuxian(View view) {  ValueAnimator valueAnimator = new ValueAnimator();  valueAnimator.setDuration(3000);  valueAnimator.setObjectValues(new PointF(0, 0));  valueAnimator.setInterpolator(new LinearInterpolator());  valueAnimator.setEvaluator(new TypeEvaluator<PointF>()  {   // fraction = t / duration   @Override   public PointF evaluate(float fraction, PointF startValue,     PointF endValue)   {    Log.e(TAG, fraction * 3 + "");    // x方向200px/s ，则y方向0.5 * 10 * t    PointF point = new PointF();    point.x = 200 * fraction * 3;    point.y = 0.5f * 200 * (fraction * 3) * (fraction * 3);    return point;   }  });  valueAnimator.start();  valueAnimator.addUpdateListener(new AnimatorUpdateListener()  {   @Override   public void onAnimationUpdate(ValueAnimator animation)   {    PointF point = (PointF) animation.getAnimatedValue();    mBlueBall.setX(point.x);    mBlueBall.setY(point.y);   }  }); }

5)监听动画的事件

每次执行addListener(AnimatorListener listener)方法都会添加一个AnimatorListener到ObjectAnimator中(如果每次都是new AnimatorListener ,那么会添加很多个对象,如果是同一个AnimatorListener ,那么会将它重复添加到ObjectAnimator),所以addListener()方法和new AnimatorListener()不能被重复执行.

public void fadeOut(View view) {  ObjectAnimator anim = ObjectAnimator.ofFloat(mBlueBall, "alpha", 0.5f);  anim.addListener(new AnimatorListener()  {   @Override   public void onAnimationStart(Animator animation)   {    Log.e(TAG, "onAnimationStart");   }   @Override   public void onAnimationRepeat(Animator animation)   {    // TODO Auto-generated method stub    Log.e(TAG, "onAnimationRepeat");   }   @Override   public void onAnimationEnd(Animator animation)   {    Log.e(TAG, "onAnimationEnd");    ViewGroup parent = (ViewGroup) mBlueBall.getParent();    if (parent != null)     parent.removeView(mBlueBall);   }   @Override   public void onAnimationCancel(Animator animation)   {    // TODO Auto-generated method stub    Log.e(TAG, "onAnimationCancel");   }  });  anim.start(); }AnimatorListenerAdapter继承了AnimatorListener接口  anim.addListener(new AnimatorListenerAdapter()  {   @Override   public void onAnimationEnd(Animator animation)   {    Log.e(TAG, "onAnimationEnd");    ViewGroup parent = (ViewGroup) mBlueBall.getParent();    if (parent != null)     parent.removeView(mBlueBall);   }  });  ```###6)AnimatorSet的使用//第一：使用playTogether两个动画同时执行，当然还有playSequentially依次执行

public void togetherRun(View view)
{
ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, “scaleX”,
1.0f, 2f);
ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, “scaleY”,
1.0f, 2f);
AnimatorSet animSet = new AnimatorSet();
animSet.setDuration(2000);
animSet.setInterpolator(new LinearInterpolator());
//两个动画同时执行
animSet.playTogether(anim1, anim2);
animSet.start();
}
“`
//第二：如果我们有一堆动画，如何使用代码控制顺序，比如1，2同时；3在2后面；4在1之前等~就是效果2了

public void playWithAfter(View view) {  float cx = mBlueBall.getX();  ObjectAnimator anim1 = ObjectAnimator.ofFloat(mBlueBall, "scaleX",    1.0f, 2f);  ObjectAnimator anim2 = ObjectAnimator.ofFloat(mBlueBall, "scaleY",    1.0f, 2f);  ObjectAnimator anim3 = ObjectAnimator.ofFloat(mBlueBall,    "x",  cx ,  0f);  ObjectAnimator anim4 = ObjectAnimator.ofFloat(mBlueBall,    "x", cx);  /**   * anim1，anim2,anim3同时执行   * anim4接着执行   */  AnimatorSet animSet = new AnimatorSet();  animSet.play(anim1).with(anim2);  animSet.play(anim2).with(anim3);  animSet.play(anim4).after(anim3);  animSet.setDuration(1000);  animSet.start(); }