android贝塞尔曲线的简单应用

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

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