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" format="color" />
    <!-- 填充模式 -->
    <attr name="fill_mode">
        <!-- 填充顶部,使顶部是直线,底部是波浪线 -->
        <enum name="top" value="1" />
        <!-- 填充底部,使底部是直线,顶部是波浪线 -->
        <enum name="bottom" value="2" />
    </attr>
    <!-- 波浪变化速率,<0 向右的小伙,>0 向左的效果-->
    <attr name="speed" format="integer" />
    <!-- 水波浪初始状态相位角  -->
    <attr name="phi" format="integer" />
    <!-- 水波浪角频率,默认值 1,显示一个三角函数周期  -->
    <attr name="omega" format="float"/>
</declare-styleable>

代码

不喜欢看又臭又长的代码请跳过,后面有分析。(平生最恨只贴代码不分析的博主)

public class WaveView extends View {
    private static final String TAG = "WaveView";
    private int width = 0;
    private int height = 0;
    private Path shapePath;
    private int step = 20;
    private Paint fillPaint;

    private double omega;
    private double phi;
    private int delta = -2;//每次位移角度,大于0向左,小于0 向右
    private boolean fillTop = true;
    private int waveColor;

    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.wave);
        initParams(context, typedArray);
        typedArray.recycle();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.wave);
        initParams(context, typedArray);
        typedArray.recycle();
    }


    private void initParams(Context context, TypedArray typedArray) {

        waveColor = typedArray.getColor(R.styleable.wave_color, Color.parseColor("#3958AA"));
        fillTop = typedArray.getInt(R.styleable.wave_fill_mode, 1) == 1;// 默认绘制上层
        delta = typedArray.getInt(R.styleable.wave_speed, -2); //默认向右移动
        omega = typedArray.getFloat(R.styleable.wave_omega, 3 * 1.0f / 4);// 角频率
        phi = typedArray.getInt(R.styleable.wave_phi, 0) * Math.PI / 180 + Math.PI / 2 * -1;// 初始相位角
        fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        fillPaint.setStrokeWidth(1);
        fillPaint.setStyle(Paint.Style.FILL);
        fillPaint.setColor(waveColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        shapePath = new Path();
        if (fillTop)
            shapePath.moveTo(0, 0);
        else
            shapePath.moveTo(0, height + 1);
        for (int x = 0; x <= width; x += step) {
            double angle = x * 1.0f / width * 2 * Math.PI;// 弧度
            double y = height / 2 * Math.sin(angle * omega + phi);
            shapePath.lineTo(x, (float) y + height / 2);
        }

        if (fillTop) {
            shapePath.lineTo(width, 0);
        } else {
            shapePath.lineTo(width, height + 1);
        }
        canvas.drawPath(shapePath, fillPaint);

        postInvalidateDelayed(25); // 每秒刷新40次
        addPhi();
    }

    /**
     * 增加相位角
     */
    private void addPhi() {
        phi += delta * Math.PI / 180;

        if (phi > Math.PI * 2)
            phi -= Math.PI * 2;
        else if (phi < Math.PI * -2)
            phi += Math.PI * 2;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 组件测量
         * 布局里指定的size使用布局的size
         * 属性里指定的size使用属性的size
         * 都没有指定,使用默认size
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = 0;
        if (widthMode == MeasureSpec.EXACTLY) {
            widthSize = MeasureSpec.getSize(widthMeasureSpec);
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            widthSize = width;
        }
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = 0;
        if (heightMode == MeasureSpec.EXACTLY) {
            heightSize = MeasureSpec.getSize(heightMeasureSpec);
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            heightSize = height;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

不到120行的代码,看起来是不是很简单的样子。

到这里,需要的小伙伴们,就可以很方便的拿去集成了,一个组件类,一个自定义属性文件和一个布局的使用示例,足以。

下面主要讲解三个模块:初始化参数,测量高度,绘制并刷新波浪。

初始化参数

    private void initParams(Context context, TypedArray typedArray) {
        // 获取自定义属性值
        waveColor = typedArray.getColor(R.styleable.wave_color, Color.parseColor("#3958AA"));
        fillTop = typedArray.getInt(R.styleable.wave_fill_mode, 1) == 1;// 默认绘制上层
        delta = typedArray.getInt(R.styleable.wave_speed, -2); //默认向右移动
        omega = typedArray.getFloat(R.styleable.wave_omega, 3 * 1.0f / 4);// 角频率
        phi = typedArray.getInt(R.styleable.wave_phi, 0) * Math.PI / 180 + Math.PI / 2 * -1;// 初始相位角
        // 初始化画笔参数
        fillPaint = new Paint(Paint.ANTI_ALIAS_FLAG); // 设置抗锯齿
        fillPaint.setStrokeWidth(1); // 设置边线宽度
        fillPaint.setStyle(Paint.Style.FILL); // 这是画笔的填充模式,不同于之前的fill_mode属性
        fillPaint.setColor(waveColor); // 设置画笔颜色
    }

测量高度

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 组件测量
         * 布局里指定的size使用布局的size
         * 属性里指定的size使用属性的size,此处位置线,可以添加自定义属性操作
         * 都没有指定,使用默认size
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = 0;
        if (widthMode == MeasureSpec.EXACTLY) {
            widthSize = MeasureSpec.getSize(widthMeasureSpec);
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            widthSize = width;
        }
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = 0;
        if (heightMode == MeasureSpec.EXACTLY) {
            heightSize = MeasureSpec.getSize(heightMeasureSpec);
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            heightSize = height;
        }
        setMeasuredDimension(widthSize, heightSize);
    }

绘制并刷新波浪

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        shapePath = new Path();
        /**
         * 设置路径起点
         */
        if (fillTop)
            shapePath.moveTo(0, 0);
        else
            shapePath.moveTo(0, height + 1); // 加一为了防止和底部矩形拼接时有1px的空隙。
        for (int x = 0; x <= width; x += step) {
            double angle = x * 1.0f / width * 2 * Math.PI;// 对应的横坐标转成弧度,弧度区间0~2π
            double y = height / 2 * Math.sin(angle * omega + phi); // 计算出纵坐标
            shapePath.lineTo(x, (float) y + height / 2);
        }
         /**
         * 设置路径终点
         */
        if (fillTop) {
            shapePath.lineTo(width, 0);
        } else {
            shapePath.lineTo(width, height + 1); // 加一为了防止和底部矩形拼接时有1px的空隙。
        }
        canvas.drawPath(shapePath, fillPaint); // 绘制并填充波浪图形路径。
        postInvalidateDelayed(25); // 每秒刷新40次
        addPhi(); // 相位角值+1,实现波浪移动效果
    }

由于,Math.sin采用弧度计算的方式,为方便开发者使用,关于sin函数参数的变量,一律使用角度制,因此存在一些难以明白的转换。

叠加使用

样图中,使用叠加的方式,同时显示两条不一样的波浪。
需要注意修改omegaphispeed值和正确计算透明度叠加效果。

色值:993958AA+AA3958AA = DD3958AA

这是ARGB四通道的色值叠加计算,由于RGB色值一致,此处只讨论Alpha通道(透明度)的叠加计算。

记:
透明度 A = 0x99/xFF ≈ 0.60,透明度 B = 0xAA/0xFF ≈ = 0.66;
透明度 C = A+B-AxB = 0.864 x 0xFF ≈ 0xDD;

猜你喜欢

转载自blog.csdn.net/flueky/article/details/81046301

相关文章