一 為什么引入屬性動畫
- 補(bǔ)間動畫只有四種（移動宋舷、縮放鳖链、旋轉(zhuǎn)和淡入淡出）
補(bǔ)間動畫還有一個缺陷呢袱，就是它只能夠?qū)崿F(xiàn)移動官扣、縮放、旋轉(zhuǎn)和淡入淡出這四種動畫操作羞福，那如果我們希望可以對View的背景色進(jìn)行動態(tài)地改變呢惕蹄？很遺憾，我們只能靠自己去實現(xiàn)了治专。說白了卖陵，之前的補(bǔ)間動畫機(jī)制就是使用硬編碼的方式來完成的，功能限定死就是這些张峰，基本上沒有任何擴(kuò)展性可言泪蔫。
補(bǔ)間動畫只能作用于view，不能作用于canvas畫出的圖形
補(bǔ)間動畫有個致命的缺陷：它只是改變了View的顯示效果而已喘批，而不會真正去改變View的屬性
比如說撩荣，現(xiàn)在屏幕的左上角有一個按鈕铣揉，然后我們通過補(bǔ)間動畫將它移動到了屏幕的右下角，現(xiàn)在你可以去嘗試點擊一下這個按鈕餐曹，點擊事件是絕對不會觸發(fā)的逛拱，因為實際上這個按鈕還是停留在屏幕的左上角，只不過補(bǔ)間動畫將這個按鈕繪制到了屏幕的右下角而已台猴。
二 屬性動畫基本使用
新引入的屬性動畫機(jī)制已經(jīng)不再是針對于View來設(shè)計的了朽合，也不限定于只能實現(xiàn)移動、縮放饱狂、旋轉(zhuǎn)和淡入淡出這幾種動畫操作曹步，同時也不再只是一種視覺上的動畫效果了。它實際上是一種不斷地對值進(jìn)行操作的機(jī)制休讳，并將值賦值到指定對象的指定屬性上箭窜，可以是任意對象的任意屬性。所以我們?nèi)匀豢梢詫⒁粋€View進(jìn)行移動或者縮放衍腥，但同時也可以對自定義View中的Point對象進(jìn)行動畫操作了磺樱。我們只需要告訴系統(tǒng)動畫的運行時長，需要執(zhí)行哪種類型的動畫婆咸，以及動畫的初始值和結(jié)束值竹捉，剩下的工作就可以全部交給系統(tǒng)去完成了。
1 ValueAnimator
ValueAnimator是整個屬性動畫機(jī)制當(dāng)中最核心的一個類尚骄，前面我們已經(jīng)提到了块差，屬性動畫的運行機(jī)制是通過不斷地對值進(jìn)行操作來實現(xiàn)的，而初始值和結(jié)束值之間的動畫過渡就是由ValueAnimator這個類來負(fù)責(zé)計算的倔丈。它的內(nèi)部使用一種時間循環(huán)的機(jī)制來計算值與值之間的動畫過渡憨闰，我們只需要將初始值和結(jié)束值提供給ValueAnimator，并且告訴它動畫所需運行的時長需五，那么ValueAnimator就會自動幫我們完成從初始值平滑地過渡到結(jié)束值這樣的效果鹉动。除此之外，ValueAnimator還負(fù)責(zé)管理動畫的播放次數(shù)宏邮、播放模式泽示、以及對動畫設(shè)置監(jiān)聽器等，確實是一個非常重要的類蜜氨。
基本使用
ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
anim.setDuration(300);
anim.start();
監(jiān)聽value的改變
ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
anim.setDuration(300);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();//得到0f~100f當(dāng)中的這個時間點對應(yīng)的值
float percent = (float) animation.getAnimatedFraction();// 動畫執(zhí)行的百分比 0~1
}
});
anim.start();
常用方法
可以使用的偏移量
ValueAnimator.ofFloat(1f);//浮點數(shù)
ValueAnimator.ofArgb(Color.BLACK);//顏色偏移
ValueAnimator.ofInt(1);//整形
ValueAnimator.ofObject();//對象
ValueAnimator.ofPropertyValuesHolder();
setStartDelay()//方法來設(shè)置動畫延遲播放的時間械筛，
setRepeatCount()//設(shè)置動畫循環(huán)播放的次數(shù)
setRepeatMode()//循環(huán)播放的模式，循環(huán)模式包括RESTART和REVERSE兩種飒炎，分別表示重新播放和倒序播放的意思埋哟。
animator.setDuration(5000); // 動畫播放時長
2 ObjectAnimator
相比于ValueAnimator，ObjectAnimator可能才是我們最常接觸到的類郎汪，因為ValueAnimator只不過是對值進(jìn)行了一個平滑的動畫過渡赤赊，但我們實際使用到這種功能的場景好像并不多闯狱。而ObjectAnimator則就不同了，它是可以直接對任意對象的任意屬性進(jìn)行動畫操作的砍鸠，比如說View的alpha屬性扩氢。
一個TextView在5秒中內(nèi)從常規(guī)變換成全透明耕驰，再從全透明變換成常規(guī)爷辱，就可以這樣寫：
ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);
animator.setDuration(5000);
animator.start();
大概原理
//1.-------------屬性動畫基礎(chǔ)--------------------
iv.setTranslationX(100);
iv.setScaleX(scaleX);
iv.setAlpha(alpha);
iv.setRotation(rotation)
iv.setBackgroundColor(color);
//只要view里面有setXXX()方法就可以通過反射達(dá)到變化的目的
ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 0f,200f);
//ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "backgroundColor", Color.RED,Color.BLUE);
oa.setDuration(500);
oa.start();
監(jiān)聽值變化用ValueAnimator
//方法 2）---------------ValueAnimator---如果只需要監(jiān)聽值變化就用ValueAnimator---------------
ValueAnimator animator = ValueAnimator.ofFloat(0f, 200f);
animator.setDuration(200);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();//得到0f~100f當(dāng)中的這個時間點對應(yīng)的值
iv.setScaleX(0.5f+value/200);
iv.setScaleY(0.5f+value/200);
}
});
animator.start();
PropertyValuesHolder
// ObjectAnimator內(nèi)部使用了PropertyValuesHolder，所以這里傳入PropertyValuesHolder也ok
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("alpha", 1f, 0.5f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0.5f);
PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0.5f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(iv, holder1, holder2, holder3);
animator.setDuration(200);
animator.start();
3 動畫組合
函數(shù)介紹
animator.setRepeatCount(2);//重復(fù)兩次
animator.setRepeatCount(ValueAnimator.INFINITE);//無限重復(fù)
animator.setRepeatMode(ValueAnimator.RESTART);// 重新開始
animator.setRepeatMode(ValueAnimator.REVERSE);
animatorSet.play(animator3).with(animator2).after(animator1);//animator1在前面
animatorSet.play(animator3).with(animator2).before(animator1);//animator1在后面
animatorSet.playTogether(animator1, animator2, animator3);// 一起執(zhí)行
animatorSet.playSequentially(animator1, animator2, animator3);// 一個個按順序來執(zhí)行
例子：
//-------------動畫集合-----------------
ImageView iv = new ImageView(this);
ObjectAnimator animator1 = ObjectAnimator.ofFloat(iv, "translationX", 0f, 100f);
animator1.setRepeatCount(3);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(iv, "alpha", 0f, 1f);
animator2.setStartDelay(startDelay);//設(shè)置延遲執(zhí)行
ObjectAnimator animator3 = ObjectAnimator.ofFloat(iv, "scaleX", 0f, 2f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
animatorSet.play(animator3).with(animator2).after(animator1);//animator1在前面
animatorSet.play(animator3).with(animator2).before(animator1);//animator1在后面
animatorSet.playTogether(animator1, animator2, animator3);
animatorSet.playSequentially(animator1, animator2, animator3);// 一個個按順序來執(zhí)行
animatorSet.start();
4 動畫監(jiān)聽
常用監(jiān)聽函數(shù)
- 監(jiān)聽值變化
final ObjectAnimator animator = ObjectAnimator.ofFloat(iv, "hehe", 0f, 100f);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 監(jiān)聽動畫回調(diào)
animation.getAnimatedFraction();//動畫執(zhí)行的百分比 0~1 //API 12+
float value = (float) animation.getAnimatedValue();//得到0f~100f當(dāng)中的這個時間點對應(yīng)的值
iv.setScaleX(0.5f + value / 200);
iv.setScaleY(0.5f + value / 200);
iv.setTranslationX(value);
}
});
animator.start();
- 監(jiān)聽動畫執(zhí)行
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
animator.setRepeatCount(ValueAnimator.RESTART);
}
@Override
public void onAnimationCancel(Animator animation) {
}
});
- 監(jiān)聽動畫執(zhí)行可選部分監(jiān)聽
// 監(jiān)聽特定的函數(shù)：AnimatorListenerAdapter是一個抽象函數(shù)朦肘，實現(xiàn)了Animator.AnimatorListener接口
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// TODO Auto-generated method stub
super.onAnimationEnd(animation);
}
});
5 插值器
Interpolator這個東西很難進(jìn)行翻譯饭弓，直譯過來的話是補(bǔ)間器的意思，它的主要作用是可以控制動畫的變化速率媒抠，比如去實現(xiàn)一種非線性運動的動畫效果弟断。那么什么叫做非線性運動的動畫效果呢？就是說動畫改變的速率不是一成不變的趴生，像加速運動以及減速運動都屬于非線性運動阀趴。
決定某個時間執(zhí)行哪段曲線
//6.---------插值器（加速器）Interpolater-----------
ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", 0f, 1000f);
oa.setDuration(800);
//oa.setInterpolator(new AccelerateInterpolator(1));// 加速
//oa.setInterpolator(new AccelerateDecelerateInterpolator());// 先加速在減速
oa.setInterpolator(new BounceInterpolator()); // 下落彈起
//oa.setInterpolator(new AnticipateInterpolator());// 先上再下
//oa.setInterpolator(new CycleInterpolator(5));
oa.start();
小球落地插值器效果
幾種差值器說明.png
幾種差值器的曲線圖
先加速后減速效果
AccelerateDecelerateInterpolator 加速減速插值器
public class AccelerateDecelerateInterpolator extends BaseInterpolator
implements NativeInterpolatorFactory {
public AccelerateDecelerateInterpolator() {
}
public float getInterpolation(float input) {
return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}
}
加速效果
AccelerateInterpolator 加速插值器
public class AccelerateInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
private final float mFactor;
private final double mDoubleFactor;
public AccelerateInterpolator() {
mFactor = 1.0f;
mDoubleFactor = 2.0;
}
public AccelerateInterpolator(float factor) {
mFactor = factor;
mDoubleFactor = 2 * mFactor;
}
public float getInterpolation(float input) {
if (mFactor == 1.0f) {
return input * input;
} else {
return (float)Math.pow(input, mDoubleFactor);
}
}
先回彈，再加速
AnticipateInterpolator 回蕩秋千插值器
先回彈苍匆，再加速刘急，減速，再回彈
AnticipateOvershootInterpolator
小球落地彈起效果
BounceInterpolator 彈跳插值器
正弦波
CycleInterpolator 正弦周期變化插值器
減速
DecelerateInterpolator 減速插值器
Android基于Facebook Rebound的動畫效果框架Backboard demo (非常炫酷)
6 xml中使用屬性動畫
- (1) XML文件位置：res/animator/filename.xml
- (2) 文件編譯后的類型：ValueAnimator, ObjectAnimator, AnimatorSet浸踩。
<set
// 執(zhí)行順序 同時 | 順序執(zhí)行
android:ordering=["together" | "sequentially"]>
<objectAnimator
// 屬性名叔汁，alpha translateX scale
android:propertyName="string"
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
// 差值器：注意位置
android:interpolator="@android:anim/decelerate_interpolator">
// 模式 重復(fù)，反轉(zhuǎn)重復(fù)
android:repeatMode=["repeat" | "reverse"]
// 值類型 ofFlaot ofInt
android:valueType=["intType" | "floatType"]/>
<animator
android:duration="int"
android:valueFrom="float | int | color"
android:valueTo="float | int | color"
android:startOffset="int"
android:repeatCount="int"
android:repeatMode=["repeat" | "reverse"]
android:valueType=["intType" | "floatType"]/>
<set>
...
</set>
</set>
- (3) 引用資源的方式：
// AnimatorSet
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
R.anim.property_animator);
set.setTarget(myObject);
set.start();
// animator
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.anim_file);
animator.setTarget(view);
animator.start();
7 TypeEvaluator 估值器
那么TypeEvaluator的作用到底是什么呢检碗？簡單來說据块，就是告訴動畫系統(tǒng)如何從初始值過度到結(jié)束值。
如果是移動折剃，Evaluator能改變移動的軌跡
Evaluator和Interpolator的區(qū)別
Evaluator（估值器）作用：決定startValue到endValue的軌跡曲線
Interpolator（差值器）作用：決定某一時間執(zhí)行哪段曲線另假，決定每一曲線段的運動速率，重復(fù)某部分曲線段效果（小球彈起）
我們來看一下FloatEvaluator的代碼實現(xiàn)：
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);
}
}
FloatEvaluator 實現(xiàn)了TypeEvaluator 的evaluate方法怕犁， fraction表示執(zhí)行的百分比, startValue動畫開始值, endValue動畫結(jié)束值浪谴，
//------------------案例：實現(xiàn)自由落體拋物線效果-----------------
/**
* x: 勻速
* y: 加速度 y=vt=1/2*g*t*t
* 估值器---控制坐標(biāo)PointF(x,y)
*/
ValueAnimator valueAnimator = new ValueAnimator();
// valueAnimator.setInterpolator(value)
valueAnimator.setDuration(2000);
valueAnimator.setObjectValues(new PointF(0, 0));
// valueAnimator.setObjectValues(new PointF(0, 0),new PointF(10, 10));
final PointF pointF = new PointF();
//顏色估值器
// setBackgroundColor((Integer) sArgbEvaluator.evaluate(ratio, mDiscrollveFromBgColor, mDiscrollveToBgColor));
valueAnimator.setEvaluator(new TypeEvaluator<PointF>() {
@Override
public PointF evaluate(float fraction, PointF startValue,
PointF endValue) {
// 估值計算方法---可以在執(zhí)行的過程當(dāng)中干預(yù)改變屬性的值---做效果：用自己的算法來控制
//不斷地去計算修改坐標(biāo)
//x勻速運動 x=v*t 為了看起來效果好我讓t變成fraction*5
pointF.x = 100f*(fraction*5);
//加速度 y=vt=1/2*g*t*t
// pointF.y = 0.5f*9.8f*(fraction*5)*(fraction*5);
pointF.y = 10f*0.5f*9.8f*(fraction*5)*(fraction*5);
return pointF;
}
});
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointF f = (PointF) animation.getAnimatedValue();
iv.setX(f.x);
iv.setY(f.y);
}
});
valueAnimator.start();
ofObject方法使用
1 創(chuàng)建point估值器，不斷返回坐標(biāo)變換值
public class PointEvaluator implements TypeEvaluator{
@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
PointF startPoint = (Point) startValue;
PointF endPoint = (Point) endValue;
float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
PointF point = new Point(x, y);
return point;
}
}
2 通過ofObject使用剛剛創(chuàng)建的估值器因苹，從point1 到point2的移動
Point point1 = new Point(0, 0);
Point point2 = new Point(300, 300);
ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), point1, point2);
anim.setDuration(5000);
anim.start();
動態(tài)改變View的顏色
--------------------------------------------------------------------------
public class MyAnimView extends View {
private String color;
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
mPaint.setColor(Color.parseColor(color));
invalidate();
}
}
--------------------------------------------------------------------------
ObjectAnimator anim = ObjectAnimator.ofObject(myAnimView, "color", new ArgbEvaluator(),
"#0000FF", "#FF0000");
anim.setDuration(5000);
anim.start();
