自定义view 波浪效果

实现波浪效果view，可以自定义view，也可以自定义drawable，我个人比较喜欢重写drawable，因此这里是自定义drawable实现效果，费话少说，先看效果。

这里用了两种方式实现波浪效果，一种是通过正弦函数去画路径，一种是通过三阶贝塞尔曲线画出类似正弦曲线的效果
先看看实现波浪效果需要用到的一些参数，看注释大概就能了解

/**
* 画布的宽
*/
int mWidth;
/**
* 画布的高
*/
int mHeight;
/**
* 初始偏移量
*/
float offset = 0;
/**
* 线的宽度，当lineWidth>0时，是画线模式，否则是填充模式
*/
float lineWidth = 0;
/**
* 显示的周期数
*/
float period = 1;
/**
* 移动速度，每秒钟移动的周期数
*/
float speedPeriod = 0.5f;
/**
* 波浪的振幅，单位px
*/
float mSwing = 20;

再来看看正弦函数的实现方式

private class WaveSin extends Wave {

    /**
     * 初始偏移量
     */
    float offRadian = 0;
    /**
     * 每个像素占的弧度
     */
    double perRadian;
    /**
     * 每秒移动的弧度数
     */
    float speedRadian;

    @Override
    public void onDraw(Canvas canvas, boolean isBottom) {
        float y = mHeight;
        mPath.reset();
        //计算路径点的初始位置
        if (lineWidth > 0) {
            y = (float) (mSwing * Math.sin(offRadian) + mSwing);
            mPath.moveTo(-lineWidth, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
        } else {
            mPath.moveTo(0, isBottom ? 0 : mHeight);
        }

        //步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
        int step = mWidth / 100 > 20 ? 20 : mWidth / 100;

        //通过正弦函数计算路径点，放入mPath中
        for (int x = 0; x <= mWidth + step; x += step) {
            y = (float) (mSwing * Math.sin(perRadian * x + offRadian) + mSwing);
            mPath.lineTo(x, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
        }

        //填充模式时，画完完整路径
        if (lineWidth <= 0) {
            mPath.lineTo(mWidth, isBottom ? mHeight - y : y);
            mPath.lineTo(mWidth, isBottom ? 0 : mHeight);
            mPath.lineTo(0, isBottom ? 0 : mHeight);
            mPath.close();
        }

        canvas.drawPath(mPath, mPaint);
    }

    @Override
    void init() {
        perRadian = (float) (2 * Math.PI * period / mWidth);
        speedRadian = (float) (speedPeriod * Math.PI * 2);
        offRadian = (float) (offset * 2 * Math.PI);
    }

    @Override
    public void move(float delta) {
        offRadian += speedRadian * delta;
    }
}

首先`init()`方法中，perRadian是计算每弧度所占的宽度，speedRadian计算每秒移动的弧度，offRadian是当前偏移弧度，在`move(float delta)`中可以看到delta是时间变化量，所以
`下一次的偏移量 = 当前偏移量+每秒移动的弧度*时间的变化量`，即`offRadian += speedRadian * delta;`
再来看看主要的onDraw方法，Canvas是画布，isBottom是指波浪是否在整个画布的底部。

下面是通过贝塞尔曲线实现波浪效果

private class WaveBezier extends Wave {
    /**
     * 根据贝塞尔曲线公式计算的一个常量值
     */
    private static final double MAX_Y = 0.28867513459481287;
    /**
     * 一个周期的宽度
     */
    float periodWidth;
    /**
     * 每秒钟移动的宽度
     */
    float speedWidth;
    /**
     * 贝塞尔曲线控制点的Y轴坐标
     */
    float conY;
    /**
     * 当前偏移量
     */
    float currentOffset = 0;

    @Override
    public void onDraw(Canvas canvas, boolean isBottom) {
        mPath.reset();
        //  移动到第一个周期的起始点
        mPath.moveTo(-currentOffset, 0);
        float conX = periodWidth / 2;
        int w = (int) -currentOffset;
        for (int i = 0; i <= mWidth + currentOffset; i += periodWidth) {
            mPath.rCubicTo(conX, conY, conX, -conY, periodWidth, 0);//注意，这里用的是相对坐标
            w += periodWidth;
        }

        // 闭合路径
        if (lineWidth <= 0) {
            mPath.rLineTo(0, isBottom ? -mHeight : mHeight);
            mPath.rLineTo(-w, 0);
            mPath.close();
        }

        //  对Y轴整体偏移
        mPath.offset(0, (isBottom ? mHeight - mSwing - lineWidth / 2 : mSwing + lineWidth / 2));

        canvas.drawPath(mPath, mPaint);
    }

    @Override
    void init() {
        periodWidth = mWidth / period;
        speedWidth = speedPeriod * periodWidth;
        currentOffset = offset * periodWidth;
        conY = (float) (mSwing / MAX_Y);
        isReInit = false;
    }

    @Override
    public void move(float delta) {
        if (periodWidth <= 0) {
            isReInit = true;
            return;
        }
        currentOffset += speedWidth * delta;
        if (currentOffset < 0) {
            currentOffset += periodWidth;
        } else {
            if (currentOffset > periodWidth) {
                currentOffset -= periodWidth;
            }
        }
    }
}

 

在 `init()`方法中periodWidth为单个周期宽度，speedWidth为每秒移动的宽度，currentOffset为当前偏移量，conY为控制点的Y轴坐标。

最后贴上完整代码

package cn.sskbskdrin.wave;

import android.animation.ValueAnimator;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.view.animation.LinearInterpolator;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.WeakHashMap;

/**
 * Created by sskbskdrin on 2018/4/4.
 *
 * @author sskbskdrin
 */
public class WaveDrawable extends Drawable implements Animatable {

    private final List<Wave> list;

    private int mWidth;
    private int mHeight;

    private boolean animIsStart = false;

    private boolean isBottom = false;

    public WaveDrawable() {
        this(1);
    }

    public WaveDrawable(int count) {
        this(count, false);
    }

    public WaveDrawable(int count, boolean isSin) {
        if (count <= 0) {
            throw new IllegalArgumentException("Illegal count: " + count);
        }
        list = new ArrayList<>(count);
        for (int i = 0; i < count; i++) {
            list.add(isSin ? new WaveSin() : new WaveBezier());
        }
    }

    public void setBottom(boolean isBottom) {
        this.isBottom = isBottom;
    }

    /**
     * 设置填充的颜色
     *
     * @param color
     */
    public void setColor(int color) {
        for (Wave wave : list) {
            wave.setColor(color);
        }
    }

    /**
     * 设置填充的颜色
     *
     * @param color
     */
    public void setColor(int color, int index) {
        if (index < list.size()) {
            list.get(index).setColor(color);
        }
    }

    public void setOffset(float offset) {
        for (Wave wave : list) {
            wave.offset(offset);
        }
    }

    /**
     * 设置初始相位
     *
     * @param offset
     * @param index
     */
    public void setOffset(float offset, int index) {
        if (index < list.size()) {
            list.get(index).offset(offset);
        }
    }

    /**
     * 波浪的大小
     *
     * @param swing
     */
    public void setSwing(int swing) {
        for (Wave wave : list) {
            wave.setSwing(swing);
        }
    }

    /**
     * 波浪的大小
     *
     * @param swing
     * @param index
     */
    public void setSwing(int swing, int index) {
        checkIndex(index);
        list.get(index).setSwing(swing);
    }

    /**
     * 设置波浪流动的速度
     *
     * @param speed
     */
    public void setSpeed(float speed) {
        for (Wave wave : list) {
            wave.setSpeed(speed);
        }
    }

    /**
     * 设置波浪流动的速度
     *
     * @param speed
     */
    public void setSpeed(float speed, int index) {
        checkIndex(index);
        list.get(index).setSpeed(speed);
    }

    /**
     * 设置波浪周期数
     *
     * @param period (0,--)
     */
    public void setPeriod(float period) {
        for (Wave wave : list) {
            wave.setPeriod(period);
        }
    }

    public void setPeriod(float period, int index) {
        checkIndex(index);
        list.get(index).setPeriod(period);
    }

    private void checkIndex(int index) {
        if (index < 0 || index >= list.size()) {
            throw new IllegalArgumentException("Illegal index. list size=" + list.size() + " index=" + index);
        }
    }

    public void setLineWidth(float width) {
        for (Wave wave : list) {
            wave.setLineWidth(width);
        }
    }

    public void setLineWidth(float width, int index) {
        if (index >= 0 && index < list.size()) {
            list.get(index).setLineWidth(width);
        }
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        mWidth = bounds.width();
        mHeight = bounds.height();
        for (Wave wave : list) {
            wave.onSizeChange(mWidth, mHeight);
        }
    }

    @Override
    public void draw(Canvas canvas) {
        for (Wave wave : list) {
            if (wave.isReInit) {
                wave.init();
                wave.isReInit = false;
            }
            wave.onDraw(canvas, isBottom);
        }
    }

    @Override
    public int getIntrinsicWidth() {
        return mWidth;
    }

    @Override
    public int getIntrinsicHeight() {
        return mHeight;
    }

    private void move(float delta) {
        for (Wave wave : list) {
            wave.move(delta);
        }
    }

    @Override
    public void setAlpha(int alpha) {
        for (Wave wave : list) {
            wave.mPaint.setAlpha(alpha);
        }
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        for (Wave wave : list) {
            wave.mPaint.setColorFilter(cf);
        }
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public boolean setVisible(boolean visible, boolean restart) {
        if (visible) {
            if (animIsStart) {
                AnimateListener.start(this);
            }
        } else {
            if (animIsStart) {
                AnimateListener.start(this);
            }
        }
        return super.setVisible(visible, restart);
    }

    @Override
    public void start() {
        animIsStart = true;
        AnimateListener.start(this);
    }

    @Override
    public void stop() {
        AnimateListener.cancel(this);
        animIsStart = false;
    }

    @Override
    public boolean isRunning() {
        return AnimateListener.isRunning(this);
    }

    private static class AnimateListener implements ValueAnimator.AnimatorUpdateListener {
        private static WeakHashMap<WaveDrawable, Boolean> map = new WeakHashMap<>();
        private static int lastTime = 0;
        private static ValueAnimator valueAnimator;

        private static void initAnimation() {
            valueAnimator = ValueAnimator.ofInt(0, 1000);
            valueAnimator.setDuration(1000);
            valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
            valueAnimator.setInterpolator(new LinearInterpolator());
            valueAnimator.addUpdateListener(new AnimateListener());
        }

        private static void start(WaveDrawable drawable) {
            if (!map.containsKey(drawable)) {
                map.put(drawable, true);
            }
            if (valueAnimator == null) {
                initAnimation();
            }
            if (!valueAnimator.isRunning()) {
                valueAnimator.start();
            }
        }

        private static void cancel(WaveDrawable drawable) {
            if (map.containsKey(drawable)) {
                map.put(drawable, false);
            }
        }

        private static boolean isRunning(WaveDrawable drawable) {
            return map.containsKey(drawable) && map.get(drawable);
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            int current = (int) animation.getAnimatedValue();
            int delta = current - lastTime;
            if (delta < 0) {
                delta = current + 1000 - lastTime;
            }
            float deltaF = delta / 1000f;
            lastTime = current;
            if (map.size() == 0) {
                animation.cancel();
                valueAnimator = null;
                return;
            }
            for (Map.Entry<WaveDrawable, Boolean> wave : map.entrySet()) {
                if (wave != null && wave.getValue()) {
                    WaveDrawable drawable = wave.getKey();
                    drawable.move(deltaF);
                    drawable.invalidateSelf();
                }
            }
        }
    }

    private abstract class Wave {

        /**
         * 画布的宽
         */
        int mWidth;
        /**
         * 画布的高
         */
        int mHeight;
        Path mPath = new Path();
        Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        /**
         * 初始偏移量
         */
        float offset = 0;
        /**
         * 线的宽度，当lineWidth>0时，是画线模式，否则是填充模式
         */
        float lineWidth = 0;
        /**
         * 显示的周期数
         */
        float period = 1;
        /**
         * 移动速度，每秒钟移动的周期数
         */
        float speedPeriod = 0.5f;
        /**
         * 波浪的振幅，单位px
         */
        float mSwing = 20;

        boolean isReInit = true;

        /**
         * drawable 大小改变
         *
         * @param width
         * @param height
         */
        void onSizeChange(int width, int height) {
            mWidth = width;
            mHeight = height;
            isReInit = true;
        }

        abstract void onDraw(Canvas canvas, boolean isBottom);

        abstract void init();

        /**
         * 移动的时间变化量
         *
         * @param delta
         */
        abstract void move(float delta);

        /**
         * 设置线的宽度
         *
         * @param width
         */
        void setLineWidth(float width) {
            lineWidth = width;
            if (lineWidth > 0) {
                mPaint.setStyle(Paint.Style.STROKE);
                mPaint.setStrokeWidth(lineWidth);
            } else {
                mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            }
            isReInit = true;
        }

        void setColor(int color) {
            mPaint.setColor(color);
        }

        /**
         * 每秒移动的像素数
         *
         * @param speedPeriod
         */
        void setSpeed(float speedPeriod) {
            this.speedPeriod = speedPeriod;
            isReInit = true;
        }

        /**
         * 振幅大小
         *
         * @param swing
         */
        void setSwing(float swing) {
            if (swing <= 0) {
                throw new IllegalArgumentException("Illegal swing: " + swing);
            }
            mSwing = swing;
            isReInit = true;
        }

        /**
         * 显示周期数
         *
         * @param period
         */
        void setPeriod(float period) {
            if (period <= 0) {
                throw new IllegalArgumentException("Illegal period: " + period);
            }
            this.period = period;
            isReInit = true;
        }

        /**
         * 起始偏移量
         *
         * @param offPeriod
         */
        void offset(float offPeriod) {
            this.offset = offPeriod;
            isReInit = true;
        }
    }

    private class WaveSin extends Wave {

        /**
         * 初始偏移量
         */
        float offRadian = 0;
        /**
         * 每个像素占的弧度
         */
        double perRadian;
        /**
         * 每秒移动的弧度数
         */
        float speedRadian;

        @Override
        public void onDraw(Canvas canvas, boolean isBottom) {
            float y = mHeight;
            mPath.reset();
            //计算路径点的初始位置
            if (lineWidth > 0) {
                y = (float) (mSwing * Math.sin(offRadian) + mSwing);
                mPath.moveTo(-lineWidth, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
            } else {
                mPath.moveTo(0, isBottom ? 0 : mHeight);
            }

            //步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
            int step = mWidth / 100 > 20 ? 20 : mWidth / 100;

            //通过正弦函数计算路径点，放入mPath中
            for (int x = 0; x <= mWidth + step; x += step) {
                y = (float) (mSwing * Math.sin(perRadian * x + offRadian) + mSwing);
                mPath.lineTo(x, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
            }

            //填充模式时，画完完整路径
            if (lineWidth <= 0) {
                mPath.lineTo(mWidth, isBottom ? mHeight - y : y);
                mPath.lineTo(mWidth, isBottom ? 0 : mHeight);
                mPath.lineTo(0, isBottom ? 0 : mHeight);
                mPath.close();
            }

            canvas.drawPath(mPath, mPaint);
        }

        @Override
        void init() {
            perRadian = (float) (2 * Math.PI * period / mWidth);
            speedRadian = (float) (speedPeriod * Math.PI * 2);
            offRadian = (float) (offset * 2 * Math.PI);
        }

        @Override
        public void move(float delta) {
            offRadian += speedRadian * delta;
        }
    }

    private class WaveBezier extends Wave {
        /**
         * 根据贝塞尔曲线公式计算的一个常量值
         */
        private static final double MAX_Y = 0.28867513459481287;
        /**
         * 一个周期的宽度
         */
        float periodWidth;
        /**
         * 每秒钟移动的宽度
         */
        float speedWidth;
        /**
         * 贝塞尔曲线控制点的Y轴坐标
         */
        float conY;
        /**
         * 当前偏移量
         */
        float currentOffset = 0;

        @Override
        public void onDraw(Canvas canvas, boolean isBottom) {
            mPath.reset();
            //  移动到第一个周期的起始点
            mPath.moveTo(-currentOffset, 0);
            float conX = periodWidth / 2;
            int w = (int) -currentOffset;
            for (int i = 0; i <= mWidth + currentOffset; i += periodWidth) {
                mPath.rCubicTo(conX, conY, conX, -conY, periodWidth, 0);//注意，这里用的是相对坐标
                w += periodWidth;
            }

            // 闭合路径
            if (lineWidth <= 0) {
                mPath.rLineTo(0, isBottom ? -mHeight : mHeight);
                mPath.rLineTo(-w, 0);
                mPath.close();
            }

            //  对Y轴整体偏移
            mPath.offset(0, (isBottom ? mHeight - mSwing - lineWidth / 2 : mSwing + lineWidth / 2));

            canvas.drawPath(mPath, mPaint);
        }

        @Override
        void init() {
            periodWidth = mWidth / period;
            speedWidth = speedPeriod * periodWidth;
            currentOffset = offset * periodWidth;
            conY = (float) (mSwing / MAX_Y);
            isReInit = false;
        }

        @Override
        public void move(float delta) {
            if (periodWidth <= 0) {
                isReInit = true;
                return;
            }
            currentOffset += speedWidth * delta;
            if (currentOffset < 0) {
                currentOffset += periodWidth;
            } else {
                if (currentOffset > periodWidth) {
                    currentOffset -= periodWidth;
                }
            }
        }
    }
}