贝塞尔曲线实践--拖拽气泡

贝塞尔曲线扫盲

大家不明白贝塞尔的可以来这里逛逛~~ 浅显易懂

贝塞尔曲线主要由于三个部分控制：起点，终点，中间的辅助控制点。在android自带的Path类中自带了方法，可以帮助我们实现贝塞尔曲线：

二阶贝塞尔

/** 
 * Add a quadratic bezier from the last point, approaching control point 
 * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for 
 * this contour, the first point is automatically set to (0,0). 
 * 
 * @param x1 The x-coordinate of the control point on a quadratic curve 
 * @param y1 The y-coordinate of the control point on a quadratic curve 
 * @param x2 The x-coordinate of the end point on a quadratic curve 
 * @param y2 The y-coordinate of the end point on a quadratic curve 
 */  
public void quadTo(float x1, float y1, float x2, float y2) {  
    isSimplePath = false;  
    native_quadTo(mNativePath, x1, y1, x2, y2);  
}

quadTo()方法从上一个点为起点开始绘制贝塞尔曲线，其中（x1，y1）为辅助控制点，（x2，y2）为终点。

Path mPath = new Path();
mPath.moveTo(x0,y0);
mPath.quadTo(x1,y1,x2,y2);

如调用以上代码，即绘制起点（x0，y0），终点（x2，y2），辅助控制点（x1，y1）的贝塞尔曲线。因此，通过不断改变这三个点的位置，我们可以绘制出各种各样的曲线

三阶贝塞尔

/** 
 * Add a cubic bezier from the last point, approaching control points 
 * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been 
 * made for this contour, the first point is automatically set to (0,0). 
 * 
 * @param x1 The x-coordinate of the 1st control point on a cubic curve 
 * @param y1 The y-coordinate of the 1st control point on a cubic curve 
 * @param x2 The x-coordinate of the 2nd control point on a cubic curve 
 * @param y2 The y-coordinate of the 2nd control point on a cubic curve 
 * @param x3 The x-coordinate of the end point on a cubic curve 
 * @param y3 The y-coordinate of the end point on a cubic curve 
 */  
public void cubicTo(float x1, float y1, float x2, float y2,  
                    float x3, float y3) {  
    isSimplePath = false;  
    native_cubicTo(mNativePath, x1, y1, x2, y2, x3, y3);  
}

cubicTo()方法从上一个点为起点开始绘制三阶贝塞尔曲线，其中（x1，y1）,( x2, y2 )为辅助控制点，（x3，y3）为终点。

拖拽气泡实践

思路

拖拽气泡,其实就是这样的几个状态

1.气泡静止状态 --气泡小球和数字
2.气泡相连 -- 两个相连的气泡小球(带黏连效果),和数字
3.气泡分离 -- 单个气泡小球的拖动
4.气泡消失 -- 爆炸

我们需要在这几个状态分别,做出处理.

这里写图片描述

1.两个圆和一个角度

一个静止的圆O1
一个动的圆O2
互补角和内错角<@

根据圆的关系,和Anchor点,计算出角度<@,用来求贝塞尔曲线的ABCD点坐标.

2.两条贝塞尔二阶曲线

上半边: A---Ar---B, 以Ar为锚点,A和B重点的二阶曲线
下半边: C---Ar---D,以Ar为锚点,C和D重点的二阶曲线

具体坐标的求法,在上图中可见.

根据贝塞尔曲线的要求:
起点，终点，中间的辅助控制点。用在android自带的Path类中自带了方法.

举个例子,就可以这么做

上边线:


            //画上半弧 B-->A---------------

            //A点静坐标计算
            float mBubStillAX = mBubStillCenter.x -mBubStillRadius*sinTheta;
            float mBubStillAY = mBubStillCenter.y +mBubStillRadius*cosTheta;

            //B点动坐标计算
            float mBubMoveBX = mBubMoveableCenter.x -mBubMoveableRadius*sinTheta;
            float mBubMoveBY = mBubMoveableCenter.y +mBubMoveableRadius*cosTheta;

            mBezierPath.moveTo(mBubStillAX,mBubStillAY);
            mBezierPath.quadTo(iAnchorX,iAnchorY,mBubMoveBX,mBubMoveBY);

3.状态判断`OnTouch`

在onTouchEvent()中,对touch事件进行自己处理,即return true进行以下几个状态切换.

按下, 如果当前状态没有消失, 则计算当前气泡距离,和最大允许偏移量作比较 ,进行状态切换
移动 ,改变动点的位置, 计算两点距离, 改变静止点的半径,切换状态,并重绘制,调用ondraw
抬起手, 根据链接状态, 开始进行动画

4.绘制不同 `OnDraw`

根据上述不同的状态,绘制不同的view.

1当当前状态 != 消失, 则, 画移动的气泡和文字
2.相连的气泡状态,绘制贝塞尔曲线
3.boom,爆炸状态, 爆炸效果动画

最终效果