xz.gif
首先要了解两个Path的两个方法，这里使用了两次二次贝塞尔曲线
1.path.quadTo(x,y, a, b)绘制二次贝塞尔曲线，(x,y)为控制点
- 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;
}
}
