仿百度外卖的酷炫水波纹效果及解析

前言：在网上经常会看到别人写的一些开源项目，然后会惊叹于他们的写的效果，当然那些大神也会把代码放出来，然后供大家看，但是因为他们是自己写的，所以有些地方就是单纯的贴了代码，让大家自己去看。介于我前面动画方面比较薄弱，所以有些地方就要一边跟着敲代码，一边去网上查相关知识。所以就借这次机会。我来写下我最近学的动画效果及相关的知识。

---------------------------------------我是前言分割君-------------------------------------------

感谢CSDN的Zcoder2013,最后附上文字链接。

--------------------------------正文君打工的温州皮革厂倒闭了-------------------------------

仿百度外卖个人中心效果

仿百度外卖的个人中心

强烈建议看下自定义View的整个教程
从零起步，从入门到懵逼的自定义 View 教程
从零起步，从入门到懵逼的自定义 View 教程
从零起步，从入门到懵逼的自定义 View 教程
（重要的事情说三遍）（重要的事情说三遍）（重要的事情说三遍）

-----------------------------------分析君带着小姨子逃跑了-------------------------

我们先来看下这个自定义的View的代码是如何实现的。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DrawFilter;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;



public class WaveView extends View{

    private Path mAbovePath,mBelowWavePath;
    private Paint mAboveWavePaint,mBelowWavePaint;
    private DrawFilter mDrawFilter;
    private float φ;
    private OnWaveAnimationListener mWaveAnimationListener;

    public WaveView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //初始化路径
        mAbovePath = new Path();
        mBelowWavePath = new Path();

        //初始化画笔
        mAboveWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mAboveWavePaint.setAntiAlias(true);
        mAboveWavePaint.setStyle(Paint.Style.FILL);
        mAboveWavePaint.setColor(Color.WHITE);

        mBelowWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBelowWavePaint.setAntiAlias(true);
        mBelowWavePaint.setStyle(Paint.Style.FILL);
        mBelowWavePaint.setColor(Color.WHITE);
        mBelowWavePaint.setAlpha(80);

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

    @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);
    }

    public void setOnWaveAnimationListener(OnWaveAnimationListener l){
        this.mWaveAnimationListener = l;
    }

    public interface OnWaveAnimationListener{
        void OnWaveAnimation(float y);
    }
}

我们一步步来分析。首先我们要自定义一个View。

sin函数及cos函数

哈哈。没错。那二个上下浮动的曲线。我们可以用同时画二个线，一个sin函数，一个cos函数。而且处于同一水平线。不就一个交错的波浪了。

类似这样的效果

好，第一步的大概思路咱们有了。咱们再思考如何画这些线呢。
这里先介绍几个基本知识点：

• 了解Path:
  不清楚这个Path的一定要一定要一定要看下面这个Path基础链接
  Path之基本操作

官方介绍：
The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves. It can be drawn with canvas.drawPath(path, paint), either filled or stroked (based on the paint's Style), or it can be used for clipping or to draw text on a path.
嗯，没错依旧是拿来装逼的，如果你看不懂的话，不用担心，其实并没有什么卵用。

通俗解释：
Path封装了由直线和曲线(二次，三次贝塞尔曲线)构成的几何路径。你能用Canvas中的drawPath来把这条路径画出来(同样支持Paint的不同绘制模式)，也可以用于剪裁画布和根据路径绘制文字。我们有时会用Path来描述一个图像的轮廓，所以也会称为轮廓线(轮廓线仅是Path的一种使用方法，两者并不等价)

我就列举出我们这次的仿百度效果会使用的几个方法:

作用	相关方法	备注
移动起点	moveTo	移动下一次操作的起点位置
连接直线	lineTo	添加上一个点到当前点之间的直线到Path
重置路径	reset, rewind	清除Path中的内容reset不保留内部数据结构，但会保留FillType.****rewind会保留内部的数据结构，但不保留FillType

没错。为啥我列举了这几个方法呢。有人要问，lineTo不是画直线的么。其实这个sin和cos曲线就是被我们一小段一小段的用线段画出来的。

哈哈，纯手工画的

      /**
         *  y=Asin(ωx+φ)+k
         *  A—振幅越大，波形在y轴上最大与最小值的差值越大
         *  ω—角速度， 控制正弦周期(单位角度内震动的次数)
         *  φ—初相，反映在坐标系上则为图像的左右移动。这里通过不断改变φ,达到波浪移动效果
         *  k—偏距，反映在坐标系上则为图像的上移或下移。
         */

比如画上述这个sin函数。我们画好后。怎么让他不停的往左移动，产生波浪的效果呢。这时候就会想到重新绘制，然后再画一遍，但是这时候不能原来这个sin函数。sin里面的φ参数要变一下，这样再次重绘的时候。新画出来的sin线就是一个被左右方向移动后的线了。给你的感觉不就是像波浪一样往右边移动了！！！！

所以我们就知道了：（以sin为例）

1. 画出用lineTo在X轴上画出一段段小的线段，拼成一个sin曲线图
2. 画完这个曲线后重新执行绘图，这时候的改变sin函数内部参数，画出来的曲线已经在上一次的曲线的基础上被左右移动过了。

---

这下了解了这些。我们再仔细的分析下onDraw方法的代码：

 @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);
    }

第一步：我们可以看到它是先通过for循环

for (float x = 0; x <= getWidth(); x += 20) {
          
}

把这个绘画的曲线在X轴上分割成为一段段。每一段再用线段画出来就可以了。

又是丑丑的手工画图

而每一段的画又是要按照sin或者cos的函数来画。并且是通过lineTo方法来。所以最后合在一起就是：

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);
        }

这时候如果我们canvas.drawPath方法来画出我们上面的这个处理过的path。就可以画出来相应的sin或者cos线了。

第二步：重新绘制曲线
在onDraw()方法的结尾处加上:
postInvalidateDelayed(20);
这个方法会再20毫秒后会重新调用onDraw()方法。
然后再onDraw()方法的开始部分。我们要把path重新置空:
mAbovePath.reset(); mBelowWavePath.reset();
然后改变Asin(ωx+φ)+k的（φ—初相）这个值:
φ-=0.1f;
从而再一次画出来的曲线就已经左右被移动过了。让你产生波浪的感觉。

---

好的，我们已经学完了那二个波浪的成（zhuang）功（B）实现了。如何来实现那个头像跟随着曲线一起动呢。其实很简单。刚才我们能画出曲线。是通过Path 的lineTo方法不断的传入相应的（x,y）坐标，从而画出一个个线段，从而拼成了曲线，那就是我们能拿到每个线段的Y轴坐标上的值。也就是：

y = (float) (8 * Math.cos(ω * x + φ) +8);
y2 = (float) (8 * Math.sin(ω * x + φ));

那我们只要：

1. 拿到图片对象：
   imageView = (ImageView) findViewById(R.id.image);
2. 把上面的曲线的y或者y1值拿过来，比如我拿的是y。
3. 让imageView与它的父View之间的margin中的bottom属性值等于这个y的值就可以了(demo里面是y+2)。这样就不停的上下的浮动了。

lp.setMargins(0,0,0,(int)y+2); 
imageView.setLayoutParams(lp);

附上Activity及layout的代码：

Activity：

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.widget.FrameLayout;
import android.widget.ImageView;

import yunyuan.androiddemo.R;

/**
 * Created by willy on 16/12/12.
 */

public class WaveActivity extends AppCompatActivity {

    private ImageView imageView;
    private WaveView waveView3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_waveview);
        imageView = (ImageView) findViewById(R.id.image);
        waveView3 = (WaveView) findViewById(R.id.wave_view);

        final FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(-2,-2);
        lp.gravity = Gravity.BOTTOM|Gravity.CENTER;
        waveView3.setOnWaveAnimationListener(new WaveView.OnWaveAnimationListener() {
            @Override
            public void OnWaveAnimation(float y) {
                lp.setMargins(0,0,0,(int)y+2);
                imageView.setLayoutParams(lp);
            }
        });
    }
}

layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@android:color/holo_red_dark"
        >

        <yunyuan.androiddemo.waveview.WaveView
            android:id="@+id/wave_view"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_gravity="bottom" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:background="@mipmap/ic_launcher" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="其他内容"
            android:textSize="24sp" />

    </LinearLayout>

</LinearLayout>

最后咱们做出来的效果图就是这样滴：

最后再次感谢大神感谢CSDN的Zcoder2013
文章链接：http://blog.csdn.net/u011507982/article/details/53414422