一篇文章帶給你動(dòng)畫(huà)估值器詳解
前言
TypeEvaluator的中文翻譯為類(lèi)型估值算法,也叫估值器,它的作用是根據(jù)當(dāng)前屬性改變的百分比來(lái)計(jì)算改變后的屬性值,系統(tǒng)預(yù)置的有IntEvaluator(針對(duì)整型屬性)、FloatEvaluator(針對(duì)浮點(diǎn)型數(shù)據(jù))和ArgbEvaluator(針對(duì)Color屬性);
屬性動(dòng)畫(huà)中的插值器(Interpolator)和估值器(TypeEvalutor)很重要,它們是實(shí)現(xiàn)非勻速動(dòng)畫(huà)的重要手段;
之前我們已經(jīng)較少過(guò)插值器了,今天我們來(lái)介紹下估值器;
一、估值器詳解
1、應(yīng)用場(chǎng)景
- 插值器(Interpolator)決定值的變化規(guī)律(勻速、加速blabla),即決定的是變化趨勢(shì),而接下來(lái)的具體變化數(shù)值則交給估值器;
- 屬性動(dòng)畫(huà)特有的屬性;
- 非線性運(yùn)動(dòng):動(dòng)畫(huà)改變的速率不是一成不變的,如加速 & 減速運(yùn)動(dòng)都屬于非線性運(yùn)動(dòng);
2、具體使用
2.1. 設(shè)置方式
- ObjectAnimator anim = ObjectAnimator.ofObject(myView2, "height", new Evaluator(),1,3);
- // 在第4個(gè)參數(shù)中傳入對(duì)應(yīng)估值器類(lèi)的對(duì)象
- // 系統(tǒng)內(nèi)置的估值器有3個(gè):
- // IntEvaluator:以整型的形式從初始值 - 結(jié)束值 進(jìn)行過(guò)渡
- // FloatEvaluator:以浮點(diǎn)型的形式從初始值 - 結(jié)束值 進(jìn)行過(guò)渡
- // ArgbEvaluator:以Argb類(lèi)型的形式從初始值 - 結(jié)束值 進(jìn)行過(guò)渡
- 點(diǎn)型插值器:FloatEvaluator
- public class FloatEvaluator implements TypeEvaluator {
- // FloatEvaluator實(shí)現(xiàn)了TypeEvaluator接口
- // 重寫(xiě)evaluate()
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數(shù)說(shuō)明
- // fraction:表示動(dòng)畫(huà)完成度(根據(jù)它來(lái)計(jì)算當(dāng)前動(dòng)畫(huà)的值)
- // startValue、endValue:動(dòng)畫(huà)的初始值和結(jié)束值
- float startFloat = ((Number) startValue).floatValue();
- return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
- // 初始值 過(guò)渡 到結(jié)束值 的算法是:
- // 1. 用結(jié)束值減去初始值,算出它們之間的差值
- // 2. 用上述差值乘以fraction系數(shù)
- // 3. 再加上初始值,就得到當(dāng)前動(dòng)畫(huà)的值
- }
- }
- 屬性動(dòng)畫(huà)中的ValueAnimator.ofInt() & ValueAnimator.ofFloat()都具備系統(tǒng)內(nèi)置的估值器,即FloatEvaluator & IntEvaluator;
- 即系統(tǒng)已經(jīng)默認(rèn)實(shí)現(xiàn)了如何從初始值 過(guò)渡到結(jié)束值的邏輯;
2.2自定義估值器
- 本質(zhì):根據(jù)插值器計(jì)算出當(dāng)前屬性值改變的百分比 & 初始值 & 結(jié)束值,來(lái)計(jì)算當(dāng)前屬性具體的數(shù)值;
- 具體使用:自定義估值器需要實(shí)現(xiàn) TypeEvaluator接口 & 復(fù)寫(xiě)evaluate()
- public interface TypeEvaluator {
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數(shù)說(shuō)明
- // fraction:插值器getInterpolation()的返回值
- // startValue:動(dòng)畫(huà)的初始值
- // endValue:動(dòng)畫(huà)的結(jié)束值
- ....// 估值器的計(jì)算邏輯
- return xxx;
- // 賦給動(dòng)畫(huà)屬性的具體數(shù)值
- // 使用反射機(jī)制改變屬性變化
- // 特別注意
- // 那么插值器的input值 和 估值器fraction有什么關(guān)系呢
- // input的值決定了fraction的值:input值經(jīng)過(guò)計(jì)算后傳入到插值器的getInterpolation(),然后通過(guò)實(shí)現(xiàn)getInterpolation()中的邏輯算法,根據(jù)input值來(lái)計(jì)算出一個(gè)返回值,而這個(gè)返回值就是fraction了
- }
- }
- // 實(shí)現(xiàn)TypeEvaluator接口
- public class ObjectEvaluator implements TypeEvaluator{
- // 復(fù)寫(xiě)evaluate()
- // 在evaluate()里寫(xiě)入對(duì)象動(dòng)畫(huà)過(guò)渡的邏輯
- @Override
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 參數(shù)說(shuō)明
- // fraction:表示動(dòng)畫(huà)完成度(根據(jù)它來(lái)計(jì)算當(dāng)前動(dòng)畫(huà)的值)
- // startValue、endValue:動(dòng)畫(huà)的初始值和結(jié)束值
- ... // 寫(xiě)入對(duì)象動(dòng)畫(huà)過(guò)渡的邏輯
- return value;
- // 返回對(duì)象動(dòng)畫(huà)過(guò)渡的邏輯計(jì)算后的值
- }
3、自定義估值器
- ValueAnimator.ofObject(),從工作原理可以看出并沒(méi)有系統(tǒng)默認(rèn)實(shí)現(xiàn)估值器,因?yàn)閷?duì)對(duì)象的動(dòng)畫(huà)操作復(fù)雜 & 多樣,系統(tǒng)無(wú)法知道如何從初始對(duì)象過(guò)度到結(jié)束對(duì)象;
- 因此,對(duì)于ValueAnimator.ofObject(),我們需自定義估值器(TypeEvaluator)來(lái)告知系統(tǒng)如何進(jìn)行從初始對(duì)象過(guò)渡到結(jié)束對(duì)象的邏輯;
3.1定義對(duì)象
因?yàn)閂alueAnimator.ofObject()是面向?qū)ο蟛僮鞯模孕枰远x對(duì)象類(lèi);
- public class Point {
- // 設(shè)置兩個(gè)變量用于記錄坐標(biāo)的位置
- private float x;
- private float y;
- // 構(gòu)造方法用于設(shè)置坐標(biāo)
- public Point(float x, float y) {
- this.x = x;
- this.y = y;
- }
- // get方法用于獲取坐標(biāo)
- public float getX() {
- return x;
- }
- public float getY() {
- return y;
- }
- }
3.2實(shí)現(xiàn)TypeEvaluator接口
實(shí)現(xiàn)TypeEvaluator接口的目的是自定義如何 從初始點(diǎn)坐標(biāo) 過(guò)渡 到結(jié)束點(diǎn)坐標(biāo);
本例實(shí)現(xiàn)的是一個(gè)從左上角到右下角的坐標(biāo)過(guò)渡邏輯。
// 實(shí)現(xiàn)TypeEvaluator接口
- public class PointEvaluator implements TypeEvaluator {
- // 復(fù)寫(xiě)evaluate()
- // 在evaluate()里寫(xiě)入對(duì)象動(dòng)畫(huà)過(guò)渡的邏輯
- @Override
- public Object evaluate(float fraction, Object startValue, Object endValue) {
- // 將動(dòng)畫(huà)初始值startValue 和 動(dòng)畫(huà)結(jié)束值endValue 強(qiáng)制類(lèi)型轉(zhuǎn)換成Point對(duì)象
- Point startPoint = (Point) startValue;
- Point endPoint = (Point) endValue;
- // 根據(jù)fraction來(lái)計(jì)算當(dāng)前動(dòng)畫(huà)的x和y的值
- float x = startPoint.getX() + fraction * (endPoint.getX() - startPoint.getX());
- float y = startPoint.getY() + fraction * (endPoint.getY() - startPoint.getY());
- // 將計(jì)算后的坐標(biāo)封裝到一個(gè)新的Point對(duì)象中并返回
- Point point = new Point(x, y);
- return point;
- }
- }
3.3屬性動(dòng)畫(huà)作用到自定義View當(dāng)中
- public class MyView extends View {
- // 設(shè)置需要用到的變量
- public static final float RADIUS = 70f;// 圓的半徑 = 70
- private Point currentPoint;// 當(dāng)前點(diǎn)坐標(biāo)
- private Paint mPaint;// 繪圖畫(huà)筆
- // 構(gòu)造方法(初始化畫(huà)筆)
- public MyView(Context context, AttributeSet attrs) {
- super(context, attrs);
- // 初始化畫(huà)筆
- mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mPaint.setColor(Color.BLUE);
- }
- // 復(fù)寫(xiě)onDraw()從而實(shí)現(xiàn)繪制邏輯
- // 繪制邏輯:先在初始點(diǎn)畫(huà)圓,通過(guò)監(jiān)聽(tīng)當(dāng)前坐標(biāo)值(currentPoint)的變化,每次變化都調(diào)用onDraw()重新繪制圓,從而實(shí)現(xiàn)圓的平移動(dòng)畫(huà)效果
- @Override
- protected void onDraw(Canvas canvas) {
- // 如果當(dāng)前點(diǎn)坐標(biāo)為空(即第一次)
- if (currentPoint == null) {
- currentPoint = new Point(RADIUS, RADIUS);
- // 創(chuàng)建一個(gè)點(diǎn)對(duì)象(坐標(biāo)是(70,70))
- // 在該點(diǎn)畫(huà)一個(gè)圓:圓心 = (70,70),半徑 = 70
- float x = currentPoint.getX();
- float y = currentPoint.getY();
- canvas.drawCircle(x, y, RADIUS, mPaint);
- // (重點(diǎn)關(guān)注)將屬性動(dòng)畫(huà)作用到View中
- // 步驟1:創(chuàng)建初始動(dòng)畫(huà)時(shí)的對(duì)象點(diǎn) & 結(jié)束動(dòng)畫(huà)時(shí)的對(duì)象點(diǎn)
- Point startPoint = new Point(RADIUS, RADIUS);// 初始點(diǎn)為圓心(70,70)
- Point endPoint = new Point(700, 1000);// 結(jié)束點(diǎn)為(700,1000)
- // 步驟2:創(chuàng)建動(dòng)畫(huà)對(duì)象 & 設(shè)置初始值 和 結(jié)束值
- ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);
- // 參數(shù)說(shuō)明
- // 參數(shù)1:TypeEvaluator 類(lèi)型參數(shù) - 使用自定義的PointEvaluator(實(shí)現(xiàn)了TypeEvaluator接口)
- // 參數(shù)2:初始動(dòng)畫(huà)的對(duì)象點(diǎn)
- // 參數(shù)3:結(jié)束動(dòng)畫(huà)的對(duì)象點(diǎn)
- // 步驟3:設(shè)置動(dòng)畫(huà)參數(shù)
- anim.setDuration(5000);
- // 設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)
- // 步驟3:通過(guò) 值 的更新監(jiān)聽(tīng)器,將改變的對(duì)象手動(dòng)賦值給當(dāng)前對(duì)象
- // 此處是將 改變后的坐標(biāo)值對(duì)象 賦給 當(dāng)前的坐標(biāo)值對(duì)象
- // 設(shè)置 值的更新監(jiān)聽(tīng)器
- // 即每當(dāng)坐標(biāo)值(Point對(duì)象)更新一次,該方法就會(huì)被調(diào)用一次
- anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
- @Override
- public void onAnimationUpdate(ValueAnimator animation) {
- currentPoint = (Point) animation.getAnimatedValue();
- // 將每次變化后的坐標(biāo)值(估值器PointEvaluator中evaluate()返回的Piont對(duì)象值)到當(dāng)前坐標(biāo)值對(duì)象(currentPoint)
- // 從而更新當(dāng)前坐標(biāo)值(currentPoint)
- // 步驟4:每次賦值后就重新繪制,從而實(shí)現(xiàn)動(dòng)畫(huà)效果
- invalidate();
- // 調(diào)用invalidate()后,就會(huì)刷新View,即才能看到重新繪制的界面,即onDraw()會(huì)被重新調(diào)用一次
- // 所以坐標(biāo)值每改變一次,就會(huì)調(diào)用onDraw()一次
- }
- });
- anim.start();
- // 啟動(dòng)動(dòng)畫(huà)
- } else {
- // 如果坐標(biāo)值不為0,則畫(huà)圓
- // 所以坐標(biāo)值每改變一次,就會(huì)調(diào)用onDraw()一次,就會(huì)畫(huà)一次圓,從而實(shí)現(xiàn)動(dòng)畫(huà)效果
- // 在該點(diǎn)畫(huà)一個(gè)圓:圓心 = (30,30),半徑 = 30
- float x = currentPoint.getX();
- float y = currentPoint.getY();
- canvas.drawCircle(x, y, RADIUS, mPaint);
- }
- }
- }