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

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

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

腾讯云+社区:https://cloud.tencent.com/developer/user/1148436/activities

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

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

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

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

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

----- 概述

----- 原理及其难点

----- 部分代码简述

----- 源码地址

效果视频 & 图片

第一个视频,无散列

第二个视频,具备散列

概述

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Thinks

谈响应式web设计代码实现

在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

331
来自专栏游戏开发那些事

【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

  Canvas画布是承载所有UI元素的区域。Canvas实际上是一个游戏对象上绑定了Canvas组件。所有的UI元素都必须是Canvas的自对象。如果场景中没...

1011
来自专栏Coco的专栏

不可思议的纯CSS导航栏下划线跟随效果

1663
来自专栏数据小魔方

图表案例|全球游戏行业用户渠道调查报告(尼尔森)

今天要跟大家分享的是一个尼尔森的典型图表案例——全球游戏行业用户渠道调查报告! 而且本图表是一个使用单选按钮的动态图表,非常适合作为案例来讲,同时可以巩固一下最...

3658
来自专栏练小习的专栏

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

2136
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

3986
来自专栏林冠宏的技术文章

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

跟随早前开源的 XView (https://github.com/af913337456/XView) 项目,本次在原基础上添加了 粒子变幻 自定义View。...

1242
来自专栏狮乐园

liferay-portlet-container

portlet是portal中最常用的组件了,所以也来山寨一个70版本的portlet container的UI吧。

773
来自专栏iOS122-移动混合开发研究院

iOS提示框,为什么你应该使用 MBProgressHUD?

这是一篇带有一定笔者主观感情色彩的比较文章.文章着重对比github上最流行的两个iOS进度提示控件 MBProgressHUD 与 SVProgressHUD...

37910
来自专栏jojo的技术小屋

原 荐 CSS深入理解之border

2082

扫码关注云+社区