前言
苦逼的加班啊 一如既往的点开百度外卖 突然发现有个有趣的界面效果
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 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 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 </FrameLayout> 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 </LinearLayout> 41 42 </LinearLayout>
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
还有很多可以改进的地方 欢迎大家指正和完善 关注下博客 分类合集持续更新^_^