高階自定義View — 粒子變幻、隧道雜湊、組合文字

林冠巨集發表於2019-02-26
View

高階自定義View — 粒子變幻、隧道雜湊、組合文字

作者：林冠巨集 / 指尖下的幽靈

掘金：juejin.im/user/587f0d…

部落格：www.cnblogs.com/linguanh/

GitHub ： github.com/af913337456…

聯絡方式 / Contact：913337456@qq.com

[TOC]
—– 效果視訊 & 圖片

—– 概述

—– 原理及其難點

—– 部分程式碼簡述

—– 原始碼地址

效果視訊 & 圖片

第一個視訊，無雜湊

第二個視訊，具備雜湊

概述

跟隨早前開源的 XView (github.com/af913337456…) 專案，本次在原基礎上新增了 粒子變幻 自定義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 */
                    }
                }
            )
);複製程式碼

原始碼地址

github.com/af913337456…

相關文章