前言

苦逼的加班啊 一如既往的点开百度外卖 突然发现有个有趣的界面效果 

 
what 百度这么浪啊 怎么大风越狠我心越浪~(跑调了) 
一般人看到这个界面的反应是:哎哟 不错哦;程序猿看到反应是:这他喵的怎么实现的 没错 这就是我的第一反应 

实现

首先 想到的是网上一大搜 看到一个不错的 可惜是OC写的 不过思路有了 不知道大家还记不记得高中学的正余弦曲线表达式 对的 就是这么简单 
下面是我实现的效果 
这里写图片描述

代码(很少,全部贴上)

 1 public class WaveView3 extends View {
 2 
 3     private Path  mAbovePath,mBelowWavePath;
 4     private Paint mAboveWavePaint,mBelowWavePaint;
 5 
 6     private DrawFilter mDrawFilter;
 7 
 8     private float φ;
 9 
10     private OnWaveAnimationListener mWaveAnimationListener;
11 
12     public WaveView3(Context context, AttributeSet attrs) {
13         super(context, attrs);
14         //初始化路径
15         mAbovePath = new Path();
16         mBelowWavePath = new Path();
17         //初始化画笔
18         mAboveWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
19         mAboveWavePaint.setAntiAlias(true);
20         mAboveWavePaint.setStyle(Paint.Style.FILL);
21         mAboveWavePaint.setColor(Color.WHITE);
22 
23         mBelowWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
24         mBelowWavePaint.setAntiAlias(true);
25         mBelowWavePaint.setStyle(Paint.Style.FILL);
26         mBelowWavePaint.setColor(Color.WHITE);
27         mBelowWavePaint.setAlpha(80);
28         //画布抗锯齿
29         mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
30     }
31 
32     @Override
33     protected void onDraw(Canvas canvas) {
34 
35         canvas.setDrawFilter(mDrawFilter);
36 
37         mAbovePath.reset();
38         mBelowWavePath.reset();
39 
40         φ-=0.1f;
41 
42         float y,y2;
43 
44         double ω = 2*Math.PI / getWidth();
45 
46         mAbovePath.moveTo(getLeft(),getBottom());
47         mBelowWavePath.moveTo(getLeft(),getBottom());
48         for (float x = 0; x <= getWidth(); x += 20) {
49             /**
50              *  y=Asin(ωx+φ)+k
51              *  A—振幅越大,波形在y轴上最大与最小值的差值越大
52              *  ω—角速度, 控制正弦周期(单位角度内震动的次数)
53              *  φ—初相,反映在坐标系上则为图像的左右移动。这里通过不断改变φ,达到波浪移动效果
54              *  k—偏距,反映在坐标系上则为图像的上移或下移。
55              */
56             y = (float) (8 * Math.cos(ω * x + φ) +8);
57             y2 = (float) (8 * Math.sin(ω * x + φ));
58             mAbovePath.lineTo(x, y);
59             mBelowWavePath.lineTo(x, y2);
60             //回调 把y坐标的值传出去(在activity里面接收让小机器人随波浪一起摇摆)
61             mWaveAnimationListener.OnWaveAnimation(y);
62         }
63         mAbovePath.lineTo(getRight(),getBottom());
64         mBelowWavePath.lineTo(getRight(),getBottom());
65 
66         canvas.drawPath(mAbovePath,mAboveWavePaint);
67         canvas.drawPath(mBelowWavePath,mBelowWavePaint);
68 
69         postInvalidateDelayed(20);
70 
71     }
72 
73     public void setOnWaveAnimationListener(OnWaveAnimationListener l){
74         this.mWaveAnimationListener = l;
75     }
76 
77     public interface OnWaveAnimationListener{
78         void OnWaveAnimation(float y);
79     }
80 
81 }

布局文件(activity_wave.xml)

 

 1 
 2  3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#ffffff"
 6     android:orientation="vertical">
 7 
 8     <FrameLayout
 9         android:layout_width="match_parent"
10         android:layout_height="200dp"
11         android:background="#FF3366">
12 
13         <me.happy.demo.view.wave.WaveView3
14             android:id="@+id/wave_view"
15             android:layout_width="match_parent"
16             android:layout_height="15dp"
17             android:layout_gravity="bottom" />
18 
19         <ImageView
20             android:id="@+id/image"
21             android:layout_width="wrap_content"
22             android:layout_height="wrap_content"
23             android:layout_gravity="bottom|center"
24             android:background="@mipmap/ic_launcher" />
25 
26     
27 
28     <LinearLayout
29         android:layout_width="match_parent"
30         android:layout_height="match_parent"
31         android:gravity="center"
32         android:orientation="vertical">
33 
34         <TextView
35             android:layout_width="wrap_content"
36             android:layout_height="wrap_content"
37             android:text="其他内容"
38             android:textSize="24sp" />
39 
40     
41 
42 

 

WaveActivity

 

 1 public class WaveActivity extends AppCompatActivity {
 2 
 3     private ImageView imageView;
 4     private WaveView3 waveView3;
 5 
 6     @Override
 7     protected void onCreate(Bundle savedInstanceState) {
 8         super.onCreate(savedInstanceState);
 9         setContentView(R.layout.activity_wave);
10         imageView = (ImageView) findViewById(R.id.image);
11         waveView3 = (WaveView3) findViewById(R.id.wave_view);
12 
13         final FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(-2,-2);
14         lp.gravity = Gravity.BOTTOM|Gravity.CENTER;
15         waveView3.setOnWaveAnimationListener(new WaveView3.OnWaveAnimationListener() {
16             @Override
17             public void OnWaveAnimation(float y) {
18                 lp.setMargins(0,0,0,(int)y+2);
19                 imageView.setLayoutParams(lp);
20             }
21         });
22     }
23 }

 

github

https://github.com/1139618418/WaveView

还有很多可以改进的地方 欢迎大家指正和完善 关注下博客 分类合集持续更新^_^