D11

零、前言

估值器和插值器丰富了动画更新时的效果
为方便本案例演示使用了我的LogicCanvas绘图库--github地址，当然你也可以自己绘制
估值器：TypeEvaluator :该以什么方式运动
插值器：运动的变化情况

一、估值器--TypeEvaluator：

1.以二次曲线移动为例：

二次曲线.gif

绘制：动态改变p值

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

估值器：

1public class PosX2Evaluator implements TypeEvaluator {
2
3    @Override
4    public Object evaluate(float fraction, Object startValue, Object endValue) {
5        //初始点
6        Pos startPos = (Pos) startValue;
7        //结束点
8        Pos endPos = (Pos) endValue;
9        //计算每次更新时的x坐标
10        float x = startPos.x + fraction * (endPos.x - startPos.x);
11        //将y坐标进行联动
12        float y = x * x / 800;
13        //返回更新后的点
14        return endPos.clone(x, y);
15    }
16}

更新监听

1Pos startP = currentPoint;//初始值（起点）
2Pos endP = new Pos(1000, mCircleR);//结束值（终点）
3ValueAnimator animator = ValueAnimator.ofObject(new PosX2Evaluator(), startP, endP);
4animator.setRepeatCount(-1);
5animator.setRepeatMode(ValueAnimator.REVERSE);
6animator.setDuration(5000);
7animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
8    @Override
9    public void onAnimationUpdate(ValueAnimator animation) {
10        currentPoint = (Pos) animation.getAnimatedValue();
11        postInvalidate();
12    }
13});
14animator.start();

2.log型：

log型.gif

1public class PosLogEvaluator implements TypeEvaluator {
2
3    @Override
4    public Object evaluate(float fraction, Object startValue, Object endValue) {
5        //初始点
6        Pos startPos = (Pos) startValue;
7        //结束点
8        Pos endPos = (Pos) endValue;
9        //计算每次更新时的x坐标
10        float x = startPos.x + fraction * (endPos.x - startPos.x);
11        //将y坐标进行联动
12        float y = (float) (Math.log10(x) * 200);
13        //返回更新后的点
14        return endPos.clone(x, y);
15    }
16}

3.sin型：

sin型.gif

1public class PosSinEvaluator implements TypeEvaluator {
2
3    @Override
4    public Object evaluate(float fraction, Object startValue, Object endValue) {
5
6        //初始点
7        Pos startPos = (Pos) startValue;
8        //结束点
9        Pos endPos = (Pos) endValue;
10        //计算每次更新时的x坐标
11        float x = startPos.x + fraction * (endPos.x - startPos.x);
12        //将y坐标进行联动
13        float y =  (float) (Math.sin(x * Math.PI / 180) * 200);
14        //返回更新后的点
15        return endPos.clone(x, y);
16    }
17}

由此可以看出：不同的移动曲线只是在x坐标变化是对y坐标的不同处理。这就是估值器的作用。

二、插值器--TimeInterpolator

注意输出值也是要在0~1之间的变化数
安卓内置了一下插值器，就不说了，使用自定义插值器来说明其中的原理

1.定义sin型插值器：

sin减速.gif

1/**
2 * 作者：张风捷特烈
3 * 时间：2018/7/9:10:08
4 * 邮箱：1981462002@qq.com
5 * 说明：sin函数实现加速插值器
6 */
7public class D_Sin_Inter implements TimeInterpolator {
8    @Override
9    public float getInterpolation(float input) {
10        //input是一个从0~1均匀变化的值
11        //从0到PI/2均匀变化的值
12        float rad = Logic.rad(90 * input);
13        //返回这个弧度的sin值--sin曲线在0~PI/2区域是增长越来越缓慢，是的小球运动越来越缓慢
14        return (float) (Math.sin(rad));
15    }
16}

使用：

 animator.setInterpolator(new D_Sin_Inter());

2.定义Log型减速

log型减速.gif

1/**
2 * 作者：张风捷特烈
3 * 时间：2018/7/9:10:08
4 * 邮箱：1981462002@qq.com
5 * 说明：log函数实现加速插值器
6 */
7public class D_Log_Inter implements TimeInterpolator {
8    @Override
9    public float getInterpolation(float input) {
10        return (float) (Math.log10(1 + 10 * input));
11    }
12}

要加速效果将返回值改为1-XXX就行了
插值器从表现上来看就是某个函数值域在0~1上的图象曲率变化的速率作用与View的某个属性上

三、插播一个路径动画吧：

使用sin型减速

path绘制.gif

1//初始画笔
2mPaint = new Paint();
3mPaint.setStrokeWidth(5);
4mPaint.setStyle(Paint.Style.STROKE);
5mPaint.setAntiAlias(true);
6mPaint.setColor(Color.RED);
7//实例路径
8mPath =new ShapeStar(ShapeStar.MODE_REGULAR).num(8).R(200).formPath();
9//测量路径
10pathMeasure = new PathMeasure(mPath, false);
11
12
13//动画设置
14ValueAnimator pathAnimator = ValueAnimator.ofFloat(1, 0);
15pathAnimator.setDuration(5000);
16pathAnimator.setInterpolator(new D_Sin_Inter());
17pathAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
18    @Override
19    public void onAnimationUpdate(ValueAnimator animation) {
20        float value = (Float) animation.getAnimatedValue();
21        DashPathEffect effect = new DashPathEffect(
22                new float[]{
23                        pathMeasure.getLength(),
24                        pathMeasure.getLength()},
25                value * pathMeasure.getLength());
26        mPaint.setPathEffect(effect);
27        invalidate();
28    }
29});
30pathAnimator.start();
31
32
33//绘制路径
34canvas.drawPath(mPath, mPaint);

后记、

1.声明：

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门：

更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：

公众号.jpg