title: 自定義差值器,在線“查看差值器”效果
tags: []
notebook: 實用工具
在線“查看差值器”效果
簡介
這個網站提供 可視化插值器以及演示動畫,而且預置了許多插值器公式
效果示例一:
factor = 0.15
Math.PI = 3.14
pow(2, -10 * x) * sin((x - factor / 4) * (2 * Math.PI) / factor) + 1
效果示例二:
factor = 0.4
pow(2, -10 * x) * sin((x - factor / 4) * (2 * 3.14) / factor) + 1
Android 差值器的簡單使用
官方內置了9鐘插值器:
LinearInterpolator(線性插值器:勻速)
AccelerateInterpolator(加速度插值器: 起始速度慢殖告,然后越來越快)
DecelerateInterpolator(減速插值器:起始速度快,然后越來越慢)
Accelerate Decelerate Interpolator / 先加速后減速插值器
什么是Interpolator雳锋?
通俗易懂的說黄绩,Interpolator(插值器)負責控制動畫變化的速率,使得基本的動畫效果能夠以勻速魄缚、加速宝与、減速焚廊、拋物線速率等各種速率變化。
示例代碼:
private void move(){
// PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("translationX", 0, 300);
float [] x = {0f,60f,120f,180f};
ValueAnimator animator = ObjectAnimator.ofFloat(redView, "translationX", x);
animator.setInterpolator(new LinearInterpolator());
animator.start();
}
private void scale(){
PropertyValuesHolder welcomeTv_1 = PropertyValuesHolder.ofFloat("scaleX", 0.0f, 1f);
PropertyValuesHolder welcomeTv_2 = PropertyValuesHolder.ofFloat("scaleY", 0.0f, 1f);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(redView, welcomeTv_1, welcomeTv_2);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(2000);
// pcrAnimator.setStartDelay(1000);
animator.start();
}
private void rotation(){
ValueAnimator animator = ObjectAnimator.ofFloat(redView, "rotation", -200f, 0f);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(2000);
animator.start();
}
private void alpha(){
ValueAnimator animator = ObjectAnimator.ofFloat(redView, "alpha", 0f, 1f);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(2000);
animator.start();
}
自定義差值器
public class CustomInterpolator implements Interpolator {
private float factor;//因素
public CustomInterpolator() {
this.factor = 0.15f;
}
@Override
public float getInterpolation(float input) {
return (float) (Math.pow(2, -10 * input) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
}
}
插值器 和 估值器 的區(qū)別
-
插值器Interpolator
根據(jù)時間流失的百分比 計算當前屬性改變的百分比习劫。
-
估值器Evaluator
根據(jù)當前屬性改變的百分比來計算改變后的屬性值
插值器決定屬性值隨時間變化的規(guī)律咆瘟;而具體變化屬性數(shù)值則交給估值器去計算。
自定義估值器
// 實現(xiàn)TypeEvaluator接口
public class PointEvaluator implements TypeEvaluator<Point> {
// 復寫evaluate()
// 在evaluate()里寫入對象動畫過渡的邏輯
@Override
public Point evaluate(float fraction, Point startValue, Point endValue) {
// 根據(jù)fraction來計算當前動畫的x和y的值
int x = (int) (startValue.x + fraction * (endValue.x - startValue.x));
int y = (int) (startValue.y + fraction * (endValue.y - startValue.y));
// 將計算后的坐標封裝到一個新的Point對象中并返回
return new Point(x, y);
}
}
總結
插值器和估值器關系
屬性動畫是對屬性做動畫诽里,屬性要實現(xiàn)動畫袒餐。
- 首先由插值器根據(jù)時間流逝的百分比計算出當前屬性值改變的百分比,然后由插值器將這個百分比返回谤狡。這個時候插值器的工作就完成了灸眼。
比如: 插值器 返回的值是0.5,很顯然我們要的不是0.5
- 插值器算好屬性變化百分比之后墓懂,由估值器根據(jù)當前屬性改變的百分比來計算改變后的屬性值焰宣,根據(jù)這個屬性值,我們就可以對View設置當前的屬性值了捕仔。