Android teaches you how to draw an ellipse to realize a two-dimensional curve

1. Let’s talk about the thoughts first and look at the pictures.

In the figure above, if the X-axis is drawn counterclockwise from point a to point b to point c, the positive and negative will alternate between sliding left and right, from 1 to 0 to -1 and back to -1 to 0 to 1. The Y-axis will also alternate between positive and negative. Now that we understand this, let’s learn about the trigonometric functions sin and cos

sin function graph

cos function graph

It can be seen that from 0 to π, sin is decreasing from low to high, while cos is from high to low.

We are looking at point e in the first picture at the top and walking clockwise to the Y-axis. In Figure 1, the direction of x from 0 to 1 to 0 from small to large to small is consistent with sin. And the direction of y is from 1 to 0 to -1, and it keeps getting smaller, which is consistent with cos

At this point, you can basically understand these relationships. You can see that π is needed. At this time, we set a progress to control the changes in 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));

Complete code

//绘制水波效果
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;

    }
}

renderings