效果展示

源码地址

实现思路

绘制正弦波形

水平移动波形，即可得到破浪效果。

正弦波形的绘制

private void createShader() {

...

Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

// Draw default waves into the bitmap

// y=Asin(ωx+φ)+h

float waveX1 = 0;

final float wave2Shift = mDefaultWaveLength / 4;

final float endX = getWidth();

final float endY = getHeight();

...

for (int i = 0; i < listWaves.size(); i++) {

ItemWave itemWave = listWaves.get(i);

if (i == 0) {

wavePaint.setColor(itemWave.line_color);

for (int beginX = 0; beginX < endX; beginX++) {

double wx = beginX * mDefaultAngularFrequency;

float beginY = (float) (mDefaultWaterLevel + mDefaultAmplitude * Math.sin(wx));

float endY = beginY + itemWave.line_height;//波浪线的线条粗度

canvas.drawLine(beginX, beginY, beginX, endY, wavePaint);

waveY[beginX] = beginY;

}

} else {

wavePaint.setColor(itemWave.line_color);

final int wave2Shift = (int) (mDefaultWaveLength / itemWave.line_height);

for (int beginX = 0; beginX < endX; beginX++) {

float beginY = waveY[(beginX + wave2Shift) % endX];

float endY = beginY + itemWave.line_height;//波浪线的线条粗度

canvas.drawLine(beginX, beginY, beginX, endY, wavePaint);

}

}

}

// use the bitamp to create the shader

mWaveShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);

mViewPaint.setShader(mWaveShader);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

privatevoidcreateShader(){

...

Bitmapbitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);

Canvascanvas=newCanvas(bitmap);

//Drawdefaultwavesintothebitmap

//y=Asin(ωx+φ)+h

floatwaveX1=0;

finalfloatwave2Shift=mDefaultWaveLength/4;

finalfloatendX=getWidth();

finalfloatendY=getHeight();

...

for(inti=0;i

ItemWaveitemWave=listWaves.get(i);

if(i==0){

wavePaint.setColor(itemWave.line_color);

for(intbeginX=0;beginX

doublewx=beginX*mDefaultAngularFrequency;

floatbeginY=(float)(mDefaultWaterLevel+mDefaultAmplitude*Math.sin(wx));

floatendY=beginY+itemWave.line_height;//波浪线的线条粗度

canvas.drawLine(beginX,beginY,beginX,endY,wavePaint);

waveY[beginX]=beginY;

}

}else{

wavePaint.setColor(itemWave.line_color);

finalintwave2Shift=(int)(mDefaultWaveLength/itemWave.line_height);

for(intbeginX=0;beginX

floatbeginY=waveY[(beginX+wave2Shift)%endX];

floatendY=beginY+itemWave.line_height;//波浪线的线条粗度

canvas.drawLine(beginX,beginY,beginX,endY,wavePaint);

}

}

}

//usethebitamptocreatetheshader

mWaveShader=newBitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.CLAMP);

mViewPaint.setShader(mWaveShader);

}

首先一个长宽恰等于WaveView的Bitmap：Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888)。

在Bitmap中使用默认的属性绘制出初始波形。初始波形的属性：Wate Level(水位)为WaveView高度的1/2；Amplitude(振幅)为WaveView高度的1/20；Wave Length(波长)等于WaveView的宽度。

代码第 9 ~ 27 行进行初始波形的绘制。波形由我们传入的ArrayList所控制，不需要重复计算。

最后把这个Bitmap设置成为Paint的Shader。设置Shader相当于设定画笔的形状，使用设置了Shader的Paint绘制图形时，实际上是在使用Bitmap填充绘制的区域。X轴的填充方式为TileMode.REPEAT，即重复填充；Y轴的填充方式为TileMode.CLAMP，即使用边缘的色值延伸填充。

调整Bitmap的大小并填充到WaveView

有了初始波形，当WaveView的属性改变时，只需要对初始波形进行相应的拉伸/压缩和位移就可以得到用户想要的波形。

// first call after mShowWave, assign it to our paint

if (mViewPaint.getShader() == null) {

mViewPaint.setShader(mWaveShader);

}

// sacle shader according to mWaveLengthRatio and mAmplitudeRatio

// this decides the size(mWaveLengthRatio for width, mAmplitudeRatio for height) of waves

mShaderMatrix.setScale(

mWaveLengthRatio / DEFAULT_WAVE_LENGTH_RATIO,

mAmplitudeRatio / DEFAULT_AMPLITUDE_RATIO,

0,

mDefaultWaterLevel);

// translate shader according to mWaveShiftRatio and mWaterLevelRatio

// this decides the start position(mWaveShiftRatio for x, mWaterLevelRatio for y) of waves

mShaderMatrix.postTranslate(

mWaveShiftRatio * getWidth(),

(DEFAULT_WATER_LEVEL_RATIO - mWaterLevelRatio) * getHeight());

// assign matrix to invalidate the shader

mWaveShader.setLocalMatrix(mShaderMatrix);

canvas.drawRect(0, 0, getWidth(),

getHeight(), mViewPaint);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

//firstcallaftermShowWave,assignittoourpaint

if(mViewPaint.getShader()==null){

mViewPaint.setShader(mWaveShader);

}

//sacleshaderaccordingtomWaveLengthRatioandmAmplitudeRatio

//thisdecidesthesize(mWaveLengthRatioforwidth,mAmplitudeRatioforheight)ofwaves

mShaderMatrix.setScale(

mWaveLengthRatio/DEFAULT_WAVE_LENGTH_RATIO,

mAmplitudeRatio/DEFAULT_AMPLITUDE_RATIO,

0,

mDefaultWaterLevel);

//translateshaderaccordingtomWaveShiftRatioandmWaterLevelRatio

//thisdecidesthestartposition(mWaveShiftRatioforx,mWaterLevelRatiofory)ofwaves

mShaderMatrix.postTranslate(

mWaveShiftRatio*getWidth(),

(DEFAULT_WATER_LEVEL_RATIO-mWaterLevelRatio)*getHeight());

//assignmatrixtoinvalidatetheshader

mWaveShader.setLocalMatrix(mShaderMatrix);

canvas.drawRect(0,0,getWidth(),

getHeight(),mViewPaint);

代码 3 ~ 6 行对Shader进行拉伸/压缩，10 ~ 12 行对Shader进行水平/竖直平移。

代码 17 ~ 19 行用Shader填充成想要的形状。

平移动画

private void initAnimation() {

// horizontal animation. 平移动画，实现波浪效果

// wave waves infinitely.

ObjectAnimator waveShiftAnim = ObjectAnimator.ofFloat(

mWaveView, "waveShiftRatio", 0f, 1f);

waveShiftAnim.setRepeatCount(ValueAnimator.INFINITE);//Animation.INFINITE 表示重复多次

waveShiftAnim.setDuration(1000);

waveShiftAnim.setInterpolator(new LinearInterpolator());

mAnimatorSet = new AnimatorSet();

mAnimatorSet.play(waveShiftAnim);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

privatevoidinitAnimation(){

//horizontalanimation.平移动画，实现波浪效果

//wavewavesinfinitely.

ObjectAnimatorwaveShiftAnim=ObjectAnimator.ofFloat(

mWaveView,"waveShiftRatio",0f,1f);

waveShiftAnim.setRepeatCount(ValueAnimator.INFINITE);//Animation.INFINITE表示重复多次

waveShiftAnim.setDuration(1000);

waveShiftAnim.setInterpolator(newLinearInterpolator());

mAnimatorSet=newAnimatorSet();

mAnimatorSet.play(waveShiftAnim);

}