Android开发Android开发Android开发经验谈

自定义View | 插值器Interpolator与Evalua

2019-09-15  本文已影响0人  凌川江雪

重要结论：

既可以通过重写插值器改变数值进度来改变数值位置，
也可以通过改变Evaluator中数值进度所对应的具体数值来改变数值位置。

自定义Interpolator与自定义Evaluator，
这两种方法都可以成为属性动画的驱动力！！！

本文完整项目代码敬请见GitHub

系统插值器种类

1.AccelerateDecelerateInterpolator

加速减速插值器，
表示在开始与结束的地方速率改变比较慢，在中间的时候加速。

利用数学绘图工具将它的整个变化过程绘制出来，如下图所示：
  • 整幅图像表示的是动画进行的时刻（x轴）与进行的程度（y轴）的关系图，
    y轴的值域为0 ~ 100，表示动画进行的程度；
    最左侧（线的点坐标 y = 0）表示动画进度为0，即动画刚开始；
    最右侧（线的点坐标 y = 100）表示动画完成，进度为1；
    线上的每一个点表示在某个时间点的动画进行的程度。

    所以某个点的切线斜率就表示
    该点对应的时间点的动画的速率；
    该点的切线斜率越大，
    该点对应的时间点的动画的速率则越大；

    下面就用这种图来演绎诸中系统插值器的特性；


2.AccelerateInterpolator


3.DecelerateInterpolator

是减速插值器，
表示在动画开始的一瞬间加速到最大值，然后逐渐变慢



4.LinearInterpolator

线性插值器，也称匀速加速器，很显然，它的速率是保持恒定的



5.BounceInterpolator

弹跳插值器，模拟了控件自由落地后回弹的效果



6. AnticipateInterpolator

初始偏移插值器，表示在动画开始的时候向前偏移一段距离，然后应用动画。



7.OvershootInterpolator

结束偏移插值器，表示在动画结束时，沿动画方向继续运动一段距离后再结束动画。


8. AnticipateOvershootInterpolator

AnticipateInterpolator与OvershootInterpolator的合体，

即在动画开始时向前偏移一段距离，在动画结束时向后偏移一段距离。


9. CycleInterpolator

循环插值器，表示动画循环播放特定的次数，速率沿正弦曲线改变。

案例：镜头由远及近效果

......
            case 6:
                ImageView cameraStretchView = new ImageView(this);
                cameraStretchView.setBackgroundResource(R.drawable.imagetest1);
                ll_nextParent.addView(cameraStretchView, layoutParams);

                ScaleAnimation scaleAnimation = getTheCameraStretchAnim();
                cameraStretchView.startAnimation(scaleAnimation);

                break;

            default:
        }
    }

    private ScaleAnimation getTheCameraStretchAnim() {
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.2f, 1.0f, 1.2f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setFillAfter(true);
        scaleAnimation.setInterpolator(new BounceInterpolator());
        scaleAnimation.setDuration(6000);
        return scaleAnimation;
    }




自定义插值器

前言
先看看系统自带的插值器是如何实现的，比如LinearInterpolator
看看TimeInterpolator接口都有哪些函数

该函数的含义如下。

getInterpolation(flaot input)中的input参数
代表一个匀速增加的当前动画的进度，
这个进度是自然进度，自然的，没有经过修改的，
区分于实际显示的动画进度，
与任何设置无关，随着时间的推移，
动画的进度自然会从0到1逐渐增加。

input参数相当于时间的概念，
正如我们生活中参照时钟来知晓时间，
这里我们参照匀速、自然、不可改变的自然进度input
（input类似于数学函数意义中匀速增长的自变量 x），
通过向各种数学计算输入input
（各种数学计算则类似于数学函数意义中的函数关系f()），
以输出各种变化速率的数值作为返回值
（最后作为getInterpolation(flaot input)的return返回值的数值，
则类似于因变量y，y = f ( x ) ），
从而实现各种形式的插值器
(插值器就是基于函数规则，
把匀速增长的自变量input，
计算转换成具有函数规则的输出返回值)

input参数与任何我们设定的值没有关系，
只与时间有关，随着时间的推移，动画的进度也自然地增加，
input参数就代表了当前动画的自然进度，
而返回值则表示当前动画显示的数值进度。

自定义Interpolator

public class MyInterpolator implements TimeInterpolator {
    
    @Override
    public float getInterpolation(float input) {
        return 1 - input;
    }
}

    private void startAnimationTestInterpolator() {
        ValueAnimator animator =  ValueAnimator.ofInt(0, 400);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int curValue = (int)animation.getAnimatedValue();
                tv_text.layout(tv_text.getLeft(),curValue,
                        tv_text.getRight(), curValue+tv_text.getHeight());
            }
        });

        animator.setDuration(1000);
        animator.setInterpolator(new MyInterpolator());
        animator.start();
    }
接下来笔记Evaluator


Evaluator

  1. ofInt（0，400）：表示指定动画的数值区间，从0运动到400。

  2. 插值器：
    在动画开始后
    通过插值器会返回当前动画进度所对应的数值进度，
    这个数值进度是以小数表示的，如0.2。

  3. Evaluator：
    我们通过监听器拿到的是当前动画所对应的具体数值，
    而不是用小数表示的数值。
    那么必须有一个地方会根据当前的数值进度将其转换为对应的数值，
    这个地方就是Evaluator。
    Evaluator用于将
    从插值器返回的数值进度（小数，0 - 1.0）
    转换成对应的数值。

  4. 监听器返回：
    在AnimatorUpdateListener监听器中
    使用animation.getAnimatedValue()函数
    拿到Evaluator中返回的数值。

  • 插值器返回的小数值表示的是当前动画的数值进度，
    这对于无论是使用ofFloat()函数
    还是使用ofInt()函数定义的动画都是适用的。
    因为无论是什么动画，它的进度必然在0～1之间。
    0表示还没开始，1表示动画结束，这对于任何动画都是适用的。

  • 而Evaluator则不一样，
    它把插值器返回的小数进度转换成当前数值进度所对应的值。

    如果使用ofInt()函数来定义动画，
    动画中的值应该都是Integer类型的，
    所对应的Evaluator在返回值时，必然返回Integer类型的值；

    如果使用ofFloat()函数来定义动画，
    动画中的值都是Float类型的，
    Evaluator在返回值时，必然返回Float类型的值。

  • 所以，每种定义方式所对应的Evaluator必然是它专用的。
    Evaluator专用的原因在于动画数值类型不一样，
    在通过Evaluator返回时会报强转错误，
    所以只有在动画数值类型一样时，所对应的Evaluator才能通用。
    ofInt()函数对应的Evaluator类名为IntEvaluator，
    而ofFloat()函数对应的Evaluator类名为FloatEvaluator。

    private void startAnimationArgbEvaluator() {
        ValueAnimator animator =  ValueAnimator.ofInt(0xffffff00, 0xff0000ff);
        animator.setEvaluator(new ArgbEvaluator());//设置Evaluator
        animator.setDuration(3000);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int curValue = (Integer) animation.getAnimatedValue();
                tv_text.setBackgroundColor(curValue);
            }
        });
        animator.start();
    }

可以使用ValueAnimator.ofInt()函数构造ValueAnimator，
显式设置了它所对应的IntEvaluator，
用来计算数值进度所对应的数值。

但其实，
ofInt()和ofFloat()都是系统直接提供的函数，
所以会有默认的插值器和Evaluator可供使用。
ofInt()函数的默认Evaluator 是IntEvaluator，
而ofFloat()函数的默认Evaluator则是FloatEvaluator。

package android.animation;

public class IntEvaluator implements TypeEvaluator<Integer> {

    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
}

在IntEvaluator中
只有一个函数
evaluate（float fraction，Integer startValue，Integer endValue）

  • fraction参数就是插值器中的返回值，
    表示当前动画的数值进度，以百分制的小数表示。

  • startValue和endValue分别对应
    ofInt(int start，int end)函数中start和end的数值。

    假设当我们定义的动画ofInt(100，400)进行到数值进度20%的时候，
    那么此时在evaluate()函数中，
    fraction的值就是0.2，
    startValue的值是100，
    endValue的值是400。

    返回值（即return (int)(startInt + fraction * (endValue - startInt));）
    就是当前数值进度所对应的具体数值，
    这个数值就是
    我们在AnimatorUpdateListener监听器中
    通过animation.getAnimatedValue()函数得到的数值。

  • evaluate（float fraction，Integer startValue，Integer endValue）函数
    根据return (int)(startInt + fraction * (endValue - startInt));，
    也就是根据进度数值来计算出具体数值，
    这跟前面插值器中提到的当前的值=100+（400-100）× 显示进度是相对应：

结论：
既可以通过重写插值器改变数值进度来改变数值位置，
也可以通过改变Evaluator中数值进度所对应的具体数值来改变数值位置。
这两种方法都可以成为属性动画的驱动力！！！


自定义Evaluator

public class MyEvaluator implements TypeEvaluator<Integer> {
    @Override
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int) (200 + startInt + fraction * (endValue - startInt));
    }
}

  • 首先实现TypeEvaluator接口；（注意这里的理解泛型的概念）；
    这里实现TypeEvaluator时，指定它的泛型是Integer类型的，
    这样就可以在ofInt()函数中使用这个Evaluator了。

  • 注意：
    只有定义动画时的数值类型与Evaluator的返回值类型一样，
    才能使用这个Evaluator。
    很显然，ofInt（）函数定义的数值类型是Integer，
    这里定义的MyEvaluator只能适用于ofInt()函数了。
    同理，
    如果把实现的TypeEvaluator接口泛型设置为Float类型，
    那么这个Evaluator也就只能适用于ofFloat()函数了。

  • 然后简单实现其中的evaluate()函数：

    在IntEvaluator的基础上修改了一下，
    让它返回值时增加了200。
    所以，
    当我们定义的区间是ofInt（0，400）时，
    它的实际返回值区间应该是（200，600）。
使用自定义的Evaluator
    private void startAnimation() {

        ValueAnimator animator =  ValueAnimator.ofInt(0, 400);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int curValue = (int)animation.getAnimatedValue();
                tv_text.layout(tv_text.getLeft(),curValue,
                        tv_text.getRight(), curValue+tv_text.getHeight());
            }
        });

        animator.setDuration(1000);
        animator.setEvaluator(new MyEvaluator());
        animator.start();
    }



注意0xff是八个二进制位而已，刚好留下一个色彩的值！！
    private void startAnimationArgbEvaluator() {
        ValueAnimator animator =  ValueAnimator.ofInt(0xffffff00, 0xff0000ff);
        animator.setEvaluator(new ArgbEvaluator());//设置Evaluator
        animator.setDuration(3000);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int curValue = (Integer) animation.getAnimatedValue();
                tv_text.setBackgroundColor(curValue);
            }
        });
        animator.start();
    }









本文完整项目代码敬请见GitHub

上一篇 下一篇

猜你喜欢

热点阅读