目录
高阶自定义View --- 粒子变幻、隧道散列、组合文字
作者:林冠宏 / 指尖下的幽灵
掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8
博客:http://www.cnblogs.com/linguanh/
GitHub : https://github.com/af913337456/
联系方式 / Contact:913337456@qq.com
----- 效果视频 & 图片
----- 概述
----- 原理及其难点
----- 部分代码简述
----- 源码地址
效果视频 & 图片
第一个视频,无散列
第二个视频,具备散列
概述
跟随早前开源的 XView (https://github.com/af913337456/XView) 项目,本次在原基础上添加了 粒子变幻 自定义View。目前我在代码里面的设置它可以做到:
1,根据你输入文字,将被粒子组合而成。
2,粒子流具备多种属性,目前我拓展了缩放
,圆形与矩形
,墙壁碰撞
,等等。 3,粒子每个互不影响,可以分批设置粒子特性
,视频中就有 方形 和 圆形 4,所有的半径,坐标什么的参数都是可自定义的。 5,因为锚边
是根据 bitmap 而来的,也就是说,你可以输入图片,然后由粒子组合 6,XView 项目早前已经开源了碰撞球,可以加入粒子相互碰撞
原理及其难点
1,根据 bitmap 找出文字或图像的边。这步骤要减少 o(n)
2,根据边路径,进行粒子填充
3,变幻算法,例如运动中的缩放
4,高效率的刷新,摒弃 View,采用 SurfaceView
部分代码简述
调用
// 粒子变幻particleView.setConfigAndRefreshView( new ParticleView.Config() .setCanvasWidth( // 设置画布宽度 getWindowManager().getDefaultDisplay().getWidth() ) .setCanvasHeight(800) // 设置画布高度 .setParticleRefreshTime(50) // 设置每帧刷新间隔 .set_x_Step(15) // 设置 x 轴每次取像素点的间隔 .set_y_Step(19) // 设置 轴每次取像素点的间隔 .setParticleCallBack( new ParticleView.ParticleCallBack() { @Override public ParticleView.Particle setParticle(ParticleView.Particle p, int index, int x, int y) { p.setX(x); // 设置获取回来的 x 为该 粒子的x坐标 p.setY(y); // 设置获取回来的 y 为该 粒子的y坐标 p.setIsZoom(true); // 设置当前颗粒子是否启动缩放 p.setRadiusMax(12); // 设置当前颗粒子最大的缩放半径 p.setRadius(12); // 设置当前颗粒子默认的半径 /** 下面的 %3 是我演示 分批次 显示不同效果而设置 **/ if(index % 3==0){ p.setRectParticle(true); // 这个粒子是 正方形 的 p.setIsHash( // 设置它是否是散列的,即是随机移动 true, new Random().nextInt(30)-15, // x 速率 new Random().nextInt(30)-15 // y 速率 ); } return p; // 返回这个粒子 } @Override public boolean drawText(Bitmap bg,Canvas c) { /** 这里就是我们要自定义显示任意文字的地方 */ MainActivity.this.drawText(bg,c,s); return true; /** 告诉它不要使用默认的 txt */ } } ));
源码地址
https://github.com/af913337456/XView