D11-Android自定义控件之动画篇3-插值器与估值器

零、前言

估值器和插值器丰富了动画更新时的效果 为方便本案例演示使用了我的LogicCanvas绘图库--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
 * 邮箱:1981462002@qq.com
 * 说明: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
 * 邮箱:1981462002@qq.com
 * 说明: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的某个属性上


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

使用sin型减速

path绘制.gif

//初始画笔
mPaint = new Paint();
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
mPaint.setColor(Color.RED);
//实例路径
mPath =new ShapeStar(ShapeStar.MODE_REGULAR).num(8).R(200).formPath();
//测量路径
pathMeasure = new PathMeasure(mPath, false);
//动画设置
ValueAnimator pathAnimator = ValueAnimator.ofFloat(1, 0);
pathAnimator.setDuration(5000);
pathAnimator.setInterpolator(new D_Sin_Inter());
pathAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float value = (Float) animation.getAnimatedValue();
        DashPathEffect effect = new DashPathEffect(
                new float[]{
                        pathMeasure.getLength(),
                        pathMeasure.getLength()},
                value * pathMeasure.getLength());
        mPaint.setPathEffect(effect);
        invalidate();
    }
});
pathAnimator.start();
//绘制路径
canvas.drawPath(mPath, mPaint);

后记、

1.声明:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Modeng的专栏

canvas学习总结五:线段的端点与连接点

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135...

842
来自专栏walterlv - 吕毅的博客

用动画的方式画出任意的路径(直线、曲线、折现)

发布于 2017-11-20 00:49 更新于 2017-11...

952
来自专栏阿凯的Excel

巧妙完成二维表的数据匹配

接下来我将每周分享一个广大网友向我提问的经典问题。 本周问题,如何对二维表进行匹配! 原表格! ? 备注:以上人名,均属虚构,如有雷同!说明有缘!!! 咳...

2823
来自专栏菩提树下的杨过

Flash/Flex学习笔记(48):反向运动学(下)

先要复习一下三角函数与余弦定理: 对于直角三角形,三边长a,b,c与三个角A,B,C的关系如下: ? 正弦函数: ? 余弦函数: ? 正切函数: ? 反正切函数...

24610
来自专栏Flutter入门

Android OpenGL ES(五)-结合相机

上文中我们已经实现了在纹理上添加滤镜的效果。这编文章就是将OpenGl和相机结合到一起。

3633
来自专栏章鱼的慢慢技术路

用OpenGL实现跳跃的立体小球

2062
来自专栏移动端开发

Swift 实现俄罗斯方块详细思路解析(附完整项目)

一:写在开发前     俄罗斯方块,是一款我们小时候都玩过的小游戏,我自己也是看着书上的思路,学着用 Swift 来写这个小游戏,在写这个游戏的过程中,除了一些...

3998
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图

4232
来自专栏IMWeb前端团队

前端如何呼风唤雨

创世纪第一章 首卷原文 起初我创造了canvas 。 我说,要有雨,就有了雨; 我说,要有雪,就有了雪。 而对于前端来说,canvas即是天地 在canv...

3307
来自专栏菩提树下的杨过

Silverlight:Mouse Avoiding 躲避鼠标效果

昨晚在一国外博客上(从域名后缀pl上猜想应该是波兰)看到这种效果(Mouse Avoid 躲避鼠标),是基于Flash/AS3开发的,这个示例把弹性运动,摩擦力...

2167

扫码关注云+社区

领取腾讯云代金券