android贝塞尔曲线的简单应用

来源：互联网发布：java基础视频百度云编辑：程序博客网时间：2024/06/05 17:23

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

分析：通过观察，发现该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);    }}

0 0