字母雨的实现

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

先看效果:

一、实现原理

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

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

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

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.

时间: 2025-01-05 17:56:14

字母雨的实现的相关文章

黑客帝国屏保源码

黑客帝国屏幕保护设置 1. 打开VS2010或以上版本,新建—>项目,Visual C++,win32,选择win32控制台应用程序,名称填写为"hacker". 2. 将一下代码复制到项目源文件中 //数字流星雨 作者:Wicrecend #include "stdafx.h" #include <windows.h> #define ID_TIMER 1 #define STRMAXLEN 25 //一个显示列的最大长度 #define STR

屏保源码

黑客帝国屏保源码 黑客帝国屏幕保护设置 1. 打开VS2010或以上版本,新建—>项目,Visual C++,win32,选择win32控制台应用程序,名称填写为"hacker". 2. 将一下代码复制到项目源文件中 黑客帝国屏保源码 //数字流星雨 作者:Wicrecend #include "stdafx.h" #include <windows.h> #define ID_TIMER 1 #define STRMAXLEN 25 //一个显示

黑客屏保 代码来自网络搜索 做了部分改动

#include "stdafx.h"#include <windows.h>#include <locale>#include <exception> #pragma comment (lib,"User32.lib")#pragma comment (lib,"Gdi32.lib") #define ID_TIMER 1 #define STRMAXLEN 19 //一个显示列的最大长度 #define S

取汉子拼音首字母的C#方法

/// <summary> /// 获得一个字符串的汉语拼音码 /// </summary> /// <param name="strText">字符串</param> /// <returns>汉语拼音码,该字符串只包含大写的英文字母</returns> public static string GetChineseSpell(string strText) { if (strText == null || st

字母条索引定位

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/listview" an

微冷的雨Java基础学习手记(一)

使用Java理解程序逻辑 之凌波微步 船舶停靠在港湾是很安全的,但这不是造船的目的 北大青鸟五道口原玉明老师出品 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识点时,要进行验证 02.查看帮助文档和搜索引擎的使用 借助网络上的Blog文章 03.不要急功近利 不要抱着速成的想法,否则必然走弯路学习编程不是一蹴而就的事情付出的成本高,才能有一个高薪的收入 04.不要浮躁 不要什么都学,只学有用的 浮躁的程度和技术水平成反比的走自己的路,让别人去浮躁去吧! 每天问问自

[No00005B]理解26个英文字母的原始含义-例词

理解26个英文字母的原始含义,不仅可以加强我们的语感,而且对我们背单词是大有帮助的.那么26个字母的象形之处到底在哪呢?下面是各字母所对应的含义,如果用示图表达出来,将会更加清楚. A-牛头 B-房子.鸟嘴 C,G-房角 D-门 E-举着双手的人 F-沙粒 H-荷花 I-手 K-皇帝 L-鞭子 M-水or波浪 N-鼻子 O-圆的东西 P-嘴 Q,R-人头 S-太阳,沙丘 T-十字架 V-龙 X-十字架 Z-闪电 A aa, an 一(个,件)(an 用于元音音素开头的词前) (3A1)a car

EasyX—数字雨

1 ///////////////////////////////////////////////////////////////////// 2 // 程序名称:数字雨 3 // 编译环境:VC6.0 EasyX 4 // 作 者:flx413 5 // 时 间:2016-5-2 6 ///////////////////////////////////////////////////////////////////// 7 8 #include <stdio.h> 9 #include &

在vc中实现获取汉字拼音的首字母

在vc中实现获取汉字拼音的首字母 void GetFirstLetter(CString strName, CString& strFirstLetter){    TBYTE ucHigh, ucLow;    int  nCode;    CString strRet;    strFirstLetter.Empty();    for (int i=0; i<strName.GetLength(); i++)    {        if ( (TBYTE)strName[i] <