自定义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;
                 }
             }
         }
     }
 }