炫酷动画效果

先上下最终实现的效果图：

制作的gif效果有点闪哈，真机上效果要好一点的

接下来进入正题：

1.绘制波浪

主要利用斐波那契函数绘制二条曲线，然后不停地偏移一些距离实现波浪移动的效果

以下代码是直接使用某位大神的代码进行的修改

protected void onDraw(Canvas canvas) {        canvas.setDrawFilter(mDrawFilter);        mAbovePath.reset();        mBelowWavePath.reset();        φ -= 0.1f;        float y, y2;        ω = 2 * Math.PI / getWidth();        mAbovePath.moveTo(getLeft(), getBottom());        mBelowWavePath.moveTo(getLeft(), getBottom());        for (float x = 0; x <= getWidth(); x += 20) {            /**             *  y=Asin(ωx+φ)+k             *  A—振幅越大，波形在y轴上最大与最小值的差值越大             *  ω—角速度， 控制正弦周期(单位角度内震动的次数)             *  φ—初相，反映在坐标系上则为图像的左右移动。这里通过不断改变φ,达到波浪移动效果             *  k—偏距，反映在坐标系上则为图像的上移或下移。             */            y = (float) (height / 8 * Math.cos(ω * x + φ) + height / 8 * 3 + height / 2);            y2 = (float) (height / 8 * Math.sin(ω * x + φ) + height / 2);            mAbovePath.lineTo(x, y);            mBelowWavePath.lineTo(x, y2);            //回调 把y坐标的值传出去(在activity里面接收让小机器人随波浪一起摇摆)            mWaveAnimationListener.OnWaveAnimation(y);        }        for(int i=0;i<boards.size();i++){            boards.get(i).drawBoard(canvas);        }        mAbovePath.lineTo(getRight(), getBottom());        mBelowWavePath.lineTo(getRight(), getBottom());        canvas.drawPath(mAbovePath, mAboveWavePaint);        canvas.drawPath(mBelowWavePath, mBelowWavePaint);        postInvalidateDelayed(20);    }

2.绘制小船

新建一个小船类，根据x,y坐标在上面绘制一个bitmap，然后每次随机的向左偏移一段距离，实现移动。

public class Board {    int width;Context context;int type;    int left;    public Board(int width,Context context, int type) {        this.width = width;        this.left=(int)(r.nextInt(100)*width/100);        this.context = context;        this.type = type;    }    Random r=new Random();    public void drawBoard(Canvas canvas) {        Paint paint = new Paint();        int resource=R.mipmap.board1;        switch (type){            case 0:                resource=R.mipmap.board1;                break;            case 1:                resource=R.mipmap.board2;                break;            case 2:                resource=R.mipmap.board3;                break;            case 3:                resource=R.mipmap.board4;                break;            case 4:                resource=R.mipmap.board5;                break;            case 5:                resource=R.mipmap.board6;                break;        }        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resource);        canvas.drawBitmap(bitmap, left, WaveView.getHeight(left)-bitmap.getHeight()/6*5, paint);        left-=r.nextInt(3)*width/1000;        if(left<=-bitmap.getWidth()){            left=width;        }    }}

在WaveView中提供根据X坐标获取Y坐标的方法

public static float getHeight(int left) {        return (float) (height / 8 * Math.cos(ω * left + φ) + height / 8 * 3 + height / 2);    }

最后再WaveView的OnDraw方法中同时绘制所有的小船

for(int i=0;i<boards.size();i++){            boards.get(i).drawBoard(canvas);        }

3.绘制小鱼

小鱼绘制比较复杂，是直接照搬国外大牛做的，我稍微修改了下，给鱼随机产生颜色和移动速度

fishDrawable = new FishDrawable(context, random.nextInt(255), random.nextInt(255), random.nextInt(255));

然后在布局中添加10条

RelativeLayout fishpool= (RelativeLayout) findViewById(R.id.fishpool);        int i=0;        do{            fishpool.addView(new FishDrawableView(this));            i++;        }while (i<10);

到此，就完工了！

感兴趣的可以在下方链接进行下载，感觉还可以，帮忙给个star吧！

Github传送门