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>

以上就是基于Android实现字母雨的效果全部内容,效果很好,有需要的小伙伴们可以参考学习。

(0)

相关推荐

  • Android仿QQ聊天撒花特效 很真实

    先看看效果图吧 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?先在这里打个问号 下面就直接写了 1.activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent

  • Android中View的炸裂特效实现方法详解

    本文实例讲述了Android中View的炸裂特效实现方法.分享给大家供大家参考,具体如下: 前几天微博上被一个很优秀的 Android 开源组件刷屏了 - ExplosionField,效果非常酷炫,有点类似 MIUI 卸载 APP 时的动画,先来感受一下. ExplosionField 不但效果很拉风,代码写得也相当好,让人忍不住要拿来好好读一下. 创建 ExplosionField ExplosionField 继承自 View,在 onDraw 方法中绘制动画特效,并且它提供了一个 att

  • Android营造雪花和雨滴浪漫效果

    本文在实现雪花效果的基础上,根据漫天飞舞雪花,实现下雨天场景的效果,使用eclipse android 版本,具体内容如下 雪花效果图: 具体代码: 1.漫天飞舞的雪花主要代码 SnowView <span style="font-size:14px;">package com.ex</span>ample.snowflake.view; import android.content.Context; import android.graphics.Canvas

  • Android实现粒子雨效果

    本文实例介绍了Android实现粒子雨效果的实现过程,分享给大家供大家参考,具体内容如下 先看看效果图: 具体实现方法: 1.baseview主要是设定雨滴要实现的动作,只是先设定,也就是抽象方法,在子类中实现其方法 2.Rainitems封装雨滴类 3.Rainitems对雨滴集合创建到面板中,显示出来,具体实现就是在这个类中 一.baseview封装类,子类继承后实现方法即可 public abstract class BaseView extends View { private cont

  • Android实现字母雨的效果

    首先来看效果: 一.实现原理 在实现过程中,主要考虑整个界面由若干个字母组成的子母线条组成,这样的话把固定数量的字母封装成一个字母线条,而每个字母又封装成一个对象,这样的话,就形成了如下组成效果: 字母对象-->字母线条对象-->界面效果 每个字母都应该知道自己的位置坐标,自己上面的字母.以及自己的透明度: class HackCode{ Point p = new Point();//每一个字母的坐标 int alpha = 255;//透明度值 默认255 String code = &q

  • Android实现红包雨动画效果

    本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { public float x, y; public float rotation; public float speed; public float rotationSpeed; public int width, height; public Bitmap bitmap; public int money;

  • Python+Pygame实现代码雨动画效果

    pygame实现代码雨动画 如视频所示 利用pygame库实现了一个代码呈雨状下落的视觉效果 部分代码如下 import sys import random import pygame from pygame.locals import * # 屏幕大小 WIDTH = 800 HEIGHT = 600 # 下落速度范围 SPEED = [15, 30] # 字母大小范围 SIZE = [5, 30] # CODE长度范围 LEN = [1, 8] # 随机生成一个颜色 def randomCo

  • Android仿微信底部菜单栏效果

    前言 在市面上,大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理,通常都是分为3-5个大模块,从而正确有效地引导用户去使用我们的APP.实现底部菜单栏的方法也有很多种. 1.仿微信底部菜单栏(ViewPager+ImagerView+TextView) ......(其他方式后续会补充) 效果预览 首先来个开胃菜,看看实现效果: 先贴出项目所需的资源文件,这些可随个人自由更改颜色和文字 colors.xml <color name="bg_line_light_gray&quo

  • Android基于TextView属性android:ellipsize实现跑马灯效果的方法

    本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法.分享给大家供大家参考,具体如下: Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须超出TextView大小 3.TextView要获得焦点才能滚动 XML代码: android:ellipsize="marquee", andro

  • Android实现自定义的弹幕效果

    一.效果图 先来看看效果图吧~~ 二.实现原理方案 1.自定义ViewGroup-XCDanmuView,继承RelativeLayout来实现,当然也可以继承其他三大布局类哈 2.初始化若干个TextView(弹幕的item View,这里以TextView 为例,当然也可以其他了~),然后通过addView添加到自定义View中 3.通过addView添加到XCDanmuView中,位置在坐标,为了实现 从屏幕外移动进来的效果 我们还需要修改添加进来TextView的位置,以从右向左移动方向

  • Android实现图片轮播效果的两种方法

    大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

  • Android 类似微信登录输入框效果

    微信的登录输入框效果如下 进入自动打开自动启动软键盘 点击下一个输入框,下划线颜色改变 怎么实现这样的效果呢,其实非常简单! 简单的布局我就不说了,直接上干货. 1.实现进入自动弹出软键盘,在根文件中的Activity中设置 windowSoftInputMode 属性为 stateVisible|adjustResize 例如 <activity android:name=".SetLoginPasswordActivity" android:windowSoftInputMo

  • Android动画之3D翻转效果实现函数分析

    Android中的翻转动画效果的实现,首先看一下运行效果如上图所示. Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现,那么我们首先来分析一下Animation 和 Transformation. Animation动画的主要接口,其中主要定义了动画的一些属性比如开始时间,持续时间,是否重复播放等等.而Transformation中则包含一个矩阵和alpha值,矩阵是用来做平移,旋转和缩放动画的,而alpha值是用来做alpha动画的,要实现3D旋转动画

随机推荐