如何實現這種自定義的View Wave動畫？

Question

我正在嘗試通過波浪中間的圓圈實現此自定義波浪動畫。

以下是我的自定義視圖。 它沿不同的方向運行，並且繪制在波形的中間有一條線，這會導致不良的UX。

我嘗試遵循一些相關的教程，但是我無法獲得相同的動畫。 如果要遵循任何庫或代碼示例，可能會對我有很大幫助。

謝謝。

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();
    }

Answer 1

您的代碼看起來不錯。 只需從setDrawData方法中刪除此行setDrawData 。

path.close();

這條線關閉路徑。 這意味着它將路徑起點與路徑末端連接起來。 這就是為什么您在波浪中間看到線。 這是沒有中間線的結果：

如果要更改動畫的方向，只需更改dx變量的符號即可。 更改此：

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

對此：

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

或者代替這個：

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

做這個：

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

最后結果：