实现效果：
实现过程：
首先是图形的绘制实现：
采用两个圆，一个是在原地不动的起始圆S，一个是被拉伸出去的圆E，并用两条贝塞尔曲线接合，然后填充。
具体的图形就像下图，为了跟好的切合，选取了图一的方案，两条贝塞尔曲线的控制点选取O和P
为了绘制贝塞尔曲线，我们需要获取A,B,D,C,O,P这6个点的坐标。而我们已知圆S和E的圆心坐标和半径
可根据两圆心的距离和圆心坐标求出角R2R1X的cos和sin值。然后再加上两个圆的半径就可以求出A、B、C、D的坐标。O和P的坐标可以根据上面四个起点的坐标加上圆心距离和cos和sin就可以求出。具体计算代码如下：
private boolean calculateBezierCurve(Circle circleStart, Circle circleEnd){
float startRadius = circleStart.radius;
float endRadius = circleEnd.radius;
float startX = circleStart.centerPoint.x;
float startY = circleStart.centerPoint.y;
float endX= circleEnd.centerPoint.x;
float endY = circleEnd.centerPoint.y;
float mCircleDistance = getDistanceBetweenTwoPoints(startX,startY,endX,endY);
//两个圆重合就无需要绘制连接曲线
if(mCircleDistance == 0){
return false;
}
float cos = (startX - endX)/mCircleDistance;
float sin = (startY - endY)/mCircleDistance;
float ax = startX - startRadius * sin;
float ay = startY + startRadius * cos;
pStartA.x = ax;
pStartA.y = ay;
float bx = startX + startRadius * sin;
float by = startY - startRadius * cos;
pStartB.x = bx;
pStartB.y = by;
float cx = endX - endRadius * sin;
float cy = endY + endRadius * cos;
pEndA.x = cx;
pEndA.y = cy;
float dx = endX + endRadius * sin;
float dy = endY - endRadius * cos;
pEndB.x = dx;
pEndB.y = dy;
float ox = cx + mCircleDistance /2 * cos;
float oy = cy + mCircleDistance /2 * sin;
pControlO.x = ox;
pControlO.y = oy;
float px = dx + mCircleDistance /2 * cos;
float py = dy + mCircleDistance /2 * sin;
pControlP.x = px;
pControlP.y = py;
return true;
}
需要计算的还有两个圆的随手指移动，圆心坐标和半径的变化:downPoint和movePoint分别是手指第一次按下的点和随后滑动手指所在的点
private void calculateCircleSize(){
float mMoveDistance = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
//两圆重合无需再计算
if(mMoveDistance <= 0) return;
mScale = mMoveDistance/MaxMoveDistance;
//开始圆按比例缩小
circleStart.radius = DEFAULT_RADIUS * (1- mScale);
//拉出圆按比例放大
circleEnd.radius = DEFAULT_RADIUS * mScale;
//开始圆的位置不变，拉出圆的位置根据滑动的距离移动
circleEnd.centerPoint.x = circleStart.centerPoint.x + movePoint.x - downPoint.x;
circleEnd.centerPoint.y = circleStart.centerPoint.y + movePoint.y - downPoint.y;
}
经过适当的计算后，就是绘制图形：
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//关闭硬件加速，否则部分path的绘制不生效
setLayerType(View.LAYER_TYPE_SOFTWARE,null);
//根据按下的和滑动的点两个点的距离计算，开始圆和拉出圆的中心坐标以及半径
calculateCircleSize();
canvas.drawCircle(circleStart.centerPoint.x, circleStart.centerPoint.y, circleStart.radius, mBezierPaint);
canvas.drawCircle(circleEnd.centerPoint.x, circleEnd.centerPoint.y, circleEnd.radius, mBezierPaint);
if(calculateBezierCurve(circleStart,circleEnd)){
drawBezierCurves(canvas);//绘制两圆间的贝塞尔曲线
}
if(loadAnimator.isRunning()){
drawLoading(canvas);//绘制旋转时，中心的圆弧
}else {
drawLoadingNormal(canvas);//绘制中心的圆弧和箭头
}
}
然后就是中心圆弧的绘制，因为在加载时和在拖拉时图形不同，就区分开来绘制
在拖拉时，中心是一段圆弧加上一个小箭头。绘制原理大概是在初始化的时候预先创建了一段接近360度的圆圈,因为直接360度的时候后续用PathMeasure测量长度可能不准
mLoadPath = new Path();
float loadCircleRadius = DEFAULT_RADIUS - DEFAULT_PADDING;
RectF circle = new RectF(-loadCircleRadius, -loadCircleRadius, loadCircleRadius, loadCircleRadius);
mLoadPath.addArc(circle, 0, 359.9f);
用PathMeasure获取之前创建圆圈Path的长度，选取圆圈上开始的长度start为0，就是圆圈开始的地方，再选取截取的长度stop为3/4的圆长。并且截取这段圆弧。这样中心的圆弧就有了。
同时，用PathMeasure获取截点stop的坐标以及正切角，用新建的path画一个小箭头，箭头的顶点在stop的坐标上。再根据正切角获取箭头需要旋转的角度。具体代码如下：
private void drawLoadingNormal(Canvas canvas){
//这里包含对画布坐标系的转换，快照一下，防止影响后续绘制
canvas.save();
//将画布中心移到开始圆的中心
canvas.translate(circleStart.centerPoint.x,circleStart.centerPoint.y);
//根据移动的距离比例，对画布缩小和旋转
canvas.scale(1 - mScale,1 - mScale);
canvas.rotate(360 * mScale);
pathMeasure.setPath(mLoadPath,false);//将中心圆圈的path和pathMeasure关联
float[] pos = new float[2];
float[] tan = new float[2];
float stop = pathMeasure.getLength() * 0.75f;
float start = 0;
pathMeasure.getPosTan(stop,pos,tan);//获取截取圆弧的结束点的坐标和方向趋势
//根据tan获取旋转的角度，用于旋转后面绘制的箭头
float degrees =(float)(Math.atan2(tan[1],tan[0])*180/Math.PI);
Matrix matrix = new Matrix();
Path triangle = new Path();
//绘制箭头，此时的箭头的顶点坐标还在原点
triangle.moveTo(pos[0] - 5, pos[1] + 5);
triangle.lineTo(pos[0],pos[1]);
triangle.lineTo(pos[0] + 5, pos[1] + 5);
triangle.close();
//将箭头移动到圆弧结束点的位置并旋转
matrix.setRotate(degrees+90, pos[0],pos[1]);
Path showPath = new Path();
//前面的箭头添加将要绘制的路径里面
showPath.addPath(triangle,matrix);
//截取圆圈从起始点到结束的圆弧并添加到要绘制的path中，true代表不将截取的圆弧的起点移动到之前path的最后一个点上
pathMeasure.getSegment(start,stop,showPath,true);
canvas.drawPath(showPath, mLoadPaint);
canvas.restore();
}
绘制加载时候的圆弧同理，只是少画了箭头，同时start和stop的位置根据animator给与的value来选取，这里的value的值由0慢慢变化到1
private void drawLoading(Canvas canvas){
//基本和绘制一般状态的时候一样，除了截取的起点和终点需要动态的计算
canvas.save();
canvas.translate(circleStart.centerPoint.x, circleStart.centerPoint.y);
canvas.scale(1 - mScale,1 - mScale);
pathMeasure.setPath(mLoadPath,false);
Path newPath = new Path();
float stop = pathMeasure.getLength() * mLoadAnimatorValue;
float start = (float)(stop - (0.5 - Math.abs(mLoadAnimatorValue - 0.5)) * 200f);
pathMeasure.getSegment(start,stop,newPath,true);
canvas.drawPath(newPath, mLoadPaint);
canvas.restore();
}
手指状态获取的代码如下：
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
//动画执行时，无需改变两点的坐标
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
if(!stickyAnimator.isRunning() && !loadAnimator.isRunning()){
downPoint.x = x;
downPoint.y = y;
movePoint.set(downPoint);
resetLoadAnimator();
}
break;
case MotionEvent.ACTION_MOVE:
if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){
movePoint.x = x;
movePoint.y = y;
float distanceMove = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
//滑动距离在动作范围内，则开始执行回滚动画和loading动画
if(inLoadArea(distanceMove)){
loading = true;
executeAnimator(distanceMove);
}
invalidate();
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){
movePoint.x = x;
movePoint.y = y;
float distanceUp = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
//滑动距离在动作范围内，则开始执行回滚动画和loading动画，否则只开始回滚动画
if(inLoadArea(distanceUp)){
loading = true;
}
executeAnimator(distanceUp);
}
break;
}
return true;
}
动画的内容在下一篇讲
http://www.jianshu.com/p/5d35e37ef02a
网友评论