效果图预览
1. 分析
1. QQ拖拽小红点实现这个主要是用到的二阶贝塞尔曲线
2. 在可拖拽范围内实现小红点的拖拽回弹动画处理
3. 如果超出了最大拖拽范围 松手时也在拖拽范围之外,则做松手动画处理
4. 如果超出了最大拖拽范围 松手时在拖拽范围之内,则把小红点复位
2. 实现原理
1. 二阶贝塞尔曲线可以用path相关方法实现,然后用canvas.drawPath
2. 分别需要绘制拖拽圆和固定圆 在一开始 两个圆的圆心和半径大小一样大
3. 在onTouchEvent中处理拖拽事件,动态更新拖拽圆的圆心坐标
4. 回弹动画和拖拽范围外帧动画处理
3. 初始化一些东西 初始化一般我放在onSizeChanged方法中
//固定的圆圆心坐标和半径
private PointF mFixedPoint;
private float mFixedRadius;
//拖拽的圆圆心坐标和半径
private PointF mDragPoint;
private float mDragRadius;
//拖拽范围最大圆的圆心坐标和半径 最大拖拽范围
private float mMaxDragRange;
private float mDragMaxRadius;
private PointF mDragMaxPoint;
//控制点的坐标
private PointF mControlPoint;
//固定圆和拖拽圆切点坐标
private PointF[] mFixedTangentPoint;
private PointF[] mDragTangentPoint;
//触摸拖拽移动范围大小
private float mDragMoveRange;
//是否超出了范围
private boolean mIsOutRange = false;
//是否在超出范围外松手
private boolean mIsOutUp = false;
//动画中固定圆的最小半径
private float mMinFixedRadius;
private Path mPath;
private WindowManager.LayoutParams mParams;
private WindowManager mWindowManager;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
this.mViewWidth = w;
this.mViewHeight = h;
//初始化各个坐标点
float mCenterX = dip2px(180);
float mCenterY = dip2px(260);
mFixedPoint = new PointF(mCenterX,mCenterY);
mDragPoint = new PointF(mCenterX,mCenterY);
mDragMaxPoint = new PointF(mCenterX,mCenterY);
mControlPoint = new PointF();
mFixedTangentPoint = new PointF[2];
mDragTangentPoint = new PointF[2];
//初始化各个半径
mFixedRadius = dip2px(12);
mDragRadius = dip2px(14);
mMinFixedRadius = dip2px(8);
mDragMaxRadius = dip2px(100);
mMaxDragRange = mDragMaxRadius;
//初始化 WindowManager和mParams 用于添加范围外爆炸图片 做动画处理
mWindowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
mParams = new WindowManager.LayoutParams();
mParams.format = PixelFormat.TRANSLUCENT;
mParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
mParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
}
4. 绘制贝瑟尔曲线
贝塞尔曲线分一阶贝塞尔曲线 ,通过path对象
path.lineTo连接线段
二阶贝塞尔曲线
path.quadTo需要一个起点,一个终点和一个控制点
三阶贝塞尔曲线
path.cubicTo需要一个起点,一个终点,两个控制点
一些数学知识 :
两平行线的斜率相等
两条线垂直相交 则斜率的乘积=-1
斜率计算公式k=(y0-y1) / (x0-x1) 当 x0-x1不等于0的时候
path.moveTo是移动到某一个点
path.lineTo是连接某一个点构成一条直线
path.close()闭合曲线
//画贝塞尔曲线
private void drawBezier(Canvas canvas){
//计算拖拽过程中固定圆的半径
float mFixedRadius = updateFixedCircleRadius();
//控制点设置为两圆心点连线的中心坐标
mControlPoint.set((mFixedPoint.x + mDragPoint.x) / 2,(mFixedPoint.y + mDragPoint.y) / 2);
//计算斜率 和 切点坐标
float dy = mDragPoint.y - mFixedPoint.y;
float dx = mDragPoint.x - mFixedPoint.x;
//k1 * k2 = -1 斜率k = (y0 - y1)/(x0 - x1)
if(dx == 0){
mFixedTangentPoint = GeometryUtil.getIntersectionPoints(mFixedPoint,mFixedRadius,0f);
mDragTangentPoint = GeometryUtil.getIntersectionPoints(mDragPoint, mDragRadius,0f);
}else{
float k1 = dy / dx;
float k2 = -1 / k1;
mFixedTangentPoint = GeometryUtil.getIntersectionPoints(mFixedPoint,mFixedRadius,k2);
mDragTangentPoint = GeometryUtil.getIntersectionPoints(mDragPoint, mDragRadius,k2);
}
//需要重置 否则线会重叠
mPath.reset();
//移动起点到固定圆的外切点
mPath.moveTo(mFixedTangentPoint[0].x,mFixedTangentPoint[0].y);
//绘制二阶贝塞尔曲线 需要一个控制点 和终点(拖拽圆的一个切点)
mPath.quadTo(mControlPoint.x,mControlPoint.y, mDragTangentPoint[0].x, mDragTangentPoint[0].y);
//连接拖拽圆的另一个外切点
mPath.lineTo(mDragTangentPoint[1].x, mDragTangentPoint[1].y);
//再次绘制二阶贝塞尔曲线 需要一个控制点 和终点(固定圆的另外一个切点)mPath.quadTo(mControlPoint.x,mControlPoint.y,mFixedTangentPoint[1].x,mFixedTangentPoint[1].y);
//闭合曲线
mPath.close();
//绘制path
canvas.drawPath(mPath,mPaint);
}
5. 触摸事件onTouchEvent方法处理
手指触摸事件,如果手指触摸拖动就更新拖拽圆的x,y坐标,如果拖动的范围已经超出了最大的
拖拽范围就不再绘制连接部分和固定圆
//拖拽出了范围后将不再绘制连接部分和固定圆
if( !mIsOutRange) {
//画固定圆
float mFixedRadius = updateFixedCircleRadius();
canvas.drawCircle(mFixedPoint.x, mFixedPoint.y, mFixedRadius, mPaint);
drawBezier(canvas);
}
手指抬起事件,如果手指移动抬起的时候一直都在拖拽最大范围内,则做回弹动画处理,
如果拖拽出了最大范围,手指松手时候又在拖拽范围内,那么拖拽圆回归固定圆的位置,
如果拖拽出了最大范围,手指松手时候也在最大范围外,则做爆炸(帧)动画处理。
/**
* 手指松手事件处理
*/
private void touchUp(){
//拖拽已经超出了最大范围
if(mIsOutRange){
//手指抬起/松手时是否停留在最大范围内
//松手在范围外
if(mDragMoveRange > mMaxDragRange){
mIsOutUp = true;
outRangePlayAnimation();
invalidate();
}else{
mIsOutUp = false;
//松手在范围内 因为要回到原位置 所以拖拽圆的圆心坐标用固定圆的圆心坐标代替
updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);
}
}else{
//拖拽一直在范围内
resilienceAnimation();
}
}
详细代码如下
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mIsOutRange = false;
float startX = event.getX();
float startY = event.getY();
updateDragCenterXY(startX,startY);
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float moveY = event.getY();
mDragMoveRange = drawDistance();
//超出了拖拽的最大范围
if(mDragMoveRange > mMaxDragRange){
mIsOutRange = true;
}else{
//mIsOutRange=false 因为移出一次后就算它移出过了
mIsOutUp = false;
}
updateDragCenterXY(moveX,moveY);
break;
case MotionEvent.ACTION_UP:
//防止误操作
mDragMoveRange = drawDistance();
touchUp();
break;
}
return true;
}
/**
* 手指松手事件处理
*/
private void touchUp(){
//拖拽已经超出了最大范围
if(mIsOutRange){
//手指抬起/松手时是否停留在最大范围内
//松手在范围外
if(mDragMoveRange > mMaxDragRange){
mIsOutUp = true;
outRangePlayAnimation();
invalidate();
}else{
mIsOutUp = false;
//松手在范围内 因为要回到原位置 所以拖拽圆的圆心坐标用固定圆的圆心坐标代替
updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);
}
}else{
//拖拽一直在范围内
resilienceAnimation();
}
}
/**
* 更新拖拽圆的圆心坐标
* @param x
* @param y
*/
private void updateDragCenterXY(float x, float y){
mDragPoint.set(x,y);
invalidate();
}
6. 动画处理
1. 回弹动画处理
/**
* 移动的时候一直在范围内,最后在范围内做松手回弹动画处理
*/
private void resilienceAnimation() {
final PointF startPoint = new PointF(mDragPoint.x,
mDragPoint.y);
final PointF endPoint = new PointF(mFixedPoint.x,
mFixedPoint.y);
ValueAnimator animator = ValueAnimator.ofFloat(1.0f);
animator.setInterpolator(new OvershootInterpolator(4.0f));
animator.setDuration(500);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = animation.getAnimatedFraction();
PointF byPercent = GeometryUtil.getPointByPercent(
startPoint, endPoint, fraction);
updateDragCenterXY(byPercent.x, byPercent.y);
}
});
animator.start();
}
2. 帧动画处理 这里需要注意的是通过windowManager.addView把图片添加进来
然后做动画处理,动画执行完,调用remove方法移除imageView对象
/**
* 超出范围 松手动画处理
*/
private void outRangePlayAnimation(){
final ImageView imageView = new ImageView(getContext());
imageView.setImageResource(R.drawable.out_anim);
final AnimationDrawable animDrawable = (AnimationDrawable) imageView.getDrawable();
// 这里得到的是其真实的大小,因为此时还得不到其测量值
final int imgWidth = imageView.getDrawable().getIntrinsicWidth();
final int imgHeight = imageView.getDrawable().getIntrinsicHeight();
mParams.gravity = Gravity.TOP | Gravity.LEFT;
mParams.x= (int) mDragPoint.x - imgWidth / 2;
mParams.y= (int) mDragPoint.y - imgHeight / 2;
if(imageView.getParent() == null) {
mWindowManager.addView(imageView, mParams);
}else{
Log.e(TAG,"已经有小姐姐了,你还想要几个啊,��!");
}
if(!animDrawable.isRunning()) {
animDrawable.start();
}else{
animDrawable.stop();
animDrawable.start();
}
long duration = getAnimationDuration(animDrawable);
imageView.postDelayed(new Runnable() {
@Override
public void run() {
animDrawable.stop();
imageView.clearAnimation();
mWindowManager.removeViewImmediate(imageView);
//爆炸动画之后复位 为了多次演示 实际项目中下面两行代码需要注释掉
mIsOutUp = false;
updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);
}
},duration);
}
7. 项目源代码下载
后面统一提供代码下载地址
8. 联系方式
QQ:1509815887