Bezier curve of technology sharing

Application scenarios of Bezier curve: progress of file download, progress of charging power, water ripple effect
design sketch:

Custom control create a new class Wave inherit view

package besia.test.liang.com.besiacom.liang.test.besia;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

/**
 * Created by Liang on December 14, 2017
 */

public class Wave extends View {

    private Paint paint;
    private Path path;
    private int waveLength = 300;  //Width of wavelength
    private int dx;
    private int dy;

    public Wave(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);

        path = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        path.reset();  //Reset path
        int originY = getHeight();
        if(dy<originY + 150){
            dy += 10;  //Height + 10 per second
        }
        int halfWaveLength = waveLength/2;   //Half wavelength
        path.moveTo(-waveLength+dx, originY-dy);
        //How many wavelengths are put in the width of the screen
        for (int i = -waveLength; i < getWidth() + waveLength; i += waveLength) {
            //Draw a second-order Bezier curve relative to its starting point (that is, the distance dx1 from the end of the previous curve)
            path.rQuadTo(halfWaveLength/2, -80, halfWaveLength, 0);
            path.rQuadTo(halfWaveLength/2, 80, halfWaveLength, 0);
//          path.quadTo(x1, y1, x2, y2)

        }
        //Color fill
        //Draw a closed space
        path.lineTo(getWidth(), getHeight());
        path.lineTo(0, getHeight());
        path.close();

        canvas.drawPath(path, paint);  //Start drawing
    }

    public void startAnimation(){
        ValueAnimator animator = ValueAnimator.ofInt(0,waveLength);
        animator.setDuration(1000);  //Set duration
        animator.setInterpolator(new LinearInterpolator());  //Set up linear accelerator
        //Infinite cycle
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dx = (int) animation.getAnimatedValue();
                postInvalidate();  //Repaint
            }
        });
        animator.start();
    }
}

Use this control in the activity main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="besia.test.liang.com.besiacom.liang.test.besia.MainActivity">

    <besia.test.liang.com.besiacom.liang.test.besia.Wave
        android:id="@+id/wave"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

Make the control move in MainActivity

package besia.test.liang.com.besiacom.liang.test.besia;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

/**
 * Created by Liang on December 14, 2017
 */

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Wave wave = (Wave)findViewById(R.id.wave);
        wave.startAnimation();
    }
}

The above is a simple implementation of the wave effect. If you want to use it in a project, such as progress, you can customize the properties. No code will be provided below

Tags: Android xml encoding

Posted on Mon, 04 May 2020 19:20:53 -0700 by efron