一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。

2017-08-07 BraveJoy 终端研发部

前言介绍

手把手教你用贝塞尔曲线实现一个精美的跳动的小球。

正文

效果展示：

说点题外话

一开始呢，我就想实现一个这样的效果，于是就新建了一个项目开始撸，结果中间尝试了几种实现方案都不是很理想，也有一些条件未能实现就停止开发了，后面又去恶补了一下相关知识，突然在某一天的某一刻的某一瞬间灵感来了（就是这么神奇~），于是又继续撸代码，终于功夫不负有心人大致上实现了效果，还有待优化和调整，就在准备继续撸的时候公司有一个项目要我接手，之前用H5开发的由于体验性极差所以换成原生开发，于是乎加班生活就来了，强撸了大概半个月时间终于算是告一段落，这时候想起了我的这个效果还没搞完，然后没过半天，又安排了一个即将烂尾的项目给我，又来了没完没了的加班生活，有时候就在想为什么加班没有加班费的情况下加班现象还这么普遍和严重？？？

（TAG：当你看到这里的时候，我已经是第二天在继续写这篇博客了）前两天在上班时间抽出点时间总算是把这个效果彻底完善好了，现在回头想想已经过了半个多月了，在写的过程中修修改改不知道跑了多少遍，现在是时候做个总结了

照例先放个GitHub传送门：

https://github.com/SuperKotlin/PointLoadingView

对于这篇博客呢，我不想讲的太细，因为里面有些东西我怕越讲越乱，我只讲一下我的思想和分析过程以及实现过程，如果你真的想去实现一个这样的效果，只要一步步走，把坑一个一个的填完，你才会明白我为什么这么去写~理解最重要！！！

（TAG：当你看到这里的时候，我已经是第三天在继续写这篇博客了）好的，接下来就分析一下整个的实现的大流程~

1.我们把整个过程分为两个部分：第一部分是小球从最高点下降到最低点，第二部分是从最低点再弹跳到最高点，如此反复；
2.第一个部分：我只要判断当球体接触到绳子的瞬间使小球和绳子接触着一起下降到最低点即可。
3.第二个部分：小球正常弹起，在球线分离之前，绳子和小球都是一块上升，球线分离之后绳子开始回弹再回弹~
备注：这里面最难处理的就是曲线的状态，我们考虑用二阶贝塞尔曲线来做，只要动态改变曲线的控制点坐标即可，
而这个控制点的坐标可以根据曲线的中心点坐标（就是绳子的中点）套用贝塞尔曲线公式求得，所以我们只要根据小球的圆心坐标来求出绳子中点坐标，进而求出控制点来绘制贝塞尔曲线即可。可能说的太笼统不好理解，这里我画了两个草图可以帮助理解~

第一个：下降过程

第二个：弹起过程

如果觉得还是不够帮助理解，那好，我再放个慢镜头gif效果（说真的，每次截取gif图都是耗时间头疼的一件事，我用的迅雷影音截的，没有什么好工具，截取出来不是掉帧就是莫名其妙的少那么一两个片段，求推荐好的工具~）。

对着示意图，我们来分析一下如何根据效果去写代码。

先看下降过程：

图①：小球在最高点，准备下降；

图②：小球接触绳子，这个时候小球压着绳子一块下降一段距离；

图③：从小球开始接触绳子，这个时候获取到圆心Y坐标，根据这个坐标可以求出接触点（也就是绳子中点）的Y坐标，进而求出曲线控制点Y坐标。

再看上升过程：

图①：小球在最低点，准备上升，假如绳子这里下降100个像素；

图②：小球弹起，绳子上升了100个像素，这个时候小球和绳子即将分离；图③：小球继续上升，绳子开始回弹。这里回弹50个像素

图④：绳子静止。

好吧，到了这里我基本上已经分析完了，具体实现过程就看代码吧~代码中我也写了很详细的注释。

PointLoadingView.java

/**
 * 贝塞尔曲线控件
 * Created by zhuyong on 2017/7/18.
 * 实现思想：
 * 1.我们把整个过程分为两个部分：第一部分是小球从最高点下降到最低点，第二部分是从最低点再弹跳到最高点，如此反复；
 * 2.第一个部分：我只要判断当球体接触到绳子的瞬间使小球和绳子接触着一起下降到最低点即可。
 * 3.第二个部分：小球正常弹起，在球线分离之前，绳子和小球都是一块上升，球线分离之后绳子开始回弹再回弹~
 * 备注：这里面最难处理的就是曲线的状态，我们考虑用二阶贝塞尔曲线来做，只要动态改变曲线的控制点坐标即可，
 * 而这个控制点的坐标可以根据曲线的中心点坐标（就是绳子的中点）套用贝塞尔曲线公式求得，所以我们只要根据
 * 小球的圆心坐标来求出绳子中点坐标，进而求出控制点来绘制贝塞尔曲线即可。
 */
public class PointLoadingView extends View {
 
  ......
  

    @Override    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
         ......        //绘制弹跳的小球
        canvas.drawCircle(mViewWidth / 2, mY, mPointRadius, paintCircle);
    }

    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mY = mViewHeight / 2 - mJumpHeight;//小球圆心坐标（X坐标不变，Y坐标等于view高度的一半减去弹跳高度）
        mBerSaiErY = mViewHeight / 2;//贝塞尔曲线控制点坐标（X坐标不变，在最开始的时候，Y坐标等于view高度的一半）
        start = new Point(0 + 10 + mPaintWidth + getPaddingLeft(), mViewHeight / 2);//左端点
        end = new Point(mViewWidth - 10 - mPaintWidth - getPaddingRight(), mViewHeight / 2);//右端点
        //这里判断mJumpHeight能不能达到需要的高度，如果不行则根据view高度重新计算（跳起高度最大不能超过view高度的一半减去小球的半径）
        if (mJumpHeight > mViewHeight / 2 - mPointRadius / 2) {
            mJumpHeight = mViewHeight / 2 - mPointRadius;//为什么减去直径而不是半径，因为小球弹起的起点高度是从半径开始的
        }        //为什么是3倍，因为这个过程中球上升的高度是100的3倍，就像我们默认是绳子下降100个像素，
        // 然后上升100个像素后球线分离，线再下降150个像素，线在上升50个像素到最后绳子静止，而这个过程中球上升的高度是300个像素
        if (mJumpHeight <= 3 * mDownPx) {//球上升的最大高度必须大于3倍的绳子下降最低距离，这里减去10个像素之差，否则绳子会失去弹性效果
            mDownPx = mJumpHeight / 3 - 10;
        }
        initAnimator();
    }      /**
     * 初始化动画
     */
    private void initAnimator() {       
         //(下降过程部分)
        //功能：球从最高处降落到最低处
        //这个过程中需要考虑两个过程，一是球下降到接触绳子之前，二是接触绳子之后一直到下降到最低点然后结束。
        //mY的范围是从最高点下降到最低点（mViewHeight / 2 - mJumpHeight——>mViewHeight / 2 + mDownPx）
        //这里我们实时获取到mY(小球圆心Y坐标)，根据mY的值判断何时接触绳子，接触绳子之后开始给控制点mBerSaiErY赋值，重新绘制贝塞尔曲线。
        mAnimatorDown = ValueAnimator.ofFloat(mViewHeight / 2 - mJumpHeight, mViewHeight / 2 + mDownPx);
        mAnimatorDown.setDuration(TIME);
        mAnimatorDown.setInterpolator(new AccelerateInterpolator());//加速下降
        mAnimatorDown.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
             @Override           
             public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mY = (float) valueAnimator.getAnimatedValue();                if (mY < mViewHeight / 2 - mPointRadius - mPaintWidth / 2) {//小球下降，没有接触绳子
                    mBerSaiErY = mViewHeight / 2;//在这个过程中绳子没有发生变化
                } else if (mY >= mViewHeight / 2 - mPointRadius - mPaintWidth / 2 && mY <= mViewHeight / 2 + mDownPx) {                    //在这个过程中，绳子贴着小球一块下降到最低点。
                    mBerSaiErY = getControlPointF(start, end,                            new Point(mViewWidth / 2, mY + mPointRadius + mPaintWidth / 2)).getY();
                }
               
               invalidate();//重新绘制
            }
        });
        mAnimatorDown.addListener(new AnimatorListenerAdapter() {
            @Override            
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                up();//当下降完成后开始上升
            }
        });        
        //(弹起过程部分)
        //功能：球从最低处弹起到最高处
        //这个过程中需要考虑两个部分，第一部分是小球一直在上升，第二部分是绳子的回弹效果。
        //小球：小球的上升很好理解，直接从最低点到最高点减速上升
        //绳子：小球上升到距离水平面一定距离后（这里默认和绳子下降的最低距离相同），小球和绳子分离，小球继续上升，绳子开始回弹。
        //绳子的回弹过程，从最低点弹起——>水平面（绳子水平是的位置）——>上升到球线分离——>水平面（绳子水平是的位置）——>最低点一半的距离——>水平面（绳子水平是的位置）
        mAnimatorUp = ValueAnimator.ofFloat(mViewHeight / 2 + mDownPx, mViewHeight / 2 - mJumpHeight);
        mAnimatorUp.setInterpolator(new DecelerateInterpolator());//减速上升
        mAnimatorUp.setDuration(TIME);
        mAnimatorUp.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
              @Override            
              public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mY = (float) valueAnimator.getAnimatedValue();                if (mY >= mViewHeight / 2 - mDownPx - mPointRadius - mPaintWidth / 2
                        && mY <= mViewHeight / 2 + mDownPx) {//上升100个像素后球线分离
                    mBerSaiErY = getControlPointF(start, end,                            new Point(mViewWidth / 2, mY + mPointRadius + mPaintWidth / 2)).getY();
                } else if (mY >= mViewHeight / 2 - mDownPx - (mDownPx + mDownPx / 2) - mPointRadius - mPaintWidth / 2
                        && mY < mViewHeight / 2 - mDownPx - mPointRadius - mPaintWidth / 2) {//线下降150个像素
                    //获取曲线上的中心点坐标
                    float mCenterY = (mViewHeight / 2 - mDownPx - mPointRadius - mPaintWidth / 2) * 2 - mY;                    //根据中心点坐标获取曲线的控制点坐标Y
                    mBerSaiErY = getControlPointF(start, end, new Point(mViewWidth / 2, mCenterY + mPointRadius + mPaintWidth / 2)).getY();

                } else if (mY >= mViewHeight / 2 - mDownPx - (mDownPx + mDownPx / 2) - mDownPx / 2 - mPointRadius - mPaintWidth / 2
                        && mY < mViewHeight / 2 - mDownPx - (mDownPx + mDownPx / 2) - mPointRadius - mPaintWidth / 2) {//线上升50个像素
                    //获取曲线上的中心点坐标
                    float mCenterY = mY + 3 * mDownPx;                    //根据中心点坐标获取曲线的控制点坐标Y
                    mBerSaiErY = getControlPointF(start, end, new Point(mViewWidth / 2, mCenterY + mPointRadius + mPaintWidth / 2)).getY();
                } else {//线静止
                    mBerSaiErY = mViewHeight / 2;
                }
                invalidate();//重新绘制

            }
        });
        mAnimatorUp.addListener(new AnimatorListenerAdapter() {
            @Override            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                Startdown();//当上升完成后开始下降
            }
        });

    }
 ......
}

里面的坐标类我没有使用系统的PointF类，而是自己写了一个Point类：

Point.java

package com.zhuyong.pointloading;/**
 * Created by zhuyong on 2017/7/18.
 */

public class Point {    // 设置两个变量用于记录坐标的位置
    private float x;    
    private float y;    // 构造方法用于设置坐标
    public Point(float x, float y) {        
         this.x = x;  
         this.y = y;
    }    
    // get方法用于获取坐标
    public float getX() {        
        return x;
    }    
    
    public float getY() {        
         return y;
    }   
    public void setX(float x) {     
       this.x = x;
    }    
   
   public void setY(float y) {    
           this.y = y;
    }
}

最后只要在activity中调用Startdown方法就好了

mPointLoadingView = (PointLoadingView) findViewById(R.id.BeisaierTwoView);
mPointLoadingView.post(new Runnable() {    
   @Override
    public void run() {
        mPointLoadingView.Startdown();
    }
});

唉，这个view这篇博客前前后后折腾了大半个月，今天终于趁着周末把它完成了，好了，我也可以安心的去吃一个冰激凌了（手动滑稽~）！！！

最后再补一句：这样的效果，我的实现方案肯定不是最好的，而且有些地方判断考虑的不是非常完美，肯定会有bug存在，不过这都不是最重要的，重要的是分析的过程和在实际开发中遇到的问题如何去一个一个的解决，去实现我们想要的效果~我觉得不管是写代码也好还是去做其他的事情也好，都要带着自己的思想去做，心中要明白这一步该做什么，下一步该做什么，这个才是进步的关键吧我觉得！！！