高阶自定义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 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

制作高大上的Canvas粒子动画

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

37010
来自专栏何俊林

OpenGL中 Canvas 性能分析

本文将通过分析部分源码,描述 Android 里面的 Canvas 的大致实现。并且会对 Canvas 的性能做一定分析,提供对 Canvas 的使用建议。

903
来自专栏学海无涯

iOS开发之UICollectionViewDataSourcePrefetching

在iOS10中,苹果为UICollectionViewCell引入了Pre-Fetching预加载机制用于提升它的性能。主要引入了一个新的数据源协议UIColl...

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

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

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

552
来自专栏一“技”之长

iOS流布局UICollectionView系列一——初识与简单使用UICollectionView

        UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似。...

922
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

653
来自专栏跟着阿笨一起玩NET

asp.net中的比较完美的验证码

本文转载:http://blog.csdn.net/zjk20108023/article/details/7836174

291
来自专栏码云1024

AVL平衡二叉树中旋转操作的本质及其实现

           AVL (Adelson Velskii和 Landis)树是带有平衡条件的二叉查找树。这个平衡条件必须容易保持,而且它必须保证树的深度是...

4758
来自专栏iOS开发攻城狮的集散地

iOS 瀑布流之栅格布局

691
来自专栏Ken的杂谈

ImageHelper.cs-支持高清缩略图

762

扫码关注云+社区