Android实现水波浪效果

前言

讲真，这不算一个新的课题。早在几个月之前就已经有大神开源了水波浪效果的代码。由于工作关系，一直未能拜读。直至近期公司项目有需要，才决定去接触下该效果。

同时申明一下，在能力范围之内，楼主愿意不惜一切时间代价去造轮子，因为出现bug时，改自己熟悉的代码会很省事。同时也是对技能的巩固和提升。

目前，已经发表的博文中，实现水波纹的效果大致分为两类：
1. 使用贝塞尔曲线。
2. 使用三角函数曲线。

在物理学中，通常使用三角函数表达式从数学的角度描述波的特征，如：机械波、声波等。因此楼主即使用三角函数实现水波纹效果。

机械波表达式：Y＝A*sin(ωt+Φ)

效果图

二话不说，先上图，觉得效果好再往下看。

这是一种组合的实现方式：两个水波浪组件叠加，再在水波浪组件上面或下面添加一个矩形的蓝色块。采用组合方式，主要使组件具有更高的扩展性。

布局如下：

    <!-- 矩形方块 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_100_h"
        android:background="#DD3958AA" />

    <!-- 水波浪组件叠加 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.flueky.frame.widget.WaveView
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_50_h"
            app:color="#993958AA"
            app:fill_mode="top"
            app:omega="1.2"
            app:phi="1"
            app:speed="-5" />

        <com.flueky.frame.widget.WaveView
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_50_h"
            app:color="#AA3958AA"
            app:fill_mode="top"
            app:phi="100"
            app:speed="-5" />
    </RelativeLayout>

原理

分析机械波公式，有三个常量参数：A、ω和Φ。

1. A 对应组件高度的一半。
2. ω 对应自定义属性 omega。
3. Φ 对应自定义属性 phi。

通过 ω和Φ 决定波浪的初始状态，使用speed属性决定波浪变化速率。

实现

自定义属性

<declare-styleable name="wave">
    <!-- 波浪颜色 -->
    <attr name="color"