字母雨的实现

最新推荐文章于 2024-09-09 17:17:23 发布
置顶 最新推荐文章于 2024-09-09 17:17:23 发布
阅读量8.8k 收藏 52
点赞数 14
分类专栏： 自定义控件 android android进阶之路 文章标签： android 字母雨 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangke3016/article/details/51994167
版权

有段时间没写博文了，前段时间比较忙，这几天闲下来，想着写点东西，脑袋一下就闪过以前学习Android的时候见到的别人实现的黑客帝国的字母雨效果，当时对于小菜鸟的自己，那叫一个膜拜啊，时隔几年，自己实现一下，算是对以前的自己一个交代吧。

【zhangke3016: http://blog.csdn.net/zhangke3016】
[简书:http://www.jianshu.com/p/50d2b437fb43]

先看效果：
这里写图片描述

一、实现原理

在实现过程中，主要考虑整个界面由若干个字母组成的子母线条组成，这样的话把固定数量的字母封装成一个字母线条，而每个字母又封装成一个对象，这样的话，就形成了如下组成效果：

字母对象--》字母线条对象--》界面效果

每个字母都应该知道自己的位置坐标，自己上面的字母、以及自己的透明度：

class HackCode{
         Point p = new Point();//每一个字母的坐标
         int alpha = 255;//透明度值  默认255
         String code = "A";//字母的值
    }

而每个子母线条对象都有自己这条线条的初始底部起点，内部的多个字母都是根据线条的初始底部起点依次排列，包含多个字母对象集合，以及这条线条的唯一标示：

class HackLine{
    public int NUM = 0;//用于记录这列的标示
    private Point p = new Point();//线的初始位置
    List<HackCode> hcs = new ArrayList<HackView.HackCode>();//黑客字母的一条线
    }

在初始化的时候创建所有子母线条对象以及字母对象存入集合中：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = getMeasuredWidth();//获取控件宽高
        mHeight = getMeasuredHeight();
        mHackLines.clear();//清空集合
        initPlayData();//初始化播放数据
    }

    /**
     * 初始化播放数据
     */
    public void initPlayData(){
        initHackLine(mWidth/9, mHeight/12);
        initHackLine(mWidth/9, mHeight/7);
        HackLine hl;
        for (int i = 3; i < 9; i++) {
            hl= new HackLine();
            hl.p.x = mWidth/9*(i+1);
            hl.p.y = mHeight/7*(9-i);
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = hl.p.x;
                hc.p.y = hl.p.y-dip2px(getContext(), 25)*j;
                hl.hcs.add(hc);
            }
            mHackLines.add(hl);
            hl.NUM = mHackLines.size();
        }
    }

然后在onDraw方法中绘制：

@Override
protected void onDraw(Canvas canvas) {
    for (int i = 0; i < mHackLines.size(); i++) {
        drawText(i, canvas);
    }
    mHandler.sendEmptyMessageDelayed(WHAT, 100);//用于开启循环  线条滚动
    }

public void drawText(int nindex,Canvas canvas){
        HackLine hackLine = mHackLines.get(nindex);
        for (int i = 0; i < hackLine.hcs.size(); i++) {
            HackCode hackCode = hackLine.hcs.get(i);
            mPaint.setAlpha(hackCode.alpha);
            canvas.drawText(hackCode.code, hackCode.p.x, hackCode.p.y, mPaint);
        }
    }

接下来要滚动显示由Handler发送一个延时100毫秒的消息开始：

class WeakHandler extends Handler{
        WeakReference<Activity> mActivity; 
        public WeakHandler(Activity activity){
            mActivity = new WeakReference<Activity>(activity);
        }
        @Override
        public void handleMessage(Message msg) {
            if(mActivity.get() != null){
                switch (msg.what) {
                case WHAT:
                    nextPlay(dip2px(getContext(), 20));
                    for (int i = 0; i < mHackLines.size(); i++) {
                        if(mHackLines.get(i).p.y >= mHeight/2*3){
                            addHackLine(mHackLines.get(i));
                        }
                    }
                    invalidate();
                    break;
                }
            }
        }
    }

让整个线条往下走其实也就只用将线条的底部初始值Y坐标不断增加，内部字母随之更新位置就可以了：

/**
     *  下一帧播放
     * @param Nnum 每次下移多远 距离
     */
    public void nextPlay(int Nnum){
        for (int i = 0; i < mHackLines.size(); i++) {
            List<HackCode> hcs = mHackLines.get(i).hcs;
            hcs.clear();
            mHackLines.get(i).p.y+=Nnum;
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = mHackLines.get(i).p.x;
                hc.p.y = mHackLines.get(i).p.y-dip2px(getContext(), 25)*j;
                hcs.add(hc);
            }
        }
    }

之后我们要考虑在合适的时间移除掉不需要的字母线条并增加新的子母线条，这里我是判断如果线条底部超过屏幕高度的一半时就移除当前线条并根据唯一标示添加新的线条：

    /**
     * 删除一列  同时添加初始化一列
     * @param hackLine 
     */
    public void addHackLine(HackLine hackLine){
            if(hackLine == null){
                return;
            }
            int num = hackLine.NUM;
            mHackLines.remove(hackLine);//如果存在  删除   重新添加

            HackLine hl;
            hl= new HackLine();
            hl.p.x = mWidth/9*(num-1);
            hl.p.y = mHeight/12*(7-(num-1));
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = hl.p.x;
                hc.p.y = hl.p.y-dip2px(getContext(), 25)*j;
                hl.hcs.add(hc);
            }
            hl.NUM = num;
            mHackLines.add(hl);
    }

最后，在控件移除屏幕的时候终止消息循环，运行时记得将根布局设置背景为黑色：

@Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mHandler.removeCallbacksAndMessages(null);//停止刷新
    }

OKOK,字母雨已经出来啦~~ 思路清晰之后还是很简单的哦~

二、实现代码

整个代码也不算很长，就直接贴上了：

/**
 * 字母雨
 * @author zhang
 *
 */
public class HackView extends View {
    /** 文字的画笔 */
    private Paint mPaint;
    /** 控件的宽 */
    private int mWidth;
    /** 控件的高 */
    private int mHeight;
    /** 所有字母 */
    private static final String[] CODES = {
        "A","B","C","D","E","F","G","H","I","J","K",
        "L","M","N","O","P","Q","R","S","T","U","V",
        "W","K","Y","Z"
    };

    private static final int WHAT = 1;
    /** 所有的HackLine组合 */
    private List<HackLine> mHackLines = new ArrayList<HackView.HackLine>();

    private WeakHandler mHandler;

    public HackView(Context context) {
        this(context,null);
    }
    public HackView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public HackView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        mHandler = new WeakHandler((Activity) context);
    }

    class WeakHandler extends Handler{
        WeakReference<Activity> mActivity; 
        public WeakHandler(Activity activity){
            mActivity = new WeakReference<Activity>(activity);
        }
        @Override
        public void handleMessage(Message msg) {
            if(mActivity.get() != null){
                switch (msg.what) {
                case WHAT:
                    nextPlay(dip2px(getContext(), 20));
                    for (int i = 0; i < mHackLines.size(); i++) {
                        if(mHackLines.get(i).p.y >= mHeight/2*3){
                            addHackLine(mHackLines.get(i));
                        }
                    }
                    invalidate();
                    break;
                }
            }
        }
    }
    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(dip2px(getContext(), 20));
        mPaint.setStrokeCap(Cap.ROUND);
        mPaint.setStrokeWidth(dip2px(getContext(), 5));
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mWidth = getMeasuredWidth();//获取控件宽高
        mHeight = getMeasuredHeight();
        mHackLines.clear();//清空集合
        initPlayData();
    }
    /**
     *  下一帧播放
     * @param Nnum 每次下移多远 距离
     */
    public void nextPlay(int Nnum){
        for (int i = 0; i < mHackLines.size(); i++) {
            List<HackCode> hcs = mHackLines.get(i).hcs;
            hcs.clear();
            mHackLines.get(i).p.y+=Nnum;
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = mHackLines.get(i).p.x;
                hc.p.y = mHackLines.get(i).p.y-dip2px(getContext(), 25)*j;
                hcs.add(hc);
            }
        }
    }
    /**
     * 删除一列  同时添加初始化一列
     * @param hackLine 
     */
    public void addHackLine(HackLine hackLine){
            if(hackLine == null){
                return;
            }
            int num = hackLine.NUM;
            mHackLines.remove(hackLine);//如果存在  删除   重新添加

            HackLine hl;
            hl= new HackLine();
            hl.p.x = mWidth/9*(num-1);
            hl.p.y = mHeight/12*(7-(num-1));
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = hl.p.x;
                hc.p.y = hl.p.y-dip2px(getContext(), 25)*j;
                hl.hcs.add(hc);
            }
            hl.NUM = num;
            mHackLines.add(hl);
    }
    /**
     * 初始化每一行数据
     * @param x
     * @param y
     */
    public void initHackLine(int x,int y){
        HackLine hl;
        for (int i = 0; i < 9; i++) {
            hl= new HackLine();
            hl.p.x = x*i;
            hl.p.y = y*(7-i);
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = hl.p.x;
                hc.p.y = hl.p.y-dip2px(getContext(), 25)*j;
                hl.hcs.add(hc);
            }
            mHackLines.add(hl);
            hl.NUM = mHackLines.size();
        }
    }
    /**
     * 初始化播放数据
     */
    public void initPlayData(){
        initHackLine(mWidth/9, mHeight/12);
        initHackLine(mWidth/9, mHeight/7);
        HackLine hl;
        for (int i = 3; i < 9; i++) {
            hl= new HackLine();
            hl.p.x = mWidth/9*(i+1);
            hl.p.y = mHeight/7*(9-i);
            for (int j = 0; j < 7; j++) {
                HackCode hc = new HackCode();
                hc.alpha -= 30*j;
                hc.code = CODES[new Random().nextInt(CODES.length)];
                hc.p.x = hl.p.x;
                hc.p.y = hl.p.y-dip2px(getContext(), 25)*j;
                hl.hcs.add(hc);
            }
            mHackLines.add(hl);
            hl.NUM = mHackLines.size();
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 0; i < mHackLines.size(); i++) {
            drawText(i, canvas);
        }
        mHandler.sendEmptyMessageDelayed(WHAT, 100);
    }

    public void drawText(int nindex,Canvas canvas){
        HackLine hackLine = mHackLines.get(nindex);
        for (int i = 0; i < hackLine.hcs.size(); i++) {
            HackCode hackCode = hackLine.hcs.get(i);
            mPaint.setAlpha(hackCode.alpha);
            canvas.drawText(hackCode.code, hackCode.p.x, hackCode.p.y, mPaint);
        }
    }
    /**
     *  每条线  包含多个字母
     **/
    class HackLine{
        public int NUM = 0;//用于记录这列的标示
        private Point p = new Point();//线的初始位置
        List<HackCode> hcs = new ArrayList<HackView.HackCode>();//黑客字母的一条线
    }
    /**
     * 每个字母
     */
    class HackCode{
         Point p = new Point();//每一个字母的坐标
         int alpha = 255;//透明度值  默认255
         String code = "A";//字母的值
    }
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mHandler.removeCallbacksAndMessages(null);//停止刷新
    }
     /** 
     * 根据手机的分辨率从 dip 的单位 转成为 px(像素) 
     */  
    public static int dip2px(Context context, float dpValue) {  
        final float scale = context.getResources().getDisplayMetrics().density;  
        return (int) (dpValue * scale + 0.5f);  
    }  
}

xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context=".MainActivity" >

    <com.zk.hack.HackView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

想想以前的自己，现在回头看看，感慨良多。写在最后，算是对自己的鼓励吧。加油！Mr.Zk.

HTML黑客帝国字母雨
兔子王
05-12 3万+
HTML《黑客帝国》同款炫酷字母雨完整代码。
黑客帝国再现：探索炫酷字母雨的奥秘！
J_Jie_的博客
05-30 494
今天，就让我们一起揭开这炫酷字母雨背后的秘密，体验一场前所未有的虚拟冒险！
代码雨 源码
最新发布
2402_83519154的博客
09-09 761
新建一个文本文档，把上面的代码复制进去，保存退出，把文档的后缀名改成html，双击打开即可。
Java 字符/字母 雨
09-09
Java写的字符/字母雨，感觉还可以，运行是全屏的，按esc键退出，代码有问题欢迎评论，谢谢！博客描述：https://blog.csdn.net/m0_37750720/article/details/82556459
python屏幕数字符号雨（已验证）
Vertira的博客
03-11 3194
import pygame import random def main(): # 初始化pygame pygame.init() # 默认不全屏 fullscreen = False # 窗口未全屏宽和高 WIDTH, HEIGHT = 1100, 600 init_width, init_height = WIDTH, HEIGHT # 字块大小，宽，高 suface_height = 18 # 字体大小 .
字母代码雨（完整版）
2401_83104529的博客
05-17 1224
然后，进入主循环，不断处理事件和更新界面。然后，定义了一个名为btn_login的函数，用于处理登录按钮的点击事件。接着，根据屏幕的宽度计算了可以在画板上放几列文本，并创建了一个用于存储每列当前位置的列表drops。接下来，创建了两个Label组件和两个Entry组件，分别用于显示账号和密码的标签和输入框。然后，创建了一个名为root的Tk对象作为主界面，并设置了标题和大小。然后，创建了一个数字和字母的列表texts，用于存储要显示的文本。然后，设置了窗口的标题和大小，并创建了一个窗口对象winSur。
Demo_字母雨
WillScorpio
08-23 1248
自定义控件，字母雨
python画代码雨
Forget_G的博客
03-20 3412
python实现屏幕代码雨 通过Python实现屏幕代码雨 根据情况调节屏幕大小 否则屏幕显示不下会报错 PANEL_width = 1000 PANEL_highly = 500 需要安装pygame pip install pygame 代码如下： import random import pygame from pygame.locals import * from...
字母雨效果
08-18
1. **JavaScript**：通常用于实现网页上的动态效果，可以通过控制DOM元素的属性（如位置、透明度等）来创建字母雨效果。 2. **CSS3**：通过CSS动画（如`@keyframes`规则）可以实现字母的平滑移动和变换，增加视觉...
Android实现字母雨的效果
09-01
在Android开发中，实现“字母雨”效果是一种有趣且引人注目的动态视觉表现，它模仿了电影《黑客帝国》中的经典场景。本教程将详细解释如何通过Android编程技术来创建这种效果。 首先，要理解实现字母雨效果的基本...
C/C++黑客帝国字母雨（完整代码）
热门推荐
兔子王
06-24 3万+
C/C++版《黑客帝国》同款字母雨来喽~
字符雨 字母雨 黑客帝国 数字雨 带源码 win32 可做屏保
10-15
可以根据自己需要修改成 汉字 数字 等等，网上貌似只有一个日文的 很恶心...
字母雨打字练习.sb3
03-22
Scratch字母雨打字练习Scratch字母雨打字练习Scratch字母雨打字练习Scratch字母雨打字练习Scratch字母雨打字练习Scratch字母雨打字练习
黑客帝国字母雨源代码
12-16
黑客帝国数字雨的源代码，以及详细的注释。很基础的东西。如果是刚刚学习win32编程，这是个不错的练习材料。
数字雨源代码
03-27
数字雨源代码 vc++6.0编译成功无错误能运行屏保一样的，和黑客帝国差不多
HTML5数字雨代码
02-25
模仿黑客帝国数字雨效果，采用HTML5画图功能
python实现炫酷字母雨
小鱼干儿的博客
09-12 944
import random, pygame PANEL_width = 800 PANEL_highly = 500 FONT_PX = 15 pygame.init() # 创建一个窗口 winSur = pygame.display.set_mode() font = pygame.font.SysFont('123.ttf', 22) bg_suface = pygame.Surface((1920,1080), flags=pygame.SRCALPHA) pygame.Surface.conve
黑客帝国数字雨
ksueis的博客
12-15 2564
import numpy as np import random import pygame PANEL_width = 1920 PANEL_highly = 1680 FONT_PX = 15 pygame.init() # 创建一个窗口 winSur = pygame.display.set_mode((PANEL_width, PANEL_highly)) font = pygame.font.SysFont('123.ttf', 22) bg_suface = pygame.Surface(..
神奇的流星雨——字母雨的实现
qq_35816104的博客
08-26 1887
当然这么神奇的效果我们做为小辈是没有办法写出来的，那么我们就看看大牛是如何实现的实现原理 整个界面由若干个字母组成的子母线条组成，这样的话把固定数量的字母封装成一个字母线条，而每个字母又封装成一个对象（字母——字母线——试图界面） class HackCode{ Point p = new Point();//每一个字母的坐标 int alpha = 255;
Python代码实现维吾尔语字母雨效果
通过以上知识点的介绍，可以看出在实现维吾尔语字母雨效果时，不仅需要掌握Python编程的常规知识，还应该对维吾尔语的特殊性、图形编程以及字符编码有深入的了解。这些内容的掌握是编写该效果代码的前提和基础。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值