QuadView贝塞尔View

来源:互联网 发布:单片机LED接线 编辑:程序博客网 时间:2024/03/29 17:50
不知从什么时候起,码农们都热衷于果冻、粘黏、水滴效果了,认为效果很酷很新奇
但是只是用而已,知道原理的并不多
本篇将实现一个最基本的效果(我也不知道该叫什么效果),见图



原理很简单,就是利用的了Path的quadTo方法,该函数用于绘制贝塞尔曲线

我懒得打字了,直接看代码:

import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;/** * 贝塞尔View *  * @author pythoner */public class QuadView extends View implements Runnable {private final String tag = "tag";private int SLEEP_TIME = 10;private boolean isRunning = false;private int detalY = 20;// 每循环一次拉下的幅度增量值private int maxY = 800;// 允许下拉的最大距离private Path path;private Paint paint;private int y = 0;private int w;// view的宽public QuadView(Context context) {super(context);}public QuadView(Context context, AttributeSet attrs) {super(context, attrs);}public QuadView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void init() {w = getWidth();paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.RED);paint.setStrokeWidth(10);paint.setStyle(Paint.Style.FILL);path = new Path();setPath();}@Overridepublic void onDraw(Canvas c) {super.onDraw(c);c.save();c.drawColor(Color.WHITE);c.drawPath(path, paint);c.restore();}private float oldY = 0;@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stubswitch (event.getAction()) {case MotionEvent.ACTION_DOWN:if (isRunning) {// 线程正在运行的时候打断,把任务交给手势处理isRunning = false;}oldY = event.getY();invalidate();break;case MotionEvent.ACTION_MOVE:float newY = event.getY();if (newY - oldY > 5) {// 向下拉if (y < maxY) {y += detalY;}setPath();invalidate();} else if (newY - oldY < -5) {// 向上拉y -= detalY;if (y < 0) {y = 0;}setPath();invalidate();}oldY = newY;break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:if (!isRunning) {// 线程正在运行的时候,不允许重复执行Thread t = new Thread(this);t.start();}break;default:break;}return true;}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {// TODO Auto-generated method stubsuper.onLayout(changed, left, top, right, bottom);Log.i(tag, "=========onLayout===========");init();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.onMeasure(widthMeasureSpec, heightMeasureSpec);Log.i(tag, "=========onMeasure===========");}@Overridepublic void run() {// TODO Auto-generated method stubisRunning = true;while (isRunning) {long start = System.currentTimeMillis();if (y > 0) {y -= detalY;} else {isRunning = false;}setPath();postInvalidate();// 相当于repaintlong end = System.currentTimeMillis();if (end - start < SLEEP_TIME) {try {Thread.sleep(SLEEP_TIME - (end - start));} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}private void setPath() {path.reset();path.moveTo(0, 0);path.quadTo(w >> 1, y, w, 0);}}


手指下拉,红色区域会呈水滴状出现,释放后又返回到初始状态。
原创粉丝点击