套路一：

1. 无图无真相

2. 这里要感谢两位大神的博客 参照很多

Android仿百度贴吧客户端Loading小球
仿百度外卖的酷炫水波纹效果及解析

3. 下面的4个小球完全参照 Android仿百度贴吧客户端Loading小球 实现 有意向的同学可以点击过去看看

#######套路二：

1. 分析

顶部有水波纹不断的浮动
头像跟着水波纹的浮动而浮动

2. 解决

• 先到网上百度一番 结果还真有: 仿百度外卖的酷炫水波纹效果及解析

于是马上看源码

@Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);

       canvas.setDrawFilter(mDrawFilter);

       mAbovePath.reset();
       mBelowWavePath.reset();

       φ-=0.1f;
       float y,y2;
       double ω = 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) (8 * Math.cos(ω * x + φ) +8);
           y2 = (float) (8 * Math.sin(ω * x + φ));
           mAbovePath.lineTo(x, y);
           mBelowWavePath.lineTo(x, y2);
           //回调 把y坐标的值传出去(在activity里面接收让小机器人随波浪一起摇摆)
           mWaveAnimationListener.OnWaveAnimation(y);
       }


       mAbovePath.lineTo(getRight(),getBottom());
       mBelowWavePath.lineTo(getRight(),getBottom());

       canvas.drawPath(mAbovePath,mAboveWavePaint);
       canvas.drawPath(mBelowWavePath,mBelowWavePaint);

       postInvalidateDelayed(20);
   }

What？ω φ 这些是什么意思啊 奈何这个大神内功太深厚 这一招一式打出来实在是参悟不透啊 估计再看下去会走火入魔,赶紧离开。
但是心有不甘,于是静坐冥想1小时。。。。

1.水波纹 不就是贝塞尔曲线嘛 用path.quadTo()能解决 再借鉴下Android仿百度贴吧客户端Loading小球中的周期函数思想 让水波纹不断的浮动起来

2.图片随水波纹的浮动而浮动 图片在x轴是固定不变得 只是在y轴有上下的波动 只要能获取贝塞尔曲线中 path经过与图片x轴重合的y轴的坐标点就ok 刚好Android中有PathMeasure类结合Path 可以做到

想好这些 就开始撸码

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Path fulPath = getActionFulPath(currentPercent);
        canvas.drawPath(fulPath,fulPaint);

        Path idmPath=getActionDimPath(currentPercent);
        canvas.drawPath(idmPath,dimPaint);
    }

 private Path getActionDimPath(float percent) {
        int quadWidth = width / 4;
        int quadHeight = height/3;

        Path path=new Path();
        int x=-width;
        x+=percent*width;
        path.moveTo(x,height/2);
        //第一段
        path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
        path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
        //第二段
        path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
        path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
        //闭合
        path.lineTo(x+width*2,height);
        path.lineTo(x,height);
        path.close();
        
        //关联一个path
        measure.setPath(path,true);
        //获取path到view中心的长度
        float length = Math.abs(x)+ (width / 2);
        //获取该path该位置时的坐标值
        measure.getPosTan(length,pos,null);
       //将y坐标的值通过接口传递出去
       onWaveAnimationListener.onWaveAnimation(pos[1]+currentPercent);
       return path;
    }

注意这里是使用的path.rQuadTo() 是相对上次结束坐标来进行二次贝塞尔曲线的 不是相对于原点

上面的path差不多是这样的(ps:实在不会用AI绘图 若侵权了立马删除)

声明传递数据的接口

public void setOnWaveAnimationListener(OnWaveAnimationListener listener){
        onWaveAnimationListener =listener;
    }
//接口
public  interface OnWaveAnimationListener{
    void  onWaveAnimation(float y);
    }

仔细看效果图 有2个贝塞尔曲线 所以这个贝塞尔曲线与上面那个是相反的

 public Path getActionFulPath(float percent) {
        int quadWidth = width / 4;
        int quadHeight = height/3;

        Path path=new Path();
        int x=-width;
        x+=percent*width;
        path.moveTo(x,height/2);


        path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
        path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);

        path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
        path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);

        path.lineTo(x+width*2,height);
        path.lineTo(x,height);
        path.close();
        return path;
    }

在初始化的时候 启动属性动画 让水波纹浮动起来

    private void init() {
        fulPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        fulPaint.setColor(Color.parseColor("#fafafa"));
        fulPaint.setStyle(Paint.Style.FILL);

        dimPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        dimPaint.setColor(Color.parseColor("#fafafa"));
        dimPaint.setAlpha(80);
        dimPaint.setStyle(Paint.Style.FILL);

        //画布抗锯齿
        //mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        measure = new PathMeasure();

        ValueAnimator animator=ValueAnimator.ofFloat(0,1);
        animator.setDuration(3000);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
            //不断改变currentPercent的值 让水波纹不断的浮动起来
        currentPercent=animation.getAnimatedFraction();
                invalidate();
            }
        });
        animator.start();
    }

最后布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.sharemodule.LoadingActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#29a3fe">

        <com.example.sharemodule.widget.BaiduTopView
            android:id="@+id/waveView"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_gravity="bottom" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:text="百度外卖"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="bottom|center_horizontal"
            android:scaleType="centerCrop" />
    </FrameLayout>

Activity中实现

public class LoadingActivity extends AppCompatActivity {
    private static final  String TAG= LoadingView.class.getSimpleName();
    @BindView(R.id.image)
    ImageView imageView;
    @BindView(R.id.waveView)
    BaiduTopView waveView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_loading);
        ButterKnife.bind(this);
        Glide.with(this).load(R.drawable.head_gif).asGif().into(imageView);
    }
    @Override
    protected void onResume() {
        super.onResume();
        final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) imageView.getLayoutParams();
        waveView.setOnWaveAnimationListener(new BaiduTopView.OnWaveAnimationListener() {
            @Override
            public void onWaveAnimation(float y) {
                Log.e(TAG,"坐标："+y);
                layoutParams.bottomMargin= (int)y;
                imageView.setLayoutParams(layoutParams);
            }
        });
    }
}

哎 先去找AI画图教程学习下 不然还有诸多不方便 如果有什么疑问的地方请随时留言。