¿Cómo se puede lograr esta animación vista de onda a medida?

Enzo Lizama :

Estoy intentando conseguir esta animación de onda personalizada con el círculo en medio de la ola.

A continuación es mi vista personalizada. Se ejecuta en una dirección diferente y el sorteo tiene una línea en medio de la ola que da como resultado una mala UX.

Trato de seguir algunos tutoriales relacionados pero no puedo conseguir la misma animación. Si hay cualquier biblioteca o código de ejemplo a seguir que me podría ayudar mucho.

Gracias.

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import com.guille.stressmeterapp.R;

import org.jetbrains.annotations.Nullable;


public class WaveCustomView extends View {

    private int mWidth = 0;
    private int mHeight = 0;
    private Path path;
    private Paint paint;
    private int waveHeight = 300;
    private int waveWidth = 600;



    private int originalY = 750;
    private Region region;
    private int dx = 0;
    private Bitmap mBitmap;


    private int animationDuration = 3000;

    public WaveCustomView(Context context) {
        super(context, null);
        initUi();
    }

    public WaveCustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs, 0);
        initUi();
    }

    public WaveCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initUi();
    }

    private void initUi() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.parseColor("#000000"));
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(15);
        path = new Path();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.circle);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            int desired = (int) (getPaddingLeft() + getPaddingRight());
            width = desired;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            int desired = (int) (getPaddingTop() + getPaddingBottom());
            height = desired;
        }
        mWidth = width;
        mHeight = height;
        waveWidth = mWidth / 2;
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path, paint);
        setDrawData();
        Rect bounds = region.getBounds();
        if (bounds.top < originalY) {
            canvas.drawBitmap(mBitmap,  bounds.right - (mBitmap.getWidth() >> 1), bounds.top - (mBitmap.getHeight() >> 1), paint);
        } else {
            canvas.drawBitmap(mBitmap, bounds.right - (mBitmap.getWidth() >> 1), bounds.bottom - (mBitmap.getHeight() >> 1), paint);
        }
    }

    private void setDrawData() {
        path.reset();
        int halfWaveWidth = waveWidth / 2;
        path.moveTo(-waveWidth + dx, originalY);

        for (int i = -waveWidth; i < mWidth + waveWidth; i = i + waveWidth) {
            path.rQuadTo(halfWaveWidth >> 1, -waveHeight, halfWaveWidth, 0);
            path.rQuadTo(halfWaveWidth >> 1, waveHeight, halfWaveWidth, 0);
        }
        region = new Region();
        Region clip = new Region((int) (mWidth / 2 - 0.1), 0, mWidth / 2, mHeight * 2);
        region.setPath(path, clip);
        path.close();
    }

    public void startAnimate() {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float factor = (float) valueAnimator.getAnimatedValue();
                dx = (int) ((waveWidth) * factor);
                invalidate();
            }
        });
        animator.setDuration(animationDuration);
        animator.start();
    }

Askirov:

Su código se ve bien. Basta con retirar esta línea de setDrawDatamétodo.

path.close();

Esta línea se cierra camino. Significa que begginnig ruta de conexión con el extremo del trazado. Es por eso que se ve la línea en medio de la ola. Aquí es resultado sin línea media:

Si desea cambiar la dirección de la animación solo cambia de signo dxvariable. Cambia esto:

dx = (int) ((waveWidth) * factor);

A esto:

dx = - (int) (waveWidth * factor);

O en lugar de esto:

path.moveTo(-waveWidth + dx, originalY);

Hacer esto:

path.moveTo(-waveWidth - dx, originalY);

Resultado final: