zoukankan      html  css  js  c++  java
  • 高阶自定义View --- 粒子变幻、隧道散列、组合文字

    高阶自定义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

  • 相关阅读:
    3: Flink 运行命令 设置port
    4: docker 安装flink 1.14
    6: Docker Compose简单知识
    十二 docker 安装kafka
    十三 查看kafka版本
    2: Windows安装1.9.3 flink && first demo project
    5: win10 使用IDEA调试编译flink 1.14
    1: Windows上安装Flink
    Chrome 96 新功能
    js map遍历与promise一起使用会出现的问题,以及解决方案
  • 原文地址:https://www.cnblogs.com/linguanh/p/7499708.html
Copyright © 2011-2022 走看看