Android動(dòng)畫合集之屬性動(dòng)畫-又見(jiàn)
本節(jié)引言:
上節(jié)我們對(duì)Android的屬性動(dòng)畫進(jìn)行了初步的學(xué)習(xí),相信大家對(duì)于屬性動(dòng)畫已經(jīng)不再是 一知半解的狀態(tài)了,本節(jié)我們繼續(xù)來(lái)探究Android屬性動(dòng)畫的一些更高級(jí)的用法! 依舊貼下郭神的三篇文章~
Android屬性動(dòng)畫完全解析(上),初識(shí)屬性動(dòng)畫的基本用法
Android屬性動(dòng)畫完全解析(中),ValueAnimator和ObjectAnimator的高級(jí)用法
Android屬性動(dòng)畫完全解析(下),Interpolator和ViewPropertyAnimator的用法
內(nèi)容依舊是參考的上述三篇文章,好的,開(kāi)始本節(jié)內(nèi)容~
1.Evaluator自定義
1)Evaluator介紹
上一節(jié)中的8.4.3 Android動(dòng)畫合集之屬性動(dòng)畫-初見(jiàn),使用動(dòng)畫的第一步都是:
調(diào)用ValueAnimator的ofInt(),ofFloat()或ofObject()靜態(tài)方法創(chuàng)建ValueAnimator實(shí)例!
在例子中,ofInt和ofFloat我們都用到了,分別用于對(duì)浮點(diǎn)型和整型的數(shù)據(jù)進(jìn)行動(dòng)畫操作!
那么ofObject()?初始對(duì)象和結(jié)束對(duì)象?如何過(guò)渡法?或者說(shuō)這玩意怎么用?
好的,帶著疑問(wèn),我們先來(lái)了解一個(gè)東西:Evaluator,在屬性動(dòng)畫概念叨叨逼處其實(shí)我們就說(shuō)到了這個(gè)東西:
用來(lái)告訴動(dòng)畫系統(tǒng)如何從初始值過(guò)渡到結(jié)束值!好的,我們的入手點(diǎn)沒(méi)錯(cuò)! 我們進(jìn)去IntEvaluator的源碼,看下里面寫了些什么?
嗯,實(shí)現(xiàn)了TypeEvaluator接口,然后重寫了evaluate()方法,參數(shù)有三個(gè),依次是:
- fraction:動(dòng)畫的完成度,我們根據(jù)他來(lái)計(jì)算動(dòng)畫的值應(yīng)該是多少
- startValue:動(dòng)畫的起始值
- endValue:動(dòng)畫的結(jié)束值
動(dòng)畫的值 = 初始值 + 完成度 * (結(jié)束值 - 初始值)
同樣的還有FloatEvaluator,我們想告訴系統(tǒng)如何從初始對(duì)象過(guò)度到結(jié)束對(duì)象,那么我們就要 自己來(lái)實(shí)現(xiàn)TypeEvaluator接口,即自定義Evaluator了,說(shuō)多無(wú)益,寫個(gè)例子來(lái)看看:
2)使用示例
運(yùn)行效果圖:
代碼實(shí)現(xiàn):
定義一個(gè)對(duì)象Point.java,對(duì)象中只有x,y兩個(gè)屬性以及get,set方法~
/** * Created by Jay on 2015/11/18 0018. */ public class Point { private float x; private float y; public Point() { } public Point(float x, float y) { this.x = x; this.y = y; } public float getX() { return x; } public float getY() { return y; } public void setX(float x) { this.x = x; } public void setY(float y) { this.y = y; } }
接著自定義Evaluator類:PointEvaluator.java,實(shí)現(xiàn)接口重寫evaluate方法~
/** * Created by Jay on 2015/11/18 0018. */ public class PointEvaluator implements TypeEvaluator{ @Override public Point evaluate(float fraction, Point startValue, Point endValue) { float x = startValue.getX() + fraction * (endValue.getX() - startValue.getX()); float y = startValue.getY() + fraction * (endValue.getY() - startValue.getY()); Point point = new Point(x, y); return point; } }
然后自定義一個(gè)View類:AnimView.java,很簡(jiǎn)單~
/** * Created by Jay on 2015/11/18 0018. */ public class AnimView extends View { public static final float RADIUS = 80.0f; private Point currentPoint; private Paint mPaint; public AnimView(Context context) { this(context, null); } public AnimView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public AnimView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.BLUE); } private void drawCircle(Canvas canvas){ float x = currentPoint.getX(); float y = currentPoint.getY(); canvas.drawCircle(x, y, RADIUS, mPaint); } private void startAnimation() { Point startPoint = new Point(RADIUS, RADIUS); Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS); ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { currentPoint = (Point) animation.getAnimatedValue(); invalidate(); } }); anim.setDuration(3000l); anim.start(); } @Override protected void onDraw(Canvas canvas) { if (currentPoint == null) { currentPoint = new Point(RADIUS, RADIUS); drawCircle(canvas); startAnimation(); } else { drawCircle(canvas); } } }
最后MainActivity.java處實(shí)例化這個(gè)View即可~
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new AnimView(this)); } }
3)示例增強(qiáng)版
我們上面示例的基礎(chǔ)上加上圓移動(dòng)時(shí)的顏色變化~ 這里我們另外用一個(gè)ObjectAnimator來(lái)加載顏色變化的動(dòng)畫,我們?cè)赩iew中加多個(gè) int color來(lái)控制顏色,另外寫上getColor()和setColor()的方法,我們先來(lái)自定義個(gè)Evaluator吧~
運(yùn)行效果圖:
實(shí)現(xiàn)代碼:
ColorEvaluator.java:
/** * Created by Jay on 2015/11/18 0018. */ public class ColorEvaluator implements TypeEvaluator{ @Override public Integer evaluate(float fraction, Integer startValue, Integer endValue) { int alpha = (int) (Color.alpha(startValue) + fraction * (Color.alpha(endValue) - Color.alpha(startValue))); int red = (int) (Color.red(startValue) + fraction * (Color.red(endValue) - Color.red(startValue))); int green = (int) (Color.green(startValue) + fraction * (Color.green(endValue) - Color.green(startValue))); int blue = (int) (Color.blue(startValue) + fraction * (Color.blue(endValue) - Color.blue(startValue))); return Color.argb(alpha, red, green, blue); } }
然后自定義View那里加個(gè)color,get和set方法;創(chuàng)建一個(gè)ObjectAnimator, 和AnimatorSet,接著把動(dòng)畫組合到一起就到,這里就加點(diǎn)東西而已,怕讀者有問(wèn)題, 直接另外建個(gè)View吧~
AnimView2.java:
/** * Created by Jay on 2015/11/18 0018. */ public class AnimView2 extends View { public static final float RADIUS = 80.0f; private Point currentPoint; private Paint mPaint; private int mColor; public AnimView2(Context context) { this(context, null); } public AnimView2(Context context, AttributeSet attrs) { super(context, attrs); init(); } public AnimView2(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.BLUE); } private void drawCircle(Canvas canvas){ float x = currentPoint.getX(); float y = currentPoint.getY(); canvas.drawCircle(x, y, RADIUS, mPaint); } private void startAnimation() { Point startPoint = new Point(RADIUS, RADIUS); Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS); ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { currentPoint = (Point) animation.getAnimatedValue(); invalidate(); } }); ObjectAnimator objectAnimator = ObjectAnimator.ofObject(this, "color", new ColorEvaluator(), Color.BLUE, Color.RED); //動(dòng)畫集合將前面兩個(gè)動(dòng)畫加到一起,with同時(shí)播放 AnimatorSet animatorSet = new AnimatorSet(); animatorSet.play(anim).with(objectAnimator); animatorSet.setStartDelay(1000l); animatorSet.setDuration(3000l); animatorSet.start(); } @Override protected void onDraw(Canvas canvas) { if (currentPoint == null) { currentPoint = new Point(RADIUS, RADIUS); drawCircle(canvas); startAnimation(); } else { drawCircle(canvas); } } //color的get和set方法~ public int getColor() { return mColor; } public void setColor(int color) { mColor = color; mPaint.setColor(color); invalidate(); } }
然后MainActivity,setContentView那里把AnimView改成AnimView2就好~
2.Interpolator(補(bǔ)間器)
嗯,在講補(bǔ)間動(dòng)畫的時(shí)候我們就講過(guò)這個(gè)東東了~不知道你還有印象沒(méi)?
上面的補(bǔ)間器補(bǔ)間動(dòng)畫和屬性動(dòng)畫都可用,而且補(bǔ)間動(dòng)畫還新增了一個(gè)TimeInterpolator接口 該接口是用于兼容之前的Interpolator的,這使得所有過(guò)去的Interpolator實(shí)現(xiàn)類都可以直接拿過(guò)來(lái) 放到屬性動(dòng)畫當(dāng)中使用!我們可以調(diào)用動(dòng)畫對(duì)象的setInterpolator()方法設(shè)置不同的Interpolator! 我們先該點(diǎn)東西,讓小球從屏幕正中央的頂部掉落到底部~ 然后我們會(huì)我們?yōu)槲覀兊募蟿?dòng)畫調(diào)用下述語(yǔ)句:animatorSet.setInterpolator(new AccelerateInterpolator(2f));括號(hào)里的值用于控制加速度~
運(yùn)行效果:
好像有點(diǎn)不和常理,正常應(yīng)該是會(huì)彈起來(lái)的吧,我們換成BounceInterpolator試試~
嘿嘿,效果蠻贊的,當(dāng)然還有N多個(gè)系統(tǒng)提供好的Interpolator,大家可以自己一一嘗試,這里就 不慢慢跟大家糾結(jié)了~
下面我們來(lái)看看:
1)Interpolator的內(nèi)部實(shí)現(xiàn)機(jī)制
我們先到TimeInterpolator接口的源碼,發(fā)現(xiàn)這里只有一個(gè)getInterpolation()方法;
簡(jiǎn)單的解釋: getInterpolation()方法中接收一個(gè)input參數(shù),這個(gè)參數(shù)的值會(huì)隨著動(dòng)畫的運(yùn)行而不斷變化, 不過(guò)它的變化是非常有規(guī)律的,就是根據(jù)設(shè)定的動(dòng)畫時(shí)長(zhǎng)勻速增加,變化范圍是0到1。 也就是說(shuō)當(dāng)動(dòng)畫一開(kāi)始的時(shí)候input的值是0,到動(dòng)畫結(jié)束的時(shí)候input的值是1,而中間的值則 是隨著動(dòng)畫運(yùn)行的時(shí)長(zhǎng)在0到1之間變化的。
這里的input值決定了我們TypeEvaluator接口里的fraction的值。 input的值是由系統(tǒng)經(jīng)過(guò)計(jì)算后傳入到getInterpolation()方法中的,然后我們可以自己實(shí)現(xiàn)getInterpolation()方法中的算法,根據(jù)input的值來(lái)計(jì)算出一個(gè)返回值,而這個(gè)返回值就是fraction了。
我們可以看看LinearInterpolator里的代碼:
這里沒(méi)有處理過(guò)直接返回input值,即fraction的值就是等于input的值,這就是勻速運(yùn)動(dòng)的 Interpolator的實(shí)現(xiàn)方式!其實(shí)無(wú)非就是算法不同,這就涉及到一些數(shù)學(xué)的東西了,又一次 體會(huì)到數(shù)學(xué)的重要性了,這里再貼個(gè)BounceInterpolator的源碼吧:
別問(wèn)我這里的算法,我也不知道哈,我們?cè)僬覀€(gè)容易理解點(diǎn)的:AccelerateDecelerateInterpolator
這個(gè)Interpolator是先加速后減速效果的:(float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f 的算法理解:
解:由input的取值范圍為[0,1],可以得出cos中的值的取值范圍為[π,2π],對(duì)應(yīng)的值為-1和1; 再用這個(gè)值來(lái)除以2加上0.5之后,getInterpolation()方法最終返回的結(jié)果值范圍還是[0,1], 對(duì)應(yīng)的曲線圖如下:
所以是一個(gè)先加速后減速的過(guò)程!
嗯,學(xué)渣沒(méi)法玩了...,上面全是郭大叔文章里搬過(guò)來(lái)的...我想靜靜...
2)自定義Interpolator
好吧,還是等會(huì)兒再憂傷吧,寫個(gè)自定義的Interpolator示例先: 非常簡(jiǎn)單,實(shí)現(xiàn)TimeInterpolator接口,重寫getInterpolation方法
示例代碼如下
private class DecelerateAccelerateInterpolator implements TimeInterpolator { @Override public float getInterpolation(float input) { if (input < 0.5) { return (float) (Math.sin(input * Math.PI) / 2); } else { return 1 - (float) (Math.sin(input * Math.PI) / 2); } } }
調(diào)用setInterpolator(new DecelerateAccelerateInterpolator())設(shè)置下即可~ 限于篇幅就不貼圖了~
3.ViewPropertyAnimator
3.1后系統(tǒng)當(dāng)中附增的一個(gè)新的功能,為View的動(dòng)畫操作提供一種更加便捷的用法! 假如是以前,讓一個(gè)TextView從正常狀態(tài)變成透明狀態(tài),會(huì)這樣寫:
ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 0f); animator.start();
而使用ViewPropertyAnimator來(lái)實(shí)現(xiàn)同樣的效果則顯得更加易懂:
textview.animate().alpha(0f);
還支持連綴用法,組合多個(gè)動(dòng)畫,設(shè)定時(shí)長(zhǎng),設(shè)置Interpolator等~
textview.animate().x(500).y(500).setDuration(5000) .setInterpolator(new BounceInterpolator());
用法很簡(jiǎn)單,使用的時(shí)候查下文檔就好~,另外下面有幾個(gè)細(xì)節(jié)的地方要注意一下!
- 整個(gè)ViewPropertyAnimator的功能都是建立在View類新增的animate()方法之上的, 這個(gè)方法會(huì)創(chuàng)建并返回一個(gè)ViewPropertyAnimator的實(shí)例,之后的調(diào)用的所有方法, 設(shè)置的所有屬性都是通過(guò)這個(gè)實(shí)例完成的。
- 使用ViewPropertyAnimator將動(dòng)畫定義完成之后,動(dòng)畫就會(huì)自動(dòng)啟動(dòng)。 并且這個(gè)機(jī)制對(duì)于組合動(dòng)畫也同樣有效,只要我們不斷地連綴新的方法, 那么動(dòng)畫就不會(huì)立刻執(zhí)行,等到所有在ViewPropertyAnimator上設(shè)置的方法都執(zhí)行完畢后, 動(dòng)畫就會(huì)自動(dòng)啟動(dòng)。當(dāng)然如果不想使用這一默認(rèn)機(jī)制的話,我們也可以顯式地調(diào)用start()方法來(lái)啟動(dòng)動(dòng)畫。
- ViewPropertyAnimator的所有接口都是使用連綴的語(yǔ)法來(lái)設(shè)計(jì)的,每個(gè)方法的返回值都是 它自身的實(shí)例,因此調(diào)用完一個(gè)方法之后可以直接連綴調(diào)用它的另一個(gè)方法,這樣把所有的 功能都串接起來(lái),我們甚至可以僅通過(guò)一行代碼就完成任意復(fù)雜度的動(dòng)畫功能。
4.本節(jié)示例代碼下載
AnimatorDemo3.zip
在Github上找到一個(gè)動(dòng)畫合集的項(xiàng)目,很多動(dòng)畫效果都有,下面貼下地址:
BaseAnimation 動(dòng)畫合集
想研究各種動(dòng)畫是如何實(shí)現(xiàn)的可自行查看源碼~
本節(jié)小結(jié)
嗯,本節(jié)我們講了一些稍微高深一點(diǎn)的東西Evaluator啊,Interpolator啊,還有 ViewPropertyAnimator,是不是又拓展了大家的見(jiàn)識(shí)~本節(jié)也是Android基礎(chǔ)入門繪圖 與的最后一小節(jié)了,如果大家把這一章節(jié)的內(nèi)容都掌握了,再去學(xué)自定義控件, 或者看別人寫的自定義控件,應(yīng)該不會(huì)再那么地不知道從何入手,遇到一堆新面孔了吧!
嗯,還是謝謝郭神的文章,屬性動(dòng)畫部分的內(nèi)容很都是直接在郭神那里搬過(guò)來(lái)的
嘿嘿~本節(jié)就到這里,謝謝~
PS:后面的示意圖換模擬器是因?yàn)榈腘5秀逗了...