刷新头的升级版，仿QQ的红色消息小球

上一篇博客写了水滴状的下拉刷新头，不过那个只能垂直下拉，也就是一个方向，而且经常用QQ的人也知道，QQ消息来了后，列表右边会有一个红色消息小球，这个小球是可以拉动的，拉起来就像一根皮筋一样，效果很棒，于是我根据那个上篇博客，进行修改，得到一个可以平面拉动的小球，基本近似QQ。



嗯，效果还不错，基本原理和上篇一样，不过因为可以平面拖动，和原来相比，就相当于一维到二维进步，计算难度和运算量基本上了几个数量级，还总是要考虑圆心连线的方向性，头都晕了，数学不好可以绕过了

。



连接两个圆的圆心，过一个圆的圆心做垂线，交圆上AB两点，同理在大圆上面也作出CD两点

分别连线，现在要根据两个圆的圆心坐标和两个圆的半径求出ABCD这4点坐标

一开始想用解析几何的方式求4点坐标，做法：

求出圆心连线的斜率，根据垂直直线斜率相乘等于-1，得到AB直线的斜率

AB直线过原点，则AB直线方程可以用点斜式表达出，与圆的方程联解，即可得到AB两点

问题有两个：1，需要考虑到斜率不存在的情况2，需要求解二元二次方程组，很麻烦

于是，想到了三角函数的办法，因为计算机中求取反三角很简单，所以可以完全不顾解析几何那一套，做法：

求出圆心连线的斜率，根据垂直直线斜率相乘等于-1，得到AB直线的斜率

根据斜率k=tanθ，θ是直线AB和X轴的夹角，θ=arctank

AB点都是圆上的点，圆的方程已经说的很清楚了，x=cosθ*R+Rx，y=sinθ*R+Ry，其中Rx，Ry都是圆心坐标

CD点同理可得，下面需要根据这四个点做二次曲线，因此需要借助到中间点E,F。

直线EF是圆心连线的垂直平分线，交A，B两点延生的两条平行于圆心连线于E,F

因此这两个点也可以通过三角函数来求，以A为原点，已知AF的距离（圆心距一半），AF和X轴的夹角（θ+90），很容易求得

于是乎，剩下两个半圆弧的绘制方法，依旧是用那个方法、arcTo，依旧是要注意圆弧的方向，和整条路径的方向，不然很可能无法闭合曲线。

当然，实际情况比这还要复杂的多

你需要考虑这种情况



当圆出现在下面时，AB直线的斜率依旧不变，可是绘制圆弧的方向却完全不一样了，因此需要在代码中加入一个判断

闭合曲线也是麻烦的要死，嗯，说到这里，绘制这部分算是完了

至于触摸事件，摸着改动大圆圆心坐标就是了，然后刷新view

说说回弹，这次用的回弹和上次有所不同，上次用的是匀速返回，这种效果并不是很好

想作出那种皮筋，或者弹簧的效果来，果然，想到弹簧上的小球正好就是物理上面所说的简谐运动

这正是我想要的，于是乎，看原理：

我需要的是小球运动时圆心距的改变，从圆心距推算出大圆的圆心坐标

而我们可以让圆心距改变的大小是一个简谐运动，圆心距x=A*sin（w*t+Ψ）

振幅A不停减少，一直到0停止，t的经历的时间（不是间隔时间）

根据圆心距和角度angle，可及时的计算出运动中的圆心坐标

small球在上面时,即islow=1，x为正，在下面时islow=-1，x为负，需要根据这个计算初相φ，φ=islow*π/2

A=手放开的时候的圆心距

周期T=2π/ω，则ω=2π/T

当A递减到0，回弹线程结束

好了，下面贴代码：

package com.example.kaifa.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
* TODO: document your custom view class.
*/
public class DanqiuView extends View {

private Paint mPaint;
/**
* 拉伸进度
*/
private float progress = 0;
/**
* view的宽高
*/
private int viewheight, viewwdith;

/**
* 大圆半径
*/
private float GreatCircleRadius = 20;
/**
* 小圆半径
*/
private float SmallCircleRadius = 20;
/**
* 大圆的圆心
*/
private Point GreatCirclePoint;
/**
* 小圆的圆心
*/
private Point SmallCirclePoint;
/**
* 分别在大圆和小圆上面的4个点
*/
private Point A, B, C, D;
/**
* AB直线与X轴的夹角（AB直线和圆心连线垂直）,单位 弧度
*/
private double angle;
/**
* 手指按下接触到的第一个点
*/
private Point firstPoint;
/**
* 两条二次曲线的分别两个中间点
*/
private Point ACmiddlePoint, BDmiddlePoint;
/**
* 绘制路径
*/
private Path mPath;
/**
* 1表示小圆在大圆下面，-1反之
*/
private int islow = -1;
/**
* 两园的圆心距
*/
double dance=0;
/**
* 周期，单位/毫秒
*/
float T=2000;

public DanqiuView(Context context) {
super(context);
init(null, 0);
}

public DanqiuView(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}

public DanqiuView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}

private void init(AttributeSet attrs, int defStyle) {
// Load attributes
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(0xff0000ff);
mPaint.setStyle(Paint.Style.FILL);
mPath = new Path();

GreatCirclePoint = new Point();
SmallCirclePoint = new Point();
A = new Point();
B = new Point();
C = new Point();
D = new Point();
firstPoint = new Point();

ACmiddlePoint = new Point();
BDmiddlePoint = new Point();

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
viewwdith = w;
viewheight = h;

GreatCirclePoint.x = w / 2;
GreatCirclePoint.y = h / 2;

SmallCirclePoint.x = GreatCirclePoint.x;
SmallCirclePoint.y = GreatCirclePoint.y;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//路径重置
mPath.reset();
//若重合，则绘制初始圆
if (GreatCirclePoint.x == SmallCirclePoint.x && GreatCirclePoint.y == SmallCirclePoint.y) {
//初始绘制
mPath.addCircle(GreatCirclePoint.x, GreatCirclePoint.y, GreatCircleRadius, Path.Direction.CW);
canvas.drawPath(mPath, mPaint);
return;
}
//计算四个点的坐标和角度值
//AB直线和圆心连线垂直，斜率相乘等于-1.因此可以得到AB直线的斜率
float kAB = (GreatCirclePoint.x - SmallCirclePoint.x) / (SmallCirclePoint.y - GreatCirclePoint.y);
angle = Math.atan(kAB);
Log.v("xingyun", "斜率K=" + kAB + " 角度a=" + angle);
A.x = (float) (GreatCirclePoint.x + GreatCircleRadius * Math.cos(angle));
A.y = (float) (GreatCirclePoint.y + GreatCircleRadius * Math.sin(angle));

B.x = (float) (GreatCirclePoint.x + GreatCircleRadius * Math.cos(angle + Math.PI));
B.y = (float) (GreatCirclePoint.y + GreatCircleRadius * Math.sin(angle + Math.PI));

C.x = (float) (SmallCirclePoint.x + SmallCircleRadius * Math.cos(angle));
C.y = (float) (SmallCirclePoint.y + SmallCircleRadius * Math.sin(angle));

D.x = (float) (SmallCirclePoint.x + SmallCircleRadius * Math.cos(angle + Math.PI));
D.y = (float) (SmallCirclePoint.y + SmallCircleRadius * Math.sin(angle + Math.PI));

if (GreatCirclePoint.y < SmallCirclePoint.y) {
islow = 1;
} else {
islow = -1;
}

dance = Math.sqrt((GreatCirclePoint.x - SmallCirclePoint.x) * (GreatCirclePoint.x - SmallCirclePoint.x) + (GreatCirclePoint.y - SmallCirclePoint.y) * (GreatCirclePoint.y - SmallCirclePoint.y)) / 2;

progress = (float) dance * 2 / viewheight;
SmallCircleRadius = (float) (20 * (1 - progress * 0.1));

GreatCircleRadius = (float) (20 * (1 - progress));

if (progress < 0.5) {
BDmiddlePoint.x = (float) (B.x + dance * Math.cos(angle + islow * Math.PI / 2));
BDmiddlePoint.y = (float) (B.y + dance * Math.sin(angle + islow * Math.PI / 2));

ACmiddlePoint.x = (float) (A.x + dance * Math.cos(angle + islow * Math.PI / 2));
ACmiddlePoint.y = (float) (A.y + dance * Math.sin(angle + islow * Math.PI / 2));
} else {
BDmiddlePoint.x = GreatCirclePoint.x / 2 + SmallCirclePoint.x / 2;
BDmiddlePoint.y = GreatCirclePoint.y / 2 + SmallCirclePoint.y / 2;
ACmiddlePoint.x = BDmiddlePoint.x;
ACmiddlePoint.y=BDmiddlePoint.y;
}
mPath.arcTo(new RectF(GreatCirclePoint.x - GreatCircleRadius, GreatCirclePoint.y - GreatCircleRadius
, GreatCirclePoint.x + GreatCircleRadius, GreatCirclePoint.y + GreatCircleRadius),
(float) (angle * 180 / Math.PI), islow * (-180));
//从B点到D点,选取其中心点作为渐进点
mPath.quadTo(BDmiddlePoint.x, BDmiddlePoint.y, D.x, D.y);

mPath.arcTo(new RectF(SmallCirclePoint.x - SmallCircleRadius, SmallCirclePoint.y - SmallCircleRadius
, SmallCirclePoint.x + SmallCircleRadius, SmallCirclePoint.y + SmallCircleRadius),
(float) (angle * 180 / Math.PI+180), islow * (-180));

//从A点到C点
mPath.quadTo(ACmiddlePoint.x, ACmiddlePoint.y, A.x, A.y);

canvas.drawPath(mPath, mPaint);

}

@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
firstPoint.x = event.getX();
firstPoint.y = event.getY();

break;
case MotionEvent.ACTION_MOVE:
float dx = event.getX() - firstPoint.x;
float dy = event.getY() - firstPoint.y;

if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
SmallCirclePoint.x = SmallCirclePoint.x + dx;
SmallCirclePoint.y = SmallCirclePoint.y + dy;
invalidate();
}

firstPoint.x = event.getX();
firstPoint.y = event.getY();

break;

case MotionEvent.ACTION_UP:
//开启线程匀速返回,回弹
new MyTread().start();
break;

}
return true;
}

/**
* 回弹的线程,作为简谐运动，则圆心距x=Asin(ωt+φ)，振幅A不停减少，一直到0停止，t的经历的时间（不是间隔时间）
* 根据圆心距和角度angle，可及时的计算出运动中的圆心坐标
* small球在上面时,即islow=1，x为正，在下面时islow=-1，x为负，需要根据这个计算初相φ，φ=islow*π/2
* A=手放开的时候的圆心距
* 周期T=2π/ω，则ω=2π/T
*/
class MyTread extends Thread {
@Override
public void run() {

float A=(float)dance*2;
float fai=(float)( islow*Math.PI/2);
float w=(float)(2* Math.PI/T);
long t=0;
double angle1=angle;

while (A>0){
float x=(float)(A*Math.sin(w*t+fai));
A=A-(float)0.5;
t=t+10;
Log.v("xingyun","振幅："+A+" X:"+x);
SmallCirclePoint.x=GreatCirclePoint.x+x*(float)Math.cos(angle1+Math.PI/2);
SmallCirclePoint.y=GreatCirclePoint.y+x*(float) Math.sin(angle1+Math.PI/2);

try {
sleep(10);
postInvalidate();
} catch (InterruptedException e) {
e.printStackTrace();
}
}

}
}

private class Point {
float x, y;
}

}


能力有限，只能做到这里啦~（计算量这么大幸好也没出现卡顿的现象，运气好好~）

完~