高阶自定义View --- 粒子变幻、隧道散列、组合文字

简介: 高阶自定义View --- 粒子变幻、隧道散列、组合文字作者:林冠宏 / 指尖下的幽灵掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8博客:http://www.

高阶自定义View --- 粒子变幻、隧道散列、组合文字

作者:林冠宏 / 指尖下的幽灵

掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8

博客:http://www.cnblogs.com/linguanh/

GitHub : https://github.com/af913337456/

联系方式 / Contact:913337456@qq.com


[TOC]
----- 效果视频 & 图片

----- 概述

----- 原理及其难点

----- 部分代码简述

----- 源码地址

效果视频 & 图片

第一个视频,无散列

d66426f11d92c5def18a4f2b4887aacf

第二个视频,具备散列

48f731a27909b3d2c7e788c82bb30282

2862ba5fd0bfbcd5a5ca1df48e5a6088

dbcc3a105b1b1cefed07ce038a0537b2


概述

跟随早前开源的 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

如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力


img_12e3f54d4d0f70f0eb14f20548e3d781.png
目录
相关文章
|
29天前
|
移动开发 前端开发 UED
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
|
3月前
|
算法 C语言
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
116 0
一文搞懂:一文教你快速搞懂速度曲线规划之S形曲线(超详细+图文+推导+附件代码)
技术好文共享:辅助角公式的几何意义
技术好文共享:辅助角公式的几何意义
|
4月前
|
存储 算法 Serverless
连线消除游戏的原理和实现
连线消除游戏的原理和实现
71 0
|
机器学习/深度学习 自动驾驶 数据可视化
「分割一切」视频版来了:点几下鼠标,动态的人、物就圈出来了
「分割一切」视频版来了:点几下鼠标,动态的人、物就圈出来了
113 0
|
数据可视化
利用ggcor包绘制相关性组合图及环状热图
ggcor包最初是因为能快速实现19年Science一组合相关性图(上图所示)变得流行起来,除此该包对热图、热图等等的可视化都是很方便快捷的,除了之前介绍过的几种相关性图几种方式,此包也是个不错的选择,且具独特的风格(特别是组合相关性图、环形热图)。但是不知道因为何种原因此包在Github上消失了....,到作者(厚缊)个人博客上瞅了瞅发现关于包的参数介绍示例等也都没有了,在评论区里看到作者回答项目已不再提供任何代码和任何资料,需要的可以去国内的gitee和国外的github搜索看看有没有别人存的代码。
582 0
如何做一个俄罗斯方块3:形状控制
今天,我们来继续学习和实现下一个模块:玩家控制形状。在俄罗斯方块游戏中,玩家可以对下落的形状进行控制,控制分为两种,一种是控制形状的移动(左,右,下),一种是控制形状的旋转(顺时针旋转 90 度)。
122 0
|
设计模式 算法 前端开发
第51/90步《前端篇》第11章 重构音频管理、碰撞检测和右挡板移动算法 第32课
今天学习《前端篇》第11章 重构音频管理、碰撞检测和右挡板移动算法 第32课 设计模式重构七:访问者模式和策略模式
50 0
|
设计模式 算法 前端开发
第50/90步《前端篇》第11章 重构音频管理、碰撞检测和右挡板移动算法 第31课
今天学习《前端篇》第11章 重构音频管理、碰撞检测和右挡板移动算法 第31课 设计模式重构六:适配器模式、桥接模式和装饰模式
72 0