QQ消息之粘性效果,自己写的

1 自定义gooView

1.1根据图片可以看到其实就是两个圆,一个可以托宅的固定大小的元,一个是固定的大小根据拖拽比例变小的圆,还有一个重点的控制点

//拖拽圆
    PointF dragCenter = new PointF(150, 150);
    float dragRadius = 10;
    //固定圆
    PointF stickyCenter = new PointF(150, 150);
    float stickyRadius = 10;
    **这个是控制点**
    PointF controlCenter = new PointF(125, 150);

在onDraw中绘制出来

 //绘制一个空心的圆,半径是最大拖拽距离,圆心跟固定元一样
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(stickyCenter.x, stickyCenter.y, maxInstance, paint);
//拖拽圆和固定圆
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(dragCenter.x, dragCenter.y, dragRadius, paint);
          canvas.drawCircle(stickyCenter.x, stickyCenter.y, stickyRadius, paint);

1.2用控制点将所有点连接起来

贝塞尔曲线
Path path = new Path();
            path.moveTo(stickyCenters[0].x, stickyCenters[0].y);**曲线的起点**
            path.quadTo(controlCenter.x, controlCenter.y, dragCenters[0].x, dragCenters[0].y);**设置曲线通过的控制点和终点**
            path.lineTo(dragCenters[1].x, dragCenters[1].y);**第一条线连接第二条线的起点**
            path.quadTo(controlCenter.x, controlCenter.y, stickyCenters[1].x, stickyCenters[1].y);**曲线控制点终点**
            canvas.drawPath(path, paint);

1.3抽取圆上的两个点保存

 PointF[] dragCenters = new PointF[]{new PointF(100, 140), new PointF(100, 160)};
    PointF[] stickyCenters = new PointF[]{new PointF(150, 140), new PointF(150, 160)};

3实现拖拽,

3.1在ontouchevent中

    @Override
    public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
    case MotionEvent.ACTION_MOVE:
    // 在哪里按住，拖拽的圆，就要移动到哪里
    dragCenter.set(event.getX(),event.getY());
    break;
    case MotionEvent.ACTION_UP:
    break;
    }
    invalidate();
    return true;
    }

3.2在ondraw中实现拖拽的时候曲线的点换算

工具类在后边

float dy = dragCenter.y - stickyCenter.y;
        float dx = dragCenter.x - stickyCenter.x;
        if (dx != 0) {
            linx = dy / dx;
        }
        //调用工具类实现坐标的换算,直接换算出连接曲线的四个点
        dragCenters = GeometryUtil.getIntersectionPoints(dragCenter, dragRadius, linx);
        stickyCenters = GeometryUtil.getIntersectionPoints(stickyCenter, stickyRadius, linx);
        controlCenter = GeometryUtil.getPointByPercent(dragCenter, stickyCenter, 0.618f);

3.3托拽返回的确定

@Override
protected void onDraw(Canvas canvas) {
....
// 绘制一个空心的圆，半径是最大拖拽距离，圆心和固定圆的圆心一样
paint.setStyle(Paint.Style.STROKE);// 设置空心圆效果
canvas.drawCircle(stickyCenter.x,stickyCenter.y,maxInstance,paint);
paint.setStyle(Paint.Style.FILL);// 设置实心圆效果
canvas.drawCircle(dragCenter.x,dragCenter.y,dragRadius,paint);
// 根据拖拽是否超出最大距离的标示，设置是否绘制曲线和固定的圆
if (!isDraw){
.......
}

3.3在onDraw中随着拖动改变固定圆的大小

stickyRadius = getStickyRedius();

 private float getStickyRedius() {
        float distance = GeometryUtil.getDistanceBetween2Points(dragCenter, stickyCenter);
        float v = distance / maxInstance;
        return new FloatEvaluator().evaluate(v, 10, 3);
    }

3.4松开手指 回弹效果

final PointF pointF = new PointF(dragCenter.x, dragCenter.y);//
                    ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 3);
                    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                        @Override
                        public void onAnimationUpdate(ValueAnimator valueAnimator) {
                            //获取更新动画更新的百分比
                            float fraction = valueAnimator.getAnimatedFraction();
                            //根据动画的百分比,获取对应的点,将拖拽圆的坐标改为获取的点的坐标
                            PointF p = GeometryUtil.getPointByPercent(pointF, stickyCenter, fraction);
                            dragCenter.set(p.x, p.y);
                            invalidate();
                        }
                    });
                    valueAnimator.setInterpolator(new OvershootInterpolator());
                    valueAnimator.setDuration(500);
                    valueAnimator.start();

3.6松开手指超出范围爆炸效果

     break;
            case MotionEvent.ACTION_UP:
                if (isDraw) {
                    //超出返回拖拽圆挥发哦原点,同时实现爆炸效果
                    palyAnim(dragCenter.x, dragCenter.y);
                    dragCenter.set(stickyCenter.x, stickyCenter.y);
                } 

private void palyAnim(float x, float y) {
        //创建imageview将帧动画设置给imageview做背景
        final ImageView imageView = new ImageView(getContext());
        imageView.setLayoutParams(new RelativeLayout.LayoutParams(70, 70));
        imageView.setBackgroundResource(R.drawable.anim);
        //获取帧动画执行帧动画
        AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
        animationDrawable.start();
        final ViewGroup parent = (ViewGroup) getParent();
        parent.addView(imageView);
        //中心位置
        imageView.setTranslationX(x - 35);
        imageView.setTranslationY(y - 35);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                parent.removeView(imageView);
            }
        }, 600);

    }
#4动画集合
```xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true"
    >
    <!--oneshot : 是否执行多次，true:一次，false:多次-->
    <item android:drawable="@drawable/pop1" android:duration="120"></item>
    <item android:drawable="@drawable/pop2" android:duration="120"></item>
    <item android:drawable="@drawable/pop3" android:duration="120"></item>
    <item android:drawable="@drawable/pop4" android:duration="120"></item>
    <item android:drawable="@drawable/pop5" android:duration="120"></item>


</animation-list>




<div class="se-preview-section-delimiter"></div>

5工具类

“`

#5工具类
```java
import android.graphics.PointF;

/**
 * 几何图形工具
 */
public class GeometryUtil {

    /**
     * As meaning of method name.
     * 获得两点之间的距离
     * @param p0
     * @param p1
     * @return
     */
    public static float getDistanceBetween2Points(PointF p0, PointF p1) {
        float distance = (float) Math.sqrt(Math.pow(p0.y - p1.y, 2) + Math.pow(p0.x - p1.x, 2));
        return distance;
    }

    /**
     * Get middle point between p1 and p2.
     * 获得两点连线的中点
     * @param p1
     * @param p2
     * @return
     */
    public static PointF getMiddlePoint(PointF p1, PointF p2) {
        return new PointF((p1.x + p2.x) / 2.0f, (p1.y + p2.y) / 2.0f);
    }

    /**
     * Get point between p1 and p2 by percent.
     * 根据百分比获取两点之间的某个点坐标
     * @param p1
     * @param p2
     * @param percent
     * @return
     */
    public static PointF getPointByPercent(PointF p1, PointF p2, float percent) {
        return new PointF(evaluateValue(percent, p1.x , p2.x), evaluateValue(percent, p1.y , p2.y));
    }

    /**
     * 根据分度值，计算从start到end中，fraction位置的值。fraction范围为0 -> 1
     * @param fraction
     * @param start
     * @param end
     * @return
     */
    public static float evaluateValue(float fraction, Number start, Number end){
        return start.floatValue() + (end.floatValue() - start.floatValue()) * fraction;
    }


    /**
     * Get the point of intersection between circle and line.
     * 获取 通过指定圆心，斜率为lineK的直线与圆的交点。
     * 
     * @param pMiddle The circle center point.
     * @param radius The circle radius.
     * @param lineK The slope of line which cross the pMiddle.
     * @return
     */
    public static PointF[] getIntersectionPoints(PointF pMiddle, float radius, Double lineK) {
        PointF[] points = new PointF[2];

        float radian, xOffset = 0, yOffset = 0; 
        if(lineK != null){
            radian= (float) Math.atan(lineK);//得到该角的角度
            xOffset = (float) (Math.sin(radian) * radius);//得到对边的长
            yOffset = (float) (Math.cos(radian) * radius);//得到邻边的长
        }else {
            xOffset = radius;
            yOffset = 0;
        }
        points[0] = new PointF(pMiddle.x + xOffset, pMiddle.y - yOffset);
        points[1] = new PointF(pMiddle.x - xOffset, pMiddle.y + yOffset);

        return points;
    }
}