动脑学院高级ui课程9.1：贝塞尔曲线简单介绍

2019年5月26日 187次阅读 来源: grr1314

相信很多人都听说过贝塞尔曲线，但是作为Android程序员的我们可能也没有具体的使用过贝塞尔曲线！好吧！是我之前没用过…….
关于贝塞尔曲线的介绍我就不多罗嗦了晚上有很多的文章，这里我给出一篇供大家参考：
http://blog.csdn.net/cdnight/article/details/48468653
这里给出一个github的开源库，大家可以看看贝塞尔曲线的效果：
https://github.com/venshine/BezierMaker
挺好玩的，总的来说贝塞尔曲线最低为2阶且理论上无上限。
本篇文章通过一个简单的例子，来初步探索一下贝塞尔曲线，废话不多说我们开始。

献上效果图：

《动脑学院高级ui课程9.1：贝塞尔曲线简单介绍》 1.gif

是不是挺有意思的呢？

实现思路：
1、画一条路径
通过Path工具类
2、获取手指移动的点的坐标，并将该点作为贝塞尔曲线的控制点
重写onTouchEvent()方法
3、实现回弹动画
自定义一个Animtion，当然也可以不自定义

具体代码实现
设置画笔：

private void init() {
    pointA = new Point(100, 300);
    pointB = new Point(500, 300);

    pointCenter = new Point(200, 300);

    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setAntiAlias(true);
}

画路径：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bezierPath.reset();
        bezierPath.moveTo(pointA.x, pointA.y);
        //quadTo方法用于画贝塞尔曲线
        bezierPath.quadTo(pointCenter.x, pointCenter.y, pointB.x, pointB.y);
        //闭合path
//        bezierPath.close();
        canvas.drawPath(bezierPath, mPaint);
    }

这里要注意的是path的quadTo(int cx，int cy，int px，int py)方法，这个方法就是用于画贝塞尔曲线的。参数cx、cy分别表示控制点的x、y坐标，px、py分别表示结束点的x、y坐标。要注意rQuadTo()方法的区别

重写onTouchEvent方法：

@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    int x = 0;
    int y = 0;
    switch (action) {

        case MotionEvent.ACTION_DOWN: {

        }
        case MotionEvent.ACTION_MOVE: {
            x = (int) event.getX();
            y = (int) event.getY();
            pointCenter.set(x, y);
        }
        break;
        case MotionEvent.ACTION_UP: {
            x = (int) event.getX();
            y = (int) event.getY();

            startCallbackAnim(x, y);
        }
        break;

    }
    invalidate();
    return true;
}

最后写一个动画：

private void startCallbackAnim(int x, int y) {
    ResetAnimation animation = new ResetAnimation(x, y);
    animation.setDuration(300);
    this.startAnimation(animation);
}

/**
* 自定义一个会弹动画
*/
class ResetAnimation extends Animation {

    int orginX;
    int orginY;

    public ResetAnimation(int x, int y) {
        orginX = x;
        orginY = y;
    }

    /**
    * 这个方法是为一个自定义动画需要重写的方法
    *
    * @param interpolatedTime 动画时间0~1.0
    * @param t
    */
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        int newX = (int) ((orginX - 200) * (1 - interpolatedTime) + 200);
        int newY = (int) ((orginY - 300) * (1 - interpolatedTime) + 300);
        pointCenter.set(newX, newY);
        invalidate();
        super.applyTransformation(interpolatedTime, t);
    }
}

代码很简单大家可以自己去实现以下！

    原文作者：grr1314
    原文地址: https://www.jianshu.com/p/5e40ef92d62d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞