Android高级UI_Path小试牛刀<二>

2017-03-26  本文已影响261人  apkcore

上一篇讲了path的基本用法，这篇我们要去实现水波纹以及粘性小球
这里就不得不提到贝塞尔曲线

一阶贝塞尔曲线：

Android 提供方法：lineTo()

二阶贝塞尔曲线

二阶贝塞尔曲线有一个控制点 P1 和两个数据点 P0，P2。如下图：


水波纹

实现思路：

现在分步骤来说明：

1. 画出至少两段波纹我们首先要画出两段波纹。一段波纹就包含两条曲线。每条曲线我们可以使用 quadTo() 方法来画。

为了更容易理解，请看下图：

微信截图_20170326154225.png
这里我们可以用mPath.op(mPath2, Path.Op.INTERSECT);
但是这样就最低版本只能支持api19，兼容性不好，所以我们要换个思维，使用canvas.clipPath(mPath, Region.Op.INTERSECT); 
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画圆
        canvas.drawCircle(mScreenWidth / 2, mCenterY, 300, mPaint2);

        mPath.reset();
        mPath.moveTo(-mWL + offset, mCenterY);
        for (int i = 0; i < mWaveCount; i++) {
            mPath.quadTo((-mWL * 3 / 4) + (i * mWL) + offset, mCenterY + 60, (-mWL / 2) + (i * mWL) + offset, mCenterY);
            mPath.quadTo((-mWL / 4) + (i * mWL) + offset, mCenterY - 60, i * mWL + offset, mCenterY);
        }
        mPath.lineTo(mScreenWidth, mScreenHeight);
        mPath.lineTo(0, mScreenHeight);
        mPath.close();

        mPath2.addCircle(mScreenWidth / 2, mCenterY, 300, Path.Direction.CCW);
        //api19以上才能用
//        mPath.op(mPath2, Path.Op.INTERSECT);
        //改用canvas.clipPath
        canvas.clipPath(mPath, Region.Op.INTERSECT);
        canvas.setDrawFilter(pfd);
        canvas.drawPath(mPath2, mPaint);

    }

成功画出


水波纹

三阶贝塞尔曲线的应用：

小水滴粘性.gif

贝塞尔曲线知识讲解
将这个圆的动画效果拆解开看的画，其实会分为5个状态。


pic1.png-2kB

状态1


pic2.png-2.4kB

状态2


pic3.png-2.6kB

状态3


pic4.png-2.4kB

状态4


pic1.png-2kB

状态5注：我这里的状态4和状态5其实与原设计图是有出入的，我这里的5个状态其实是对称关系的，但是原设计图并非是对称关系，然后因为我偷懒，就做成了对称设计，这个以后再优化吧~
也就是说，这个动画效果的实现就是不同状态之间的转化加上水平位移的实现，现在已经将动画肢解完了，那么接下来就讲解下如何实现圆的形变吧。
开始讲解具体内容之前我们需要先了解一下如何用贝塞尔曲线画一个圆，因为我的做法是通过贝塞尔曲线来实现的。


stackoverflow

上图是stackoverflow上的一个答案，这个答案可能说的不是很清楚，这里还有一篇文章，这两个的结果都是差不多，就是所需要的数值c约等于0.551915024494f，具体的论证过程可以看这两篇文章，那么这个c的值有什么用么，我用最简单的方法来说明，就是把图中的1理解为圆的半径，那么对应的另外个值就应该是半径乘以0.551915024494f。可能有朋友还是看不懂这个c到底干啥用呢，我下面画一个图来描述下，大概是怎么个意思。

jiangjietu.png-16.1kB

这里的坐标轴也就是Android中的坐标轴了，如果我们打算用贝塞尔曲线来画这么一个圆的话，我们需要知道这个圆的半径，以及图中的M的值，知道这两个值的话就能够知道图中12个点的坐标，知道坐标就能够用Path的cubicTo方法来使用贝塞尔曲线画出圆了。这里稍微展示点代码来说明如何绘制P0至P3这段圆弧。
mPath.moveTo(p0.x,p0.y);mPath.cubicTo(p1.x, p1.y, p2.x, p2.y, p3.x,p3.y);

这样我们就知道如何使用贝塞尔曲线来绘制一个圆了。也就是状态1和状态5我们都会绘制了，接下来看看状态2如何绘制。


jiangjietu2.png-108.1kB

通过上图大家就能很快的明白状态2应该如何绘制，其实就是把右边的点向右移动点距离就行了。其实photoshop(sketch)这些绘图软件中的钢笔工具(Vector)就是用的贝塞尔曲线，然后这里推荐个网址给大家，轻松上手钢笔工具的使用哦，强烈推荐！！！
看完上面的讲解，那么状态3也就一点都不难了。

jiangjietu3.png-111kB

看到上图就明白状态3的实现就是在状态2的基础上修改了个值，一个是M的值加大，让圆看起来跟肥一点，还有就是圈住的那些点向右移动，做到居中。
github代码下载
也欢迎关注我的CSDN和github主页

上一篇下一篇

猜你喜欢

热点阅读