Android 教你如何画椭圆实现二维曲线

1.先说思想 来看图

上图逆时针 从a点到b到c点循环绘制 X轴就会出现左右来回滑动正负交替，1到0到-1回来-1到0到1的状态，Y轴也是一样正负交替，这里了解了  我们就来了解三角函数sin和cos

sin函数图

cos函数图

可以看出这两个从0到π sin是冲低到高在降低 ，而cos是从高到低

咱们在看最上面第一个图的e点顺时针走到Y轴，图一x的走向从0到1到0 小到大到小符合sin。而y的走向1到0到-1，一直变小符合cos

到这里基本可以懂这些关系了  可以看到都是需要用到π  这时候我们设置一个进度来控制xy的变化

//这里的Math.PI 指的就是π
x = Math.sin(Xprogress * Math.PI)
y = Math.cos(Xprogress * Math.PI)
//这样就得出xy的比例   用x乘你需要的宽度就得到你想要的x坐标   y坐标同理
//heightPixels和widthPixels 指的是屏幕的宽高
 (displayMetrics.widthPixels * 0.6f) * x
(displayMetrics.heightPixels * 0.05f ) * y
//最后整体是这样
float x = (float) (displayMetrics.widthPixels * 0.5f + (displayMetrics.widthPixels * 0.5f) * Math.sin(Xprogress * Math.PI));
float y = (float) (displayMetrics.heightPixels * 0.5f +(displayMetrics.heightPixels * 0.05f ) * Math.cos(Xprogress * Math.PI));

完整代码

//绘制水波效果
public class Shuibo extends View {
    public Paint paint;
    public Path path;
    private DrawFilter mDrawFilter;//抗锯齿
    public DisplayMetrics displayMetrics;
    public Shuibo(Context context) {
        this(context,null);
    }

    public Shuibo(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
        displayMetrics = context.getResources().getDisplayMetrics();
        init();
    }

    public Shuibo(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    Timer timer;
    @SuppressLint("ResourceAsColor")
    public void init(){
        path = new Path();
        paint = new Paint();
        paint.setAntiAlias(true);
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                postInvalidate();//在子线程中执行  postInvalidate()会使onDrow()方法得到执行
            }
        }, 300, 20);
    }
    /*圆角的半径，依次为左上角xy半径，右上角，右下角，左下角*/
    public double  Xprogress = 0;
    @SuppressLint({"NewApi", "ResourceAsColor"})
    @Override
    protected void onDraw(Canvas canvas) {
        aaa();
        path.reset();
        path.moveTo(0,0);
        path.lineTo(0,displayMetrics.heightPixels*0.5f);
        float x = (float) (displayMetrics.widthPixels * 0.5f + (displayMetrics.widthPixels * 0.5f) * Math.sin(Xprogress * Math.PI));
        float y = (float) (displayMetrics.heightPixels * 0.5f +(displayMetrics.heightPixels * 0.05f ) * Math.cos(Xprogress * Math.PI));
        path.quadTo(x,y,displayMetrics.widthPixels,displayMetrics.heightPixels*0.5f);
        path.lineTo(displayMetrics.widthPixels,0);

        paint.setARGB(255,0,0,0);
        canvas.drawPath(path,paint);

        paint.setARGB(100,66,210,210);
        canvas.drawCircle(x,y,20,paint);
        canvas.setDrawFilter(mDrawFilter);
//        canvas.clipPath(path);
        super.onDraw(canvas);
    }
    private void aaa() {

        Xprogress+=0.005;

    }
}

效果图