Android View动画
- 帧动画
- animation-list
- animated-selector
- Animation
- TypeEvaluator
- View的animate方法
- ValueAnimator
- ObjectAnimator
- AnimatorSet
- 使用xml来创建动画
- animation
- objectAnimator
- set
- Animator set
- 自定义ObjectAnimator属性
- propertyValuesHolder
- Keyframe
- Interpolator
- 贝塞尔曲线
- PathInterpolator
- 加减速引子
- 其他的动画常用知识
- ValueAnimatorreverse
Android的动画模式：tween animation，frame animation和property animation，又叫View Animation，Drawable Animation和Property Animation，前两种是3.0以前版本支持的，属性动画是3.0以后支持的。
Animation和Animator的区别：Animation只是view的绘制效果，但实际属性没有改变。而Animator改变的是view的属性。比如做位移动画，用Animation时view的实际位置没有改变，而Animator可以改变view的位置。
本文简单介绍View动画，重点介绍属性动画。
帧动画
animation-list
在res/drawable目录下面创建文件：animation.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画 根标签下，通过item标签对动画中的每一个图片进行声明 android:duration 表示展示所用的该图片的时间长度 -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true" >
<item android:drawable="@drawable/icon1" android:duration="150"></item>
<item android:drawable="@drawable/icon2" android:duration="150"></item>
<item android:drawable="@drawable/icon3" android:duration="150"></item>
<item android:drawable="@drawable/icon4" android:duration="150"></item>
<item android:drawable="@drawable/icon5" android:duration="150"></item>
<item android:drawable="@drawable/icon6" android:duration="150"></item>
</animation-list>imageView.setImageResource(R.drawable.animation);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.start(); animated-selector
1.Animation
用Animation可以实现AlphaAnimation，ScaleAnimation，TranslateAnimation，RotateAnimation。
比如：
float fromY = 0f;
float toY = 100f;
anim = new TranslateAnimation(0.0f, 0.0f, fromY, toY);
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(3000);
anim.setStartOffset(700);
anim.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
view.startAnimation(anim);2. TypeEvaluator
TypeEvaluator提供了一个接口，开发者可以通过实现该接口自定义Evaluator。
目前系统提供的Evaluator有以下几种：
ArgbEvaluator，FloatArrayEvaluator，FloatEvaluator，IntArrayEvaluator，IntEvaluator，RectEvaluator，PointFEvaluator等，
看ArgbEvaluator的实现，我们发现只需要根据我们定义的属性简单的实现evaluate方法就可以了。这样我们就可以定义自己的XXEvaluator了。
根据动画执行的时间跟应用的Interplator，会计算出一个0~1之间的因子，即evalute函数中的fraction参数。
public class ArgbEvaluator implements TypeEvaluator {
private static final ArgbEvaluator sInstance = new ArgbEvaluator();
public static ArgbEvaluator getInstance() {
return sInstance;
}
public Object evaluate(float fraction, Object startValue, Object endValue) {
int startInt = (Integer) startValue;
int startA = (startInt >> 24) & 0xff;
int startR = (startInt >> 16) & 0xff;
int startG = (startInt >> 8) & 0xff;
int startB = startInt & 0xff;
int endInt = (Integer) endValue;
int endA = (endInt >> 24) & 0xff;
int endR = (endInt >> 16) & 0xff;
int endG = (endInt >> 8) & 0xff;
int endB = endInt & 0xff;
return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
(int)((startR + (int)(fraction * (endR - startR))) << 16) |
(int)((startG + (int)(fraction * (endG - startG))) << 8) |
(int)((startB + (int)(fraction * (endB - startB))));
}
}例子:
ValueAnimator backgroundColor = ValueAnimator.ofObject(new ArgbEvaluator(),
0xffffffff, 0xff000000);
backgroundColor.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
}
});
backgroundColor.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int) animation.getAnimatedValue();
mView.setBackgroundColor(color);
}
});
backgroundColor.setInterpolator(new LinearInterpolator());
backgroundColor.setDuration(500);
backgroundColor.start();3. View的animate()方法
我们也可以直接使用View的API animate()来做动画，而且还可以几个动画同时做哦！
下面的例子就实现了一个View的X位移、透明度、缩放的动画
view.animate().translationX(animTranslationXPx)
.alpha(0.5f)
.setStartDelay(0)
.scaleX(0.8f)
.scaleY(0.8f)
.setUpdateListener(null)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setDuration(1000)
.withEndAction(new Runnable() {
@Override
public void run() {
}
})
.start();4. ValueAnimator
ValueAnimator就是一个数值产生器，他本身不作用于任何一个对象，但是可以对产生的值进行动画处理。
为了实现动画效果，必须为ValueAnimator注册一个监听器ValueAnimator.AnimatorUpdateListener，该监听器负责更新对象的属性值。在实现这个监听器的时候，可以通过getAnimatedValue()的方法来获取当前帧的值。
下面例子用ValueAnimator来实现了一个缩放和位移动画：
final Rect fromRect = ......
final Rect toRect = ......
final float originScaleX = 1.0f;//(float)fromRect.width() / toRect.width();
final float originScaleY = 1.0f;//(float)fromRect.height() / toRect.height();
ValueAnimator trans = ValueAnimator.ofFloat(0, 1);
trans.setInterpolator(new LinearInterpolator());
trans.setDuration(600);
trans.addListener(new AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) { }
@Override
public void onAnimationRepeat(Animator animation) { }
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
trans.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float percent = (Float)animation.getAnimatedValue();
float toX = (fromRect.left + percent * (toRect.left - fromRect.left));
float toY = (fromRect.top + percent * (toRect.top - fromRect.top));
float toR = (fromRect.right + percent * (toRect.right - fromRect.right));
float toB = (fromRect.bottom + percent * (toRect.bottom - fromRect.bottom));
float scaleX = (float)(toR - toX) / fromRect.width();
float scaleY = (float)(toB - toY) / fromRect.height();
view.setTranslationX(toX-view.getLeft());
view.setTranslationY(toY-view.getTop());
view.setScaleX(scaleX*originScaleX);
view.setScaleY(scaleY*originScaleY);
float alpha = 0 + percent * 1 / (0.8f - 0);
......
}
});
trans.start();5. ObjectAnimator
ObjectAnimator继承自ValueAnimator，它会自动更新我们定义的属性值，来实现动画的目的。
下面的例子是用ObjectAnimator来实现X轴位移的动画：
ObjectAnimator anim = ObjectAnimator.ofFloat(v,View.TRANSLATION_X, newPos);
anim.setInterpolator(new LinearInterpolator());
anim.setDuration(500);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
}
});
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
}
});
anim.start();6. AnimatorSet
AnimatorSet用于实现多个动画的协同作用，AnimatorSet中有一系列的顺序控制方法：playTogether、playSequentially、animSet.play().with()、defore()、after()等。用来实现多个动画的协同工作方式。
下面的例子用AnimatorSet实现了缩放和位移动画：
ObjectAnimator trans = ObjectAnimator.ofFloat(view,View.TRANSLATION_X, newPos);
ObjectAnimator scalex = ObjectAnimator.ofFloat(view, View.SCALE_X, 1.0f, 0.8f);
ObjectAnimator scaley = ObjectAnimator.ofFloat(view, View.SCALE_Y, 1.0f, 0.8f);
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(scalex, scaley, trans);
animSet.setDuration(duration);
animSet.setInterpolator(new LinearInterpolator());
animSet.addListener(new AnimatorListener() {
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
// do end;
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationStart(Animator animation) {
}
});
animSet.start();关于时间的设置问题：
如果AnimatorSet设置了setDuration，那么不管子动画有没有设置时间，都要AnimatorSet的时间为准，如果AnimatorSet没有设置，那么子动画以各自的时间为准。当所有动画完成后调用onAnimationEnd。
7.使用xml来创建动画
animation
final Animation ani = AnimationUtils.loadAnimation(this, R.anim.test);
ani.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
mView.startAnimation(ani);<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:fromXScale="1.0" android:toXScale="0.2" android:fromYScale="1.0" android:toYScale="1.0" />当然也可以用下面的方式做。
objectAnimator
Animator ani= AnimatorInflater.loadAnimator(this, R.anim.test);
ani.setTarget(mView);
ani.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
}
});
ani.start();test.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="scaleX" android:valueFrom="1.0" android:valueTo="0.2" android:valueType="floatType" >
</objectAnimator>注意两个R.anim.test不要用错，否则会报错。
通过这个动画也可以看出一般动画和属性动画的区别：
animation做完动画后属性会恢复原样，也就是说它改变的是View的绘制效果，真正的View的属性并没有改变，animator做完动画后保持动画完成时的属性不变，说明它把View的属性改变了。
set
R.anim.test
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false" android:zAdjustment="top">
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:interpolator="@interpolator/test_alpha" android:fillEnabled="true" android:fillBefore="false" android:fillAfter="true" android:duration="336"/>
<translate android:fromYDelta="15%" android:toYDelta="0" android:fillEnabled="true" android:fillBefore="true" android:fillAfter="true" android:interpolator="@interpolator/test_translate" android:duration="336"/>
<scale android:fromXScale="0.94" android:toXScale="1.0" android:fromYScale="0.94" android:toYScale="1.0" android:interpolator="@interpolator/test_scale" android:duration="336" android:pivotX="50%" android:pivotY="50%"/>
</set>R.interpolator.test_alpha
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.1" android:controlY1="0" android:controlX2="0" android:controlY2="1" />Java
final Animation ani = AnimationUtils.loadAnimation(mActivity, R.anim.test);
ani.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
imageView.startAnimation(ani);Animator set
当然也可以用下面的方式实现：
test_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together" android:shareInterpolator="false" android:zAdjustment="top">
<objectAnimator android:propertyName="alpha" android:valueFrom="0.0" android:valueTo="1.0" android:valueType="floatType" android:interpolator="@interpolator/test_alpha" android:duration="336" />
<objectAnimator android:propertyName="translationY" android:valueFrom="@dimen/translation_y" android:valueTo="0" android:valueType="floatType" android:interpolator="@interpolator/test_alpha" android:duration="336" />
<set android:ordering="together">
<objectAnimator android:propertyName="scaleX" android:valueFrom="0.94" android:valueTo="1.0" android:valueType="floatType" android:interpolator="@interpolator/test_scale" android:duration="336" />
<objectAnimator android:propertyName="scaleY" android:valueFrom="0.94" android:valueTo="1.0" android:valueType="floatType" android:interpolator="@interpolator/test_scale" android:duration="336" />
</set>
</set>Java
Animator animator = AnimatorInflater.loadAnimator(mActivity, R.animator.test_animator);
animator.setTarget(view);
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
end.run();
}
@Override
public void onAnimationCancel(Animator animation) {
end.run();
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();8.自定义ObjectAnimator属性
通常情况下我们使用ObjectAnimator来实现动画效果，可以用下面的方法：
ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
anim.setDuration(1000);
anim.start();因为在View中已经实现了alpha属性的动画，那么如果在View中没有实现的属性我们如何使用ObjectAnimator来做动画呢？
我们可以用下面的方法：
ObjectAnimator anim = ObjectAnimator.ofFloat(myTextView, "test", 0f, 1f);
anim.setDuration(1000);
anim.start();test就代表了View的一个属性，只需要一个类继承View并实现
public void setTest(float set){
//to do something
}如果用下面这样只为该属性设置一个属性值，那么还要实现getter的方法：
ObjectAnimator anim = ObjectAnimator.ofFloat(view, "testt", 1f);
anim.setDuration(1000);
anim.start();
public void setTestt(float set){
mTestt = set;
}
public float getTestt(){
return mTestt;
}当然如果view中没有该属性的动画，那么还可以用ValueAnimator来实现，只不过要ValueAnimator.AnimatorUpdateListener接口，自己更新相应的属性值
9.propertyValuesHolder
多动画效果的另一种实现方法
PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("alpha", 1f, 0f, 1f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);
PropertyValuesHolder pvhZ = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);
ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY, pvhZ)
.setDuration(1000)
.start();10.Keyframe
PropertyValuesHolder的工厂方法里面，除了整形ofInt()、浮点型ofFloat()、Object类型ofObject()之外，还有一种：ofKeyframe()。
Keyframe类型对象由一个time/value对组成，定义了指定时间点的指定值，即关键帧。
每一个keyframe还可以拥有自己的interpolator，控制了前一个关键帧到这一个关键帧之间的时间动画行为。
Keyframe 对象的构造也用是工厂方法：ofInt(), ofFloat(), or ofObject()。
Keyframe对象构造完之后就可以用 ofKeyframe()工厂方法来构造PropertyValuesHolder对象。
Keyframe kf0 = Keyframe.ofFloat(0, 1.0f);
Keyframe kf1 = Keyframe.ofFloat(0.25f, 0.5f);
Keyframe kf2 = Keyframe.ofFloat(0.5f, 0f);
Keyframe kf4 = Keyframe.ofFloat(0.75f, 0.5f);
Keyframe kf3 = Keyframe.ofFloat(1f, 1.0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("alpha", kf0, kf1, kf2, kf4, kf3);
ObjectAnimator anim = ObjectAnimator.ofPropertyValuesHolder(mView, pvhRotation);
anim.setDuration(2000);
anim.start();上述代码的意思为：设置btn对象的width属性值使其：
开始时 alpha=1.0
动画开始1/4时 alpha=0.5
动画开始1/2时 alpha=0
动画开始3/4时 alpha=0.5
动画结束时 alpha=1.0
用下面的代码可以实现同样的效果（上述代码时间值是线性，变化均匀）：
ObjectAnimator oa=ObjectAnimator.ofFloat(mView, "alpha", 1.0f, 0.5f, 0f, 0.5f, 1.0f);
oa.setDuration(2000);
oa.start();11.Interpolator
贝塞尔曲线
一个查看三阶贝塞尔曲线效果的网站
http://cubic-bezier.com/#.45,0,.21,1
PathInterpolator
PathInterpolator是android5.0才开始提供的一种时间时间插值器，和LinearInterpolator，AccelerateDecelerateInterpolator一样用来设置给animator或者animation的，PathInterpolator需要一段起点是（0,0），终点是（1,1）的path路径。
看它的几个构造函数：
public PathInterpolator(Path path) ：自定义的Path，但是要保证起点是（0,0），终点是（1,1）。
public PathInterpolator(float controlX, float controlY)：二阶的贝塞尔曲线，controlX和controlY是控制点的坐标
public PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2)三阶的贝塞尔曲线，（controlX1，controlY1）和（controlX2，controlY2）是两个控制点的坐标。
还可以通过xml方式定义PathInterpolator：
...... ValueAnimator trans = ValueAnimator.ofFloat(0, 1); trans.setInterpolator(enterInterpolator); ......
public Interpolator enterInterpolator;
enterInterpolator= AnimationUtils.loadInterpolator(context,R.interpolator.enter);enter.xml
<?xml version="1.0" encoding="utf-8"?>
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.45" android:controlY1="0" android:controlX2="0.34" android:controlY2="1" />用android:pathData来描述一个path
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:pathData="L0.3,0 C 0.5,0 0.7,1 1, 1" />二阶贝塞尔曲线
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:controlX1="0.3" android:controlY1="0"/>加减速引子
<decelerateInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:factor="2.5" />android:factor 浮点值，加减速速率，默认为1
其他的动画常用知识：
ValueAnimator.reverse()
反向进行当前的ValueAnimator动画，可以进行取消动画时的动画，当动画已经开始运行时，调用reverse()，那么当前动画会停止，并从当前动画的点反向进行已经做过的动画。如果动画还没有开始，那么他会从最后开始向前做动画。