根据贝塞尔曲线编写一个弹性按钮

xz.gif

首先要了解两个Path的两个方法，这里使用了两次二次贝塞尔曲线

1.path.quadTo(x,y, a, b)绘制二次贝塞尔曲线，(x,y)为控制点

2. path.cubicTo(x,y,x1,y1,a,b)绘制三次贝塞尔曲线，(x,y),(x1,y1)为控制点

自己用画图工具画的图

无标题.jpg

根据相似和三角函数可以求得start1，end1,start2,end2这四个点的坐标，这里自己的处理有些麻烦，会根据在不同区域进行计算，会根据在不同的，同时将两个圆心的中间点作为贝塞尔曲线的控制点。

package com.example.chris.gds;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by chris on 2015/12/11.
 */
public class DrawView extends View implements View.OnTouchListener {
    public DrawView(Context context) {
        super(context);
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // aniamtion();
        setOnTouchListener(this);
    }

    private float x1 = 200;
    private float y1 = 400;
    private float r1 = 10;

    private float x2 = 200;
    private float y2 = 400;
    private float r2 = 50;

    /**
     * 获取两个圆心之间的距离
     * @return
     */
    private double getInstance() {
        float a = Math.abs(x2 - x1);
        float b = Math.abs(y2 - y1);
        return Math.sqrt(a * a + b * b);
    }

    /**
     * 获取圆心角一半的弧度
     * @return
     */
    private double getCenterAngle() {
        double s = getInstance();
        return Math.acos(Math.abs(r2 - r1) / s);
    }

    /**
     * 获取圆心连线和x轴的夹角
     * @return
     */
    private double getLineAngle() {
        double s = getInstance();
        double value = Math.asin(Math.abs(y2 - y1) / s);
        return value;
    }
    /**
     * 获取两个圆心之间的中间点
     * @return
     */
    public float[] getCenterPoint(float x1, float y1, float x2, float y2) {
        float centerX = 0;
        if (x1 > x2) {
            centerX = x2 + (x1 - x2) / 2;
        } else {
            centerX = x1 + (x2 - x1) / 2;
        }
        float centerY = 0;
        if (y2 > y1) {
            centerY = y1 + (y2 - y1) / 2;
        } else {
            centerY = y2 + (y1 - y2) / 2;
        }
        return new float[]{centerX, centerY};
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);

        //首先绘制两个圆
        canvas.drawCircle(x1, y1, r1, paint);
        canvas.drawCircle(x2, y2, r2, paint);
        Path path = new Path();
        double centerAngle = getCenterAngle();
        double lineAngle = getLineAngle();
        double requireAngle1 = centerAngle - lineAngle;
        double requireAngle2 = centerAngle + lineAngle - Math.PI / 2;
        //贝塞尔曲线的起始点
        float startX1 = 0;
        float startY1 = 0;
        //贝塞尔曲线的结束点
        float endX1 = 0;
        float endY1 = 0;
        float startX2 = 0;
        float startY2 = 0;
        //贝塞尔曲线的结束点
        float endX2 = 0;
        float endY2 = 0;
        if (x1 <= x2 && y1 >= y2) {
            //在第一象限
            startX1 = (float) (x2 - (r2 * Math.cos(requireAngle1)));
            startY1 = (float) (y2 - (r2 * Math.sin(requireAngle1)));

            endX1 = (float) (x1 - (r1 * Math.cos(requireAngle1)));
            endY1 = (float) (y1 - (r1 * Math.sin(requireAngle1)));

            startX2 = (float) (x2 + (r2 * Math.sin(requireAngle2)));
            startY2 = (float) (y2 + (r2 * Math.cos(requireAngle2)));
            //贝塞尔曲线的结束点
            endX2 = (float) (x1 + (r1 * Math.sin(requireAngle2)));
            endY2 = (float) (y1 + (r1 * Math.cos(requireAngle2)));

        } else if (x1 > x2 && y1 >= y2) {
            //在第二象限

            startX1 = (float) (x2 - (r2 * Math.sin(requireAngle2)));
            startY1 = (float) (y2 + (r2 * Math.cos(requireAngle2)));

            endX1 = (float) (x1 - (r1 * Math.sin(requireAngle2)));
            endY1 = (float) (y1 + (r1 * Math.cos(requireAngle2)));

            startX2 = (float) (x2 + (r2 * Math.cos(requireAngle1)));
            startY2 = (float) (y2 - (r2 * Math.sin(requireAngle1)));
            //贝塞尔曲线的结束点
            endX2 = (float) (x1 + (r1 * Math.cos(requireAngle1)));
            endY2 = (float) (y1 - (r1 * Math.sin(requireAngle1)));

        } else if (x1 > x2 && y1 < y2) {
            //在第三象限
            startX1 = (float) (x2 + (r2 * Math.cos(requireAngle1)));
            startY1 = (float) (y2 + (r2 * Math.sin(requireAngle1)));

            endX1 = (float) (x1 + (r1 * Math.cos(requireAngle1)));
            endY1 = (float) (y1 + (r1 * Math.sin(requireAngle1)));

            startX2 = (float) (x2 - (r2 * Math.sin(requireAngle2)));
            startY2 = (float) (y2 - (r2 * Math.cos(requireAngle2)));
            //贝塞尔曲线的结束点
            endX2 = (float) (x1 - (r1 * Math.sin(requireAngle2)));
            endY2 = (float) (y1 - (r1 * Math.cos(requireAngle2)));


        } else if (x1 <= x2 && y1 < y2) {
            //在第四象限
            startX1 = (float) (x2 + (r2 * Math.sin(requireAngle2)));
            startY1 = (float) (y2 - (r2 * Math.cos(requireAngle2)));

            endX1 = (float) (x1 + (r1 * Math.sin(requireAngle2)));
            endY1 = (float) (y1 - (r1 * Math.cos(requireAngle2)));

            startX2 = (float) (x2 - (r2 * Math.cos(requireAngle1)));
            startY2 = (float) (y2 + (r2 * Math.sin(requireAngle1)));
            //贝塞尔曲线的结束点
            endX2 = (float) (x1 - (r1 * Math.cos(requireAngle1)));
            endY2 = (float) (y1 + (r1 * Math.sin(requireAngle1)));
        }
        path.moveTo(startX1, startY1);

        //贝塞尔曲线控制点
        //float[] center1 = getControlPoint(startX1, startY1, endX1, endY1, false);
        float[] center1 = getCenterPoint(x1, y1, x2, y2);

        path.quadTo(center1[0], center1[1], endX1, endY1);

        path.lineTo(endX2, endY2);
        //贝塞尔曲线控制点
        //float[] center2 = getControlPoint(startX2, startY2, endX2, endY2, true);
        float[] center2 = getCenterPoint(x1, y1, x2, y2);
        path.quadTo(center2[0], center2[1], startX2, startY2);
        path.lineTo(startX1, startY1);
        //封闭两个贝塞尔曲线
        canvas.drawPath(path, paint);
    }

    /**
     * 回弹动画
     */
    public void animation() {

        AnimatorSet animatorSet = new AnimatorSet();

        ValueAnimator valueAnimator1 = ValueAnimator.ofFloat(y2, 400f).setDuration(100);
        valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                y2 = ((float) animation.getAnimatedValue());
                invalidate();
            }
        });

        ValueAnimator valueAnimator2 = ValueAnimator.ofFloat(x2, 200f).setDuration(100);

        valueAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                x2 = ((float) animation.getAnimatedValue());
                invalidate();
            }
        });

        float r = 50;
        ValueAnimator valueAnimator3 = ValueAnimator.ofFloat(r * 0.7f, r * 1f, r * 0.8f, r * 1f, r * 0.9f, r * 1f).setDuration(400);
        valueAnimator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                r2 = ((float) animation.getAnimatedValue());
                invalidate();
            }
        });
        animatorSet.play(valueAnimator1).with(valueAnimator2).before(valueAnimator3);
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                setOnTouchListener(DrawView.this);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        isTouch = false;
    }

    private boolean isTouch = false;
    private float startX;
    private float startY;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isTouch = isTouch(event.getX(), event.getY());
                if (isTouch) {
                    startX = event.getX();
                    startY = event.getY();
                }
                break;
            case MotionEvent.ACTION_MOVE:

                float currentX = event.getX();
                float currentY = event.getY();
                if (isTouch) {
                    //滑动距离超过300就回弹
                    if (getInstance() > 300) {
                        animation();
                        setOnTouchListener(null);
                    } else {
                        x2 = x2 + (currentX - startX);
                        y2 = y2 + (currentY - startY);
                        postInvalidate();
                        startX = currentX;
                        startY = currentY;
                    }

                }

                break;
            case MotionEvent.ACTION_UP:
                if (isTouch) {
                    animation();
                }
                break;
        }
        return true;
    }

    /**
     * 判断是否点中
     * @param touchX
     * @param touchY
     * @return
     */
    private boolean isTouch(float touchX, float touchY) {
        float minX = x2 - r2;
        float maxX = x2 + r2;
        float minY = y2 - r2;
        float maxY = y2 + r2;
        if (touchX >= minX && touchX <= maxX && touchY >= minY && touchY <= maxY) {
            return true;
        }
        return false;
    }
}