Android波浪

@Android技术点滴

Android波浪

正弦函数概念

正弦曲线可表示为y=Asin(ωx+φ)+k，定义为函数y=Asin(ωx+φ)+k在直角坐标系上的图象，其中sin为正弦符号，x是直角坐标系x轴上的数值，y是在同一直角坐标系上函数对应的y值，k、ω和φ是常数（k、ω、φ∈R且ω≠0）。
正弦曲线是一条波浪线。

Android代码

public class WaveView extends View {
private int width = 0;
private int height = 0;
private Paint mPaint;
private float offset = 0f;//偏移量
private int waveColor;
private boolean directionToRight;
private Path mPath;
private float period=2*3.14f;
private int amplitude;// 振幅
private float w;//频率
public WaveView(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.wave_view);
    waveColor = typedArray.getColor(R.styleable.wave_view_wave_color, Color.parseColor("#F3F5F9"));
    directionToRight = typedArray.getBoolean(R.styleable.wave_view_wave_direction_to_right, true);
    initView();
    typedArray.recycle();
}


private void updateXControl(float start, float to) {
    ValueAnimator mAnimator = ValueAnimator.ofFloat(start, to);
    mAnimator.setInterpolator(new LinearInterpolator());
    mAnimator.addUpdateListener(animation -> {
        float animatorValue = (float) animation.getAnimatedValue();
        offset = animatorValue;//不断的设置偏移量，并重画
        postInvalidate();
    });
    mAnimator.setDuration(5 * 1000);
    mAnimator.setRepeatCount(ValueAnimator.INFINITE);
    mAnimator.start();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawWave(canvas, mPath);
}

private void initView() {
    mPaint = new Paint();
    mPaint.setColor(waveColor);
    mPaint.setStyle(Paint.Style.FILL);
    mPath = new Path();
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    width = getMeasuredWidth();
    height = getMeasuredHeight();
    amplitude = height / 2;
    w = (float) (2f * Math.PI / width);
    if (directionToRight) {
        updateXControl(0, period);
    } else {
        updateXControl(period, 0);
    }

}

//y=Asin(ωx+φ)+k
public void drawWave(Canvas canvas, Path mPath) {
    int x = 0;//x
    mPath.reset();
    mPath.moveTo(0, 0);
    while (x <= width) {
        float endY = (float) (Math.sin(w * x + offset)
                * (float) amplitude + amplitude);
        mPath.lineTo(x, endY);
        x++;
    }
    mPath.lineTo(x - 1, 0);
    mPath.lineTo(width, height);
    mPath.lineTo(0, height);
    mPath.close();
    canvas.drawPath(mPath, mPaint);
}
}

values中attrs.xml添加

<declare-styleable name="wave_view">
    <attr name="wave_color" format="color"></attr>
    <attr name="wave_direction_to_right" format="boolean"></attr>
</declare-styleable>

示例代码

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#2DC090">

        <com.nirvana.ylmc.widget.WaveView
            android:layout_width="match_parent"
            android:layout_height="@dimen/ds40"
            wave:wave_color="#60d6ae"
            wave:wave_direction_to_right="false" />

        <com.nirvana.ylmc.widget.WaveView
            android:layout_width="match_parent"
            android:layout_height="@dimen/ds40"
            android:layout_alignParentBottom="true"
            wave:wave_direction_to_right="true" />

    </RelativeLayout>

总结：写波浪有很多方法，用贝塞尔曲线画，效果一样