Android 自定义 View | 扭曲动效

Android 自定义 View | 扭曲动效

Android小彩虹2021-08-15 23:51:26160A+A-

Android 自定义 View.png

相关推荐:

1. 概述

今天继续分(Zhuang)享(Bi)一个自定义的动画历程。今天的目标如下:

这动画的UI源文件已经丢失,也就是动画的细节已经不知道(咳咳),好吧硬着头皮上吧。

2. 简单分析

简单看出,整个动画分成三个部分:车轮,车厢,车顶。

  • 车轮:车轮的动效比较简单,基于X轴的横向拉伸和挤压,这个不难。

  • 车厢,车顶:这两个部分其实动效是一样的,区别是,动作的激烈程度不一样

(/ω\)。要做到这种姿势这种动作,噢,不,是动效,有点难。 但仔细观察,车厢好比是有人用手指,在车厢的左下和右下进行拉扯和复原所达到的效果, 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进行扭曲

3. drawBitmapMesh简单示例

  • 根据参数的含义,我们先初始化这些参数:
//将图像分成多少格
private int carBodyWidthPart = 4;
private int carBodyHeightPart = 4;
//交点坐标的个数
private int carBodyPartCount = (carBodyWidthPart + 1) * (carBodyHeightPart + 1);
//用于保存COUNT的坐标
//x0, y0, x1, y1......
private float[] carBodyNewsPos = new float[carBodyPartCount * 2];
private float[] carBodyOrigPos = new float[carBodyPartCount * 2];
/** * 得到网格点集合 * @param bitmap bitmap * @param heightPart 纵向分割的份数 * @param widthPart 横向分割的份数 * @param newPos 新点集合 * @param origPos 原始点集合 */
protected void getBitmapMeshPoints(Bitmap bitmap, int heightPart, int widthPart, float[] newPos, float[] origPos) {
    //初始化网格点
    int index = 0;
    float bmWidth = bitmap.getWidth();
    float bmHeight = bitmap.getHeight();
    for (int i = 0; i < heightPart + 1; i++) {
        float fy = bmHeight * i / heightPart;
        for (int j = 0; j < widthPart + 1; j++) {
            float fx = bmWidth * j / widthPart;
            //X轴坐标 放在偶数位
            newPos[index * 2] = fx;
            origPos[index * 2] = newPos[index * 2];
            //Y轴坐标 放在奇数位
            newPos[index * 2 + 1] = fy;
            origPos[index * 2 + 1] = newPos[index * 2 + 1];
            index += 1;
        }
    }
}
  • 这里我把初始化数组写成了一个函数,注意的是,数组按照第一个点的x1,y1,然后第二个点的x2,y2,这样的顺序存储。我们先把图给画出来看看效果,我们把这些点集也画出来:
/** * 绘制网格点 * @param canvas canvas * @param pos 点集 * @param paint 画笔 */
protected void drawPoint(Canvas canvas, float[] pos, Paint paint) {
    for (int i = 0; i < pos.length/2; i++) {
        int x = i*2;
        int y = x + 1;
        canvas.drawPoint(pos[x], pos[y], paint);
    }
}
  • 绘制方法:
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.setDrawFilter(paintFlagsDrawFilter);
    //原始点
    canvas.save();
    canvas.translate(50,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyOrigPos, paint);
    canvas.restore();
    //变化点
    canvas.save();
    canvas.translate(1000,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyNewsPos, paint);
    canvas.restore();
}

  • 左边的是原始点所画出来的,右边是变化后所画出来的,因为这里没有对点进行偏移所以左右是一样的。还有要注意的一点,绘制drawBitmapMesh是没有传入绘制的起始点,因为他默认是从原始点开始绘制,所以这里有把坐标移动的代码。

4. 尝试加点扭曲

既然要形变要扭曲,那么我们先对carBodyNewsPos这个点集进行肆意妄为地操作一下:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.setDrawFilter(paintFlagsDrawFilter);
    //原始点
    canvas.save();
    canvas.translate(50,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyOrigPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyOrigPos, paint);
    canvas.restore();
    //遍历交点,修改
    for (int i = 0; i < carBodyPartCount; i++) {
        int x = i * 2;
        int y = x + 1;
        carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1);
    }
    //变化点
    canvas.save();
    canvas.translate(1000,50);
    canvas.drawBitmapMesh(bitmapCarBody, carBodyWidthPart, carBodyHeightPart, carBodyNewsPos, 0, null, 0, paint);
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);
    drawPoint(canvas, carBodyNewsPos, paint);
    canvas.restore();
}

我们对每一个点应用了:carBodyNewsPos[x] = carBodyOrigPos[x] * (changeFactor * 1.0f / 100 + 1)

5. 车厢的扭曲实现

仔细观察车厢的动画,发现有几点细节:

  • 扭曲可以分解为x,y轴的扭曲,其叠加一起就是车厢的动画
  • 车厢和车顶的扭曲一样,不用的是扭曲度
  • x轴的扭曲,以车厢的中心轴为分界线,左边向左扭曲,右边向右扭曲
  • x轴方向的拉伸,离x中心轴线越近变化越小,离顶部(y=0)越近,变化也越小
  • y轴的扭曲,是以y=0为中心轴,离x中心轴线越近变化越大,离顶部(y=0)越近,变化也越小

因为我们是依次遍历点集,就是从i=0一直到i=posCount,那么我们来实现一下上面的变化:

  • 设定两个因子:xFactor和yFactor,控制x,y轴方向的最大扭曲度。
  • 设定变化因子changeFactor,带动扭曲度随着时间而变化
  • 当点的x在x中心轴的左边,其x坐标应该是原始坐标减去扭曲度,反之亦然

大致得到X方向的扭曲度:changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;

  • xFactor是控制整个扭曲度的大小
  • 顶部(y=0)越近,变化也越小,而因为是从y=0开始绘制,所以,bitmap.getHeight()就是y轴的最大值,那么,origPos[y]/bitmap.getHeight() 就是当前点所占y轴的百分比,也就是,离y=0越近,origPos[y]/bitmap.getHeight() 的值越小。
  • 离x周轴线越近变化越小,Math.abs((widthPart+1)/2-i%(widthPart+1))

如上图,红色为x的中心轴,而我们遍历的i(点的个数)值是从0-N,而,i=0,i=4的时候最大,i=1,i=3次小,如此类推。 (widthPart+1)/2是算出中心轴的坐标相对位置,例如图中,算出应该是2,那么中心轴的相对位置则为2,而i%(widthPart+1),在图中就是,0-4的取值,跟中心轴的相对位置2相减取绝对值,就是一个离中心轴的变化量的大小了。

Y方向的扭曲度,也是一样的。这里就不说了。。。最后得出的扭曲函数如下:

/** * 改变车厢的Points * @param bitmap bitmap * @param posCount 点的个数 * @param widthPart 横向分割的份数 * @param heightPart 纵向分割的份数 * @param newPos 新点集合 * @param origPos 原始点集合 * @param xFactor 变化因子 * @param yFactor 变化因子 */
protected void changeCarBodyPoint(Bitmap bitmap, int posCount, int widthPart, int heightPart, float[] newPos, float[] origPos, float xFactor, float yFactor) {
    //遍历交点,修改
    for (int i = 0; i < posCount; i++) {
        int x = i*2;
        int y = x + 1;
        //x方向的拉伸,离x周轴线越近变化越小,离顶部(y=0)越近,变化也越小
        if (newPos[x]<centralAxisX) {
            newPos[x] = origPos[x] - changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;
        }
        else if (newPos[x]>centralAxisX) {
            newPos[x] = origPos[x] + changeFactor*Math.abs((widthPart+1)/2-i%(widthPart+1))*(origPos[y]/bitmap.getHeight()) * xFactor;
        }
        //y方向的拉伸,离x周轴线越近变化越大,离顶部(y=0)越近,变化也越小
        newPos[y] = origPos[y] + changeFactor * (widthPart*heightPart/(heightPart+1)+1) * (1 - Math.abs(origPos[x]-centralAxisX)/bitmap.getWidth()) * yFactor;
    }
}

把上面的函数应用上去:

是吧,效果差不多就得了吧!(呕心沥血,我的40米长刀呢!)

6. 总结

  • 通过这个自定义动画,熟悉了drawBitmapMesh的使用
  • 车顶也是同样的扭曲动画,只是要调xFactoryFactor
  • Demo在这里
  • 据说可以使用Matrix去做?后面再研究一下
  • 注意点密集带来的性能消耗和点稀疏带来的效果不佳的问题,这个要具体情况具体取舍

码字不易,方便的话素质三连,或者关注我的公众号 技术酱,专注 Android 技术,不定时推送新鲜文章,如果你有好的文章想和大家分享,欢迎关注投稿!

技术酱

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们