D11-Android自定義控制元件之動畫篇3-插值器與估值器

安卓開發 · 發表 2018-09-17 12:58:33

摘要：零、前言估值器和插值器豐富了動畫更新時的效果為方便本案例演示使用了我的 LogicCanvas繪相簿--github地址，當然你也可以自己繪製估值器：TypeEvaluator :該以什麼方式運動插值器：運動的變化情況一、估值器--TypeEvaluator...

零、前言

估值器和插值器豐富了動畫更新時的效果

為方便本案例演示使用了我的 Logic Canvas繪相簿--github地址，當然你也可以自己繪製

估值器：TypeEvaluator :該以什麼方式運動

插值器：運動的變化情況

一、估值器--TypeEvaluator：

1.以二次曲線移動為例：

二次曲線.gif

繪製：動態改變p值

mPainter = PainterEnum.INSTANCE.getInstance(canvas);
mPainter.draw(sa.deepClone()
.r(mCircleR).ang(360)
.fs(mColor).p(mCircleR, -mCircleR).coo(0, 1600).p(currentPoint));

估值器：

public class PosX2Evaluator implements TypeEvaluator {

@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
//初始點
Pos startPos = (Pos) startValue;
//結束點
Pos endPos = (Pos) endValue;
//計算每次更新時的x座標
float x = startPos.x + fraction * (endPos.x - startPos.x);
//將y座標進行聯動
float y = x * x / 800;
//返回更新後的點
return endPos.clone(x, y);
}
}

更新監聽

Pos startP = currentPoint;//初始值（起點）
Pos endP = new Pos(1000, mCircleR);//結束值（終點）
ValueAnimator animator = ValueAnimator.ofObject(new PosX2Evaluator(), startP, endP);
animator.setRepeatCount(-1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.setDuration(5000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
currentPoint = (Pos) animation.getAnimatedValue();
postInvalidate();
}
});
animator.start();

2.log型：

log型.gif

public class PosLogEvaluator implements TypeEvaluator {

@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {
//初始點
Pos startPos = (Pos) startValue;
//結束點
Pos endPos = (Pos) endValue;
//計算每次更新時的x座標
float x = startPos.x + fraction * (endPos.x - startPos.x);
//將y座標進行聯動
float y = (float) (Math.log10(x) * 200);
//返回更新後的點
return endPos.clone(x, y);
}
}

3.sin型：

sin型.gif

public class PosSinEvaluator implements TypeEvaluator {

@Override
public Object evaluate(float fraction, Object startValue, Object endValue) {

//初始點
Pos startPos = (Pos) startValue;
//結束點
Pos endPos = (Pos) endValue;
//計算每次更新時的x座標
float x = startPos.x + fraction * (endPos.x - startPos.x);
//將y座標進行聯動
float y =(float) (Math.sin(x * Math.PI / 180) * 200);
//返回更新後的點
return endPos.clone(x, y);
}
}

由此可以看出：不同的移動曲線只是在x座標變化是對y座標的不同處理。這就是估值器的作用。

二、插值器--TimeInterpolator

注意輸出值也是要在0~1之間的變化數

安卓內建了一下插值器，就不說了，使用自定義插值器來說明其中的原理

1.定義sin型插值器：

sin減速.gif

/**
 * 作者：張風捷特烈
 * 時間：2018/7/9:10:08
 * 郵箱：[email protected]
 * 說明：sin函式實現加速插值器
 */
public class D_Sin_Inter implements TimeInterpolator {
@Override
public float getInterpolation(float input) {
//input是一個從0~1均勻變化的值
//從0到PI/2均勻變化的值
float rad = Logic.rad(90 * input);
//返回這個弧度的sin值--sin曲線在0~PI/2區域是增長越來越緩慢，是的小球運動越來越緩慢
return (float) (Math.sin(rad));
}
}

使用：

animator.setInterpolator(new D_Sin_Inter());

2.定義Log型減速

log型減速.gif

/**
 * 作者：張風捷特烈
 * 時間：2018/7/9:10:08
 * 郵箱：[email protected]
 * 說明：log函式實現加速插值器
 */
public class D_Log_Inter implements TimeInterpolator {
@Override
public float getInterpolation(float input) {
return (float) (Math.log10(1 + 10 * input));
}
}

要加速效果將返回值改為1-XXX就行了

插值器從表現上來看就是某個函式值域在0~1上的圖象曲率變化的速率作用與View的某個屬性上

後記、

1.宣告：

[1]本文由張風捷特烈原創,轉載請註明

[2]歡迎廣大程式設計愛好者共同交流

[3]個人能力有限，如有不正之處歡迎大家批評指證，必定虛心改正

[4]你的喜歡與支援將是我最大的動力

2.連線傳送門：

3.聯絡我

QQ:1981462002

郵箱： [email protected]

微信：zdl1994328

4.歡迎關注我的微信公眾號，最新精彩文章，及時送達：

公眾號.jpg