android贝塞尔曲线的简单应用

最新推荐文章于 2021-10-11 15:49:12 发布

易水寒1992

最新推荐文章于 2021-10-11 15:49:12 发布

阅读量959

点赞数

分类专栏： android 文章标签： android 应用 bezer

本文链接：https://blog.csdn.net/wateryi/article/details/50736245

版权

android 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

需求：开始有个四分之一圆弧曲线，通过手指滑动，曲线慢慢变成直线

分析：通过观察，发现该view可以通过绘制特定path的内容来实现曲线的变化，正好android，Paht类提供了quadTo方法：

android.graphics.Path.quadTo(float x1, float y1, float x2, float y2)

前两个参数确认了一个点（参考点）；后面两个参数确认最终结束的点；

而我们的需求是曲线慢慢变化成直线，这就要求参考点和结束点不断的变化，这就可以通过重写view的onTouchEvent时间来实现：关键代码如下：

public boolean onTouchEvent(MotionEvent event) {
    Log.i("wrx226", "myView---onInterceptTouchEvent---");
    int action = event.getAction();
    switch(action) {
        case MotionEvent.ACTION_DOWN:
            mFirstX = event.getX();
            mFirstY = event.getY();
            startTime = System.currentTimeMillis();
            break;
        case MotionEvent.ACTION_MOVE:
            diffY = event.getY() - mFirstY;
            if (diffY > 0) {
                diffY = 0;
            }
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            long diffTime = System.currentTimeMillis() - startTime;
            float diffSpeed = diffY / diffTime;
            if (-diffSpeed > 0.5) {
                //执行往上的动画并解锁
                animator = ValueAnimator.ofFloat(diffY, -getMeasuredHeight());
                animator.setDuration(400);
                animator.setInterpolator(new DecelerateInterpolator(4.0f));
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        diffY = (float) animation.getAnimatedValue();
                        Log.i("wrx1009", "diffY = " + diffY);
                        invalidate();
                    }
                });
                animator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        Log.i("wrx1009", "---animator is end---");
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
                animator.start();
            } else {
                //执行往下的动画并回到初始状态
                animator = ValueAnimator.ofFloat(diffY, 0);
                animator.setDuration(400);
                animator.setInterpolator(new BounceInterpolator());
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        diffY = (float) animation.getAnimatedValue();
                        Log.i("wrx1009", "diffY = " + diffY);
                        invalidate();
                    }
                });
                animator.start();
            }
            break;
    }
    return true;
}

通过调用invalidate重绘控件：

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int diffHeight = getMeasuredHeight() - circleHeight - rectHeight;
    if (diffY >= -circleHeight) {
        mPath.reset();
        mPath.moveTo(480, diffHeight);
        mPath.quadTo(480, diffHeight + circleHeight + diffY, 360, diffHeight + circleHeight + diffY);
        mPath.lineTo(0, diffHeight + circleHeight + diffY);
        mPath.lineTo(0, getMeasuredHeight() + diffY);
        mPath.lineTo(480, getMeasuredHeight() + diffY);
        mPath.lineTo(480, diffHeight);
        mPath.close();

        canvas.drawPath(mPath, mPaint);
    } else {
        mPath.reset();
        mPath.moveTo(480, diffHeight + circleHeight + diffY);
        mPath.lineTo(0, diffHeight + circleHeight + diffY);
        mPath.lineTo(0, getMeasuredHeight() + diffY);
        mPath.lineTo(480, getMeasuredHeight() + diffY);
        mPath.lineTo(480, diffHeight + circleHeight + diffY);
        mPath.close();

        canvas.drawPath(mPath, mPaint);
    }
}