炫酷Android 波浪式扭曲侧边栏，窗帘(Curtain Menu)效果

Posted 2021-04-27 Android技术杂货铺

干货文章，第一时间送达！

写这篇文章的初衷是因为早些时候看到一款morning routine上的窗帘皱褶效果，自己也想去实现它，网上也有一些案例但是效果不太好而且没有任何的注释改动难度比较，因此想自己的想法去实现这个效果。如下图就是我们最终想模仿实现的效果：

在开始写代码之前，我们得先了解一些两个重要的知识点：

1.Canvas方法drawBitmapMesh的使用：

Canvas提供了一个方法

drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors,int colorffset,Paint paint)

这个方法可以对bitmap进行扭曲，参数说明如下:

• bitmap　　　　　需要扭曲的源位图

• meshWidth 　　控制在横向上把该源位图划成成多少格

• meshHeight　　控制在纵向上把该源位图划成成多少格

• verts　　　　　长度为(meshWidth + 1) * (meshHeight + 1) * 2的数组，它记录了扭曲后的位图各顶点位置

• vertOffset 控制verts数组中从第几个数组元素开始才对bitmap进行扭曲

2.正弦曲线,公式：y=Asin(ωx+φ)+k

正弦曲线可表示为y=Asin(ωx+φ)+k，定义为函数y=Asin(ωx+φ)+k在直角坐标系上的图象，其中sin为正弦符号，x是直角坐标系x轴上的数值，y是在同一直角坐标系上函数对应的y值，k、ω和φ是常数（k、ω、φ∈R且ω≠0）

• A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。

• (ωx+φ)——相位，反映变量y所处的状态。

• φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。

• k——偏距，反映在坐标系上则为图像的上移或下移。

• ω——角速度， 控制正弦周期(单位弧度内震动的次数)。

在已经大概了解了drawBitmapMesh的使用和正弦曲线的定义后，我们往下就是要去了解两者之间如何配合使用去扭曲图片实现波浪褶皱效果。相对一张(w * h)像素的图片来说，这张图片是由h条长度为W像素的水平直线紧凑排列而成，实现如下左图的波浪褶皱效果跟右图把红色直线通过正弦曲线公式扭曲成正弦曲线的原理是一样的。

左图的实现代码如下：

public class CurtainView extends View {
    private Bitmap mbitmap;
    private static int WIDTH = 30;
    private static int HEIGHT = 30;
    //最大水平的波形高度
    private float WAVE_HEIGHT = 50;

    //小格相交的总的点数
    private int COUNT = (WIDTH + 1) * (HEIGHT + 1);
    private float[] verts = new float[COUNT * 2];
    private float[] origs = new float[COUNT * 2];

    private float k;

    private float progress;


    public CurtainView(Context context) {
        super(context);
        init();
    }

    public CurtainView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CurtainView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

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

        for (int i = 0; i < HEIGHT + 1; i++) {
            for (int j = 0; j < WIDTH + 1; j++) {
                //把每一个水平像素通过正弦公式转换成正弦曲线
                //WAVE_HEIGHT表示波峰跟波低的垂直距离，皱褶后会向上超过水平线，所以往下偏移WAVE_HEIGHT / 2
                //5表示波浪的密集度，表示波峰波谷总共有五个,对应上面左图的1,2,3,4,5
                //j就是水平像的X轴坐标
                //K决定正弦曲线起始点(x=0)点的Y坐标，k=0就是从波峰波谷的中间开始左->右绘制曲线
                float yOffset = WAVE_HEIGHT / 2  + WAVE_HEIGHT / 2 * (float) Math.sin((float) j / WIDTH * 5 * Math.PI + k);
                verts[(i * (WIDTH + 1) + j) * 2 + 1] = origs[(i * (WIDTH + 1) + j) * 2 + 1] + yOffset;//
            }
        }

        canvas.drawBitmapMesh(mbitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);
    }

    int bitmapwidth;
    int bitmapheight;

    public void init() {
        mbitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.timg);
        bitmapwidth = mbitmap.getWidth();
        bitmapheight = mbitmap.getHeight();

        COUNT = (WIDTH + 1) * (HEIGHT + 1);
        verts = new float[COUNT * 2];
        origs = new float[COUNT * 2];

        int index = 0;
        for (int i = 0; i < HEIGHT + 1; i++) {
            float fy = bitmapheight / (float) HEIGHT * i;
            for (int j = 0; j < WIDTH + 1; j++) {
                float fx = bitmapwidth / (float) WIDTH * j;
                //偶数位记录x坐标  奇数位记录Y坐标
                origs[index * 2 + 0] = verts[index * 2 + 0] = fx;
                origs[index * 2 + 1] = verts[index * 2 + 1] = fy;
                index++;
            }
        }
    }
}

关键代码：

//把每一个水平像素直线通过正弦公式转换成正弦曲线
//WAVE_HEIGHT表示波峰跟波谷的垂直距离，皱褶后会向上超过水平线，所以往下偏移WAVE_HEIGHT / 2
//5表示波浪的密集度，表示波峰波谷总共有五个,对应上面左图的1,2,3,4,5
//j就是水平像的X轴坐标
//K决定正弦曲线起始点(x=0)点的Y坐标，k=0就是从波峰波谷的中间开始左->右绘制曲线，像右图一样

float yOffset = WAVE_HEIGHT / 2  + WAVE_HEIGHT / 2 * (float) Math.sin((float) j / WIDTH * 5 * Math.PI + k);

3 . 动态调整系数，改变波浪图片的皱褶成度

上一节已经实现了如何把一张图片扭曲成波浪效果，那么这一节我们介绍如何动态调整系数，去改变波浪图片的皱褶成度。我们自一次观察下图morning routine的效果：

仔细观察我们发现，当往右滑动时，头部的沟壑(也就是正弦曲线)是从0递增到最大的；如果具体到一条水平像素直线的话，这其实就是一条直线扭曲成正弦曲线的一个过程。直线如何扭曲成正弦曲线、正弦曲线如何恢复成直线其实就是系数WAVE_HEIGHT(波峰波谷距离)从0MAX_WAVE_HEIGHT、MAX_WAVE_HEIGHT0的动态变化过程，因此我们只要在前一篇文章正弦曲线的公式代码加入滑动的滑动百分比progress(1>=progress>=0)就可以了：

float yOffset = WAVE_HEIGHT / 2 * progress + WAVE_HEIGHT / 2 * progress * (float) Math.sin((float) j / WIDTH * 5 * Math.PI + k);

上面已经介绍了动态滑动扭曲时如何计算每条水平直线上每个像素的y轴偏移量，但是根据上图效果其实每个像素的x坐标也是变化的；折叠菜单的最左边的像素点x坐标等于菜单向左滑动的距离，折叠菜单的最右边的像素点x坐标紧紧的挤压边缘不移动，所以当滑动时每个像素的x坐标是偏移量是从左往右衰减成0的，由此我们可以推导出滑动时计算的每个像素x坐标的公式：

//bitmapwidth 原图宽度//origsX 原图时像素的X坐标//progress当前滑动百分比//xPostion 像素的新x坐标//这个公式计算出的xPostion 越往右跟origsX 的差距越小，最后一像素差距为0
float xPostion = origsX + (bitmapwidth - origsX ) * progress;

原理我们已经理解的差不多了，那么最终的效果如下图：

4 . 波浪式扭曲效果优化

4 . 1.竖直方向像素优化

前面我们已经实现图片的扭曲效果，但是只是仅仅扭曲了水平直线上的像素，这些扭曲后的像素在竖直方向还是处于一条直线中一次，图片的垂直边是竖直的看着很不自然。下面第一步我们要做的优化就是把这些竖直线上的像素y坐标代入正弦公式得到Y轴上优化过后的x坐标，那么整个扭曲图片看起来就更自然了。前面我们已经详细介绍了水平方向像素的扭曲原理，竖直方向上的扭曲我们就直接上核心代码吧，核心代码如下：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < HEIGHT + 1; i++) {
            for (int j = 0; j < WIDTH + 1; j++) {

                //把每一个水平像素通过正弦公式转换成正弦曲线
                //H_MAX_WAVE_HEIGHT表示波峰跟波低的垂直距离，皱褶后会王桑超过水平线，所以往下偏移WAVE_HEIGHT / 2
                //5表示波浪的密集度，表示波峰波谷总共有五个,对应上面左图的1,2,3,4,5
                //j就是水平像的X轴坐标
                //K决定正弦曲线起始点(x=0)点的Y坐标，k=0就是从波峰波谷的中间开始左->右绘制曲线
                float yOffset = H_MAX_WAVE_HEIGHT / 2 * progress + H_MAX_WAVE_HEIGHT / 2 * progress * (float) Math.sin((float)j/WIDTH*5*Math.PI+k);

                //垂直方向竖直压缩时的坐标
                float xPostion = origs[(i*(WIDTH+1)+j)*2+0] + (bitmapwidth - origs[(i*(WIDTH+1)+j)*2+0]) * progress;
                //垂直方向正弦曲线优化后的坐标,1.1->个波峰波谷
                float vXSinPostion = V_MAX_WAVE_HEIGHT / 2 * progress * (float) Math.sin((float)i/WIDTH*1.1*Math.PI + k);
                //每个像素扭曲后的x坐标
                //origs[(i*(WIDTH+1)+j)*2+0] 原图x坐标
                verts[(i*(WIDTH+1)+j)*2+0]= vXSinPostion *((bitmapwidth - xPostion) / bitmapwidth) + xPostion;
                //每个像素扭曲后的Y坐标
                //origs[(i*(WIDTH+1)+j)*2+1] 原图y坐标
                verts[(i * (WIDTH + 1) + j) * 2 + 1] = origs[(i * (WIDTH + 1) + j) * 2 + 1] + yOffset;//
            }
        }
        canvas.drawBitmapMesh(mbitmap, WIDTH, HEIGHT, verts, 0, null, 0, null);
    }

上面的代码主要是在x轴像素正弦曲线扭曲的同时对竖直y轴像素做1.1个波峰、波谷的扭曲；扭曲后的x轴坐标也要依据偏移量由左往右衰减的的特性来计算

水平方向和竖直方向扭曲效果图如下：

4.2.阴影效果优化

上图的效果已经非常的接近我们想要的效果了，但是还要给皱褶后的每个沟壑添加阴影效果才更美观，这里我们用drawBitmapMesh的colors参数为每个扭曲后的像素绘制阴影颜色（仅支持api level >= 18）。直接上代码吧:

//yOffset 表示每个像素y轴的偏移量，yOffset越大表示越接近谷底阴影效果越
int channel = 255 - (int)(yOffset * 3);channel = channel < 0 ? 0 : channel;channel = channel > 255 ? 255 : channel;colors[index] = 0xFF000000 | channel << 16 | channel << 8 | channel;index += 1;

效果如下：

完整代码：

public class CurtainView extends View {
    private Bitmap mbitmap;
    private static int WIDTH = 30;
    private static int HEIGHT = 30;
    //最大水平的波形高度
    private float H_MAX_WAVE_HEIGHT = 50;
    //最大垂直的波形高度
    private float V_MAX_WAVE_HEIGHT = 500;

    //小格相交的总的点数
    private int COUNT = (WIDTH + 1) * (HEIGHT + 1);
    private float[] verts = new float[COUNT * 2];
    private float[] origs = new float[COUNT * 2];
    private int[] colors = new int[COUNT * 2];
    private float k;
    private float progress;

    public CurtainView(Context context) {
        super(context);
        init();
    }

    public CurtainView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CurtainView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void setProgress(float progress){
        this.progress = progress;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int index = 0;
        for (int i = 0; i < HEIGHT + 1; i++) {
            for (int j = 0; j < WIDTH + 1; j++) {

                //把每一个水平像素通过正弦公式转换成正弦曲线
                //H_MAX_WAVE_HEIGHT表示波峰跟波低的垂直距离，皱褶后会王桑超过水平线，所以往下偏移WAVE_HEIGHT / 2
                //5表示波浪的密集度，表示波峰波谷总共有五个,对应上面左图的1,2,3,4,5
                //j就是水平像的X轴坐标
                //K决定正弦曲线起始点(x=0)点的Y坐标，k=0就是从波峰波谷的中间开始左->右绘制曲线
                float yOffset = H_MAX_WAVE_HEIGHT / 2 * progress + H_MAX_WAVE_HEIGHT / 2 * progress * (float) Math.sin((float)j/WIDTH*5*Math.PI+k);

                //垂直方向竖直压缩时的坐标
                float xPostion = origs[(i*(WIDTH+1)+j)*2+0] + (bitmapwidth - origs[(i*(WIDTH+1)+j)*2+0]) * progress;
                //垂直方向正弦曲线优化后的坐标,1.1->个波峰波谷
                float vXSinPostion = V_MAX_WAVE_HEIGHT / 2 * progress * (float) Math.sin((float)i/WIDTH*1.1*Math.PI + k);
                //每个像素扭曲后的x坐标
                //origs[(i*(WIDTH+1)+j)*2+0] 原图x坐标
                verts[(i*(WIDTH+1)+j)*2+0]= vXSinPostion *((bitmapwidth - xPostion) / bitmapwidth) + xPostion;
                //每个像素扭曲后的Y坐标
                //origs[(i*(WIDTH+1)+j)*2+1] 原图y坐标
                verts[(i * (WIDTH + 1) + j) * 2 + 1] = origs[(i * (WIDTH + 1) + j) * 2 + 1] + yOffset;//

                int channel = 255 - (int)(yOffset * 3);
                channel = channel < 0 ? 0 : channel;
                channel = channel > 255 ? 255 : channel;
                colors[index] = 0xFF000000 | channel << 16 | channel << 8 | channel;
                index += 1;
            }
        }
        canvas.drawBitmapMesh(mbitmap, WIDTH, HEIGHT, verts, 0, colors, 0, null);
    }

    int bitmapwidth;
    int bitmapheight;

    public void init() {
        mbitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.timg);
        bitmapwidth = mbitmap.getWidth();
        bitmapheight = mbitmap.getHeight();

        COUNT = (WIDTH + 1) * (HEIGHT + 1);
        verts = new float[COUNT * 2];
        origs = new float[COUNT * 2];

        int index = 0;
        for (int i = 0; i < HEIGHT + 1; i++) {
            float fy = bitmapheight / (float) HEIGHT * i;
            for (int j = 0; j < WIDTH + 1; j++) {
                float fx = bitmapwidth / (float) WIDTH * j;
                //偶数位记录x坐标  奇数位记录Y坐标
                origs[index * 2 + 0] = verts[index * 2 + 0] = fx;
                origs[index * 2 + 1] = verts[index * 2 + 1] = fy;
                index++;
            }
        }
    }
}

5. 应用场景和使用方法

xml布局文件使用:

<com.hx.curtain.drawer.CurtainContentLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/curtain_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:behind_menu="@layout/menu_left"
    app:content="@layout/layout_curtain_content"
    app:h_waveCount="5"
    app:maxRate="0.5"
    app:v_waveCount="1.1" />

监听滑动的系数

CurtainContentLayout curtain_layout = findViewById(R.id.curtain_layout);
curtain_layout.setCurtainLayoutListener(new CurtainContentLayout.OnCurtainLayoutListener() {
    @Override
    public void onSlide(View caurtainLayout, float slideOffset) {
        Log.e("CurtainActivity", "slideOffset: " + slideOffset);
    }
});

自定义属性

• behind_menu menu后面的布局

• content menu的内容，必须提供这个属性，不然会异常

• h_waveCount 水平方向折叠的波浪个数

• v_waveCount 竖直方向折叠的波浪个数

• maxRate menu最大的收缩比

效果预览：

本功能已经抽成了开源库Awesome Drawer，更多细节请看GitHub：https://github.com/Android1404/AwesomeDrawer

往期干货

1

2

3

如果你觉得本文对你有帮助，请分享给更多的人 

 关注【Android技术杂货铺】，每天都有Android 干货文章分享！