Github源码

Android 窗帘(Curtain)效果三之波浪式扭曲效果优化提升

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

QQ图片20180826235810.gif

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

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

22222.gif

全部代码如下：

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();
    }
 
    public void setProgress(float progress){
        this.progress = progress;
        invalidate();
    }
 
    @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 * progress  + WAVE_HEIGHT / 2 * progress * (float) Math.sin((float) j / WIDTH * 5 * Math.PI + k);
                //每个像素扭曲后的x坐标
                //origs[(i*(WIDTH+1)+j)*2+0] 原图x坐标
                verts[(i * (WIDTH + 1) + j) * 2 + 0] = origs[(i*(WIDTH+1)+j)*2+0] + (bitmapwidth - origs[(i*(WIDTH+1)+j)*2+0]) * progress;
                //每个像素扭曲后的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);
    }
 
    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++;
            }
        }
    }
}

Android 窗帘(Curtain)效果三之波浪式扭曲效果优化提升