实例解析如何在Android应用中实现弹幕动画效果

在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽。弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果。

从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些View移动起来。所以,整体的实现思路大概是这样的:
1、定义一个RelativeLayout,在里面动态添加TextView。
2、这些TextView的字体大小、颜色、移动速度、初始位置都是随机的。
3、将TextView添加到RelativeLayout的右边缘,每隔一段时间添加一个。
4、对每个TextView做平移动画,使得TextView从右向左移动。
5、当TextView从左边移动出屏幕,将TextView从RelativeLayout中移除。
       有了思路下面就来看具体的代码。
       首先定义BarrageItem,用来存储每一个弹幕项的相关信息,包括字体内容、字体大小颜色、移动速度、垂直方向的位置、字体占据的宽度等。

public class BarrageItem {
  public TextView textView;
  public int textColor;
  public String text;
  public int textSize;
  public int moveSpeed;//移动速度
  public int verticalPos;//垂直方向显示的位置
  public int textMeasuredWidth;//字体显示占据的宽度
}

然后定义BarrageView,由于弹幕的字体颜色大小和移动速度都是随机的,需要定义最大最小值来限定它们的范围,然后通过产生随机数来设置它们在这个范围内的值。另外还需要定义弹幕的文本内容,这里是直接写死的一些固定值。

  private Context mContext;
  private BarrageHandler mHandler = new BarrageHandler();
  private Random random = new Random(System.currentTimeMillis());
  private static final long BARRAGE_GAP_MIN_DURATION = 1000;//两个弹幕的最小间隔时间
  private static final long BARRAGE_GAP_MAX_DURATION = 2000;//两个弹幕的最大间隔时间
  private int maxSpeed = 10000;//速度,ms
  private int minSpeed = 5000;//速度,ms
  private int maxSize = 30;//文字大小,dp
  private int minSize = 15;//文字大小,dp 

  private int totalHeight = 0;
  private int lineHeight = 0;//每一行弹幕的高度
  private int totalLine = 0;//弹幕的行数
  private String[] itemText = {"是否需要帮忙", "what are you 弄啥来", "哈哈哈哈哈哈哈", "抢占沙发。。。。。。", "************", "是否需要帮忙","我不会轻易的狗带", "嘿嘿", "这是我见过的最长长长长长长长长长长长的评论"};
  private int textCount;
//  private List<BarrageItem> itemList = new ArrayList<BarrageItem>(); 

  public BarrageView(Context context) {
    this(context, null);
  } 

  public BarrageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  } 

  public BarrageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mContext = context;
    init();
  }

如果弹幕显示的垂直位置是随机的,就会出现垂直方向上弹幕重叠的情况,所以需要根据高度对垂直方向按照弹幕高度的最大值等分,然后让弹幕在这些指定的垂直位置随机分布。这个值在onWindowFocusChanged里计算,因为在这个方法中通过View的getMeasuredHeight()得到的高度不为空。

@Override
public void onWindowFocusChanged(boolean hasWindowFocus) {
  super.onWindowFocusChanged(hasWindowFocus);
  totalHeight = getMeasuredHeight();
  lineHeight = getLineHeight();
  totalLine = totalHeight / lineHeight;
}
    通过Handler的sendEmptyMessageDelayed每隔随机的时间产生一个弹幕项。下面的代码设置弹幕项的属性。

class BarrageHandler extends Handler {
  @Override
  public void handleMessage(Message msg) {
    super.handleMessage(msg);
    generateItem();
    //每个弹幕产生的间隔时间随机
    int duration = (int) ((BARRAGE_GAP_MAX_DURATION - BARRAGE_GAP_MIN_DURATION) * Math.random());
    this.sendEmptyMessageDelayed(0, duration);
  }
} 

private void generateItem() {
  BarrageItem item = new BarrageItem();
  String tx = itemText[(int) (Math.random() * textCount)];
  int sz = (int) (minSize + (maxSize - minSize) * Math.random());
  item.textView = new TextView(mContext);
  item.textView.setText(tx);
  item.textView.setTextSize(sz);
  item.textView.setTextColor(Color.rgb(random.nextInt(256), random.nextInt(256), random.nextInt(256)));
  item.textMeasuredWidth = (int) getTextWidth(item, tx, sz);
  item.moveSpeed = (int) (minSpeed + (maxSpeed - minSpeed) * Math.random());
  if (totalLine == 0) {
    totalHeight = getMeasuredHeight();
    lineHeight = getLineHeight();
    totalLine = totalHeight / lineHeight;
  }
  item.verticalPos = random.nextInt(totalLine) * lineHeight;
  showBarrageItem(item);
}

将每一个弹幕项添加到视图上,并给View添加一个TranslateAnimation动画,当动画结束时,将View从视图上移除。

private void showBarrageItem(final BarrageItem item) { 

    int leftMargin = this.getRight() - this.getLeft() - this.getPaddingLeft(); 

    LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
    params.topMargin = item.verticalPos;
    this.addView(item.textView, params);
    Animation anim = generateTranslateAnim(item, leftMargin);
    anim.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) { 

      } 

      @Override
      public void onAnimationEnd(Animation animation) {
        item.textView.clearAnimation();
        BarrageView.this.removeView(item.textView);
      } 

      @Override
      public void onAnimationRepeat(Animation animation) { 

      }
    });
    item.textView.startAnimation(anim);
  } 

  private TranslateAnimation generateTranslateAnim(BarrageItem item, int leftMargin) {
    TranslateAnimation anim = new TranslateAnimation(leftMargin, -item.textMeasuredWidth, 0, 0);
    anim.setDuration(item.moveSpeed);
    anim.setInterpolator(new AccelerateDecelerateInterpolator());
    anim.setFillAfter(true);
    return anim;
  }

这样就完成了弹幕的功能,实现原理并不复杂。可以根据具体的需求来增加更多的控制,如控制每一行弹幕不重复,控制弹幕移动的Interpolator产生不同的滑动效果等等。

(0)

相关推荐

  • Android编程实现简易弹幕效果示例【附demo源码下载】

    本文实例讲述了Android编程实现简易弹幕效果.分享给大家供大家参考,具体如下: 首先上效果图,类似于360检测到骚扰电话页面: 布局很简单,上面是一个RelativeLayout,下面一个Button. 功能: (1)弹幕生成后自动从右侧往左侧滚动(TranslateAnimation),弹幕消失后立刻被移除. (2)弹幕位置随机出现,并且不重复(防止文字重叠). (3)字体大小在一定范围内随机改变,字体颜色也可以设置. (4)自定义先减速,后加速的Interpolator,弹幕加速进入.减

  • Android 实现仿网络直播弹幕功能详解及实例

    Android 网络直播弹幕                最近看好多网络电视,播放器及直播都有弹幕功能,自己周末捣鼓下并实现,以下是网上的资料,大家可以看下. 现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘

  • Android EasyBarrage实现轻量级弹幕效果

    本文介绍了Android EasyBarrage实现轻量级弹幕效果,分享给大家,具体如下: 概述 EasyBarrage是Android平台的一种轻量级弹幕效果目前支持以下设置: 自定义字体颜色,支持随机颜色: 自定义字体大小,支持随机字体大小: 支持边框显示,用于区分自己的弹幕和其他弹幕: 自定义边框颜色: 弹幕数据是否允许重复: 自定义单屏显示的最大弹幕数量: 数据不重叠: 支持动态添加弹幕: 不依赖VideoView,数据自动循环显示. github:https://github.com/

  • Android仿斗鱼直播的弹幕效果

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最为重要的一个功能之一,那么今天,我就带着大家一起来实现一个简单的Android端弹幕效果. 分析 首先我们来看一下斗鱼上的弹幕效果,如下图所示: 这是一个Dota2游戏直播的界面,我们可以看到,在游戏界面的上方有很多的弹幕,看直播的观众们就是在这里进行讨论的. 那么这样的一个界面该如何实现呢?其实并

  • Android弹幕框架 黑暗火焰使基本使用方法

    今天我将分享由BiliBili开源的Android弹幕框架(DanmakuFlameMaster)的学习经验. 我是将整个框架以model的形式引入项目中的,这样更方便的观察源码.也可以通过依赖的方式注入进来 dependencies { compile 'com.github.ctiao:DanmakuFlameMaster:0.5.3' } 先放一下我要做成的效果图: 页面分析 从上图来看,整个UI分成了三层.最下面是视频层,中间是弹幕层,顶层是控制层.现在市场上主流的视频直播软件大多都是这

  • 很棒的Android弹幕效果实例

    很多项目需要用到弹幕效果,尤其是在播放视频的时候需要一起显示别人发的弹幕,也包括自己的发的. 今天就试着写了一下这个效果. 思路就是将从右往左的动画效果,字体内容,字体大小,弹幕平移速度等属性一起与TextView封装成BarrageItem,并将控制效果与BarrageItem绑定在BarrageView进行显示.思路还是比较简单的.这里没有考虑到带有表情的弹幕,我会持续更新的. 先看效果: 项目目录结构: 接下来定义Barrageitem.class : 这个类就将TextView与从右往左

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

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

  • Android实现炫酷的网络直播弹幕功能

    现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的View上面就可以了,下方肯定还有有操作界面View,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示: 参照原理图,下面一步一步来实现这个功能.

  • Android自制精彩弹幕效果

    好久没有写过文章,最近发现直播特别的火,很多app都集成了直播的功能,发现有些直播是带有弹幕的,效果还不错,今天心血来潮,特地写了篇制作弹幕的文章. 今天要实现的效果如下: 1.弹幕垂直方向固定 2.弹幕垂直方向随机 上面效果图中白色的背景就是弹幕本身,是一个自定义的FrameLayout,我这里是为了更好的展示弹幕的位置才设置成了白色,当然如果是叠加在VideoView上的话,就需要设置成透明色了. 制作弹幕需要考虑以下几点问题: 1.弹幕的大小可以随意调整 2.弹幕内移动的item(或者称字

  • 实例解析如何在Android应用中实现弹幕动画效果

    在B站或者其他视频网站看视频时,常常会打开弹幕效果,边看节目边看大家的吐槽.弹幕看起来很有意思,今天我们就来实现一个简单的弹幕效果. 从直观上,弹幕效果就是在一个ViewGroup上增加一些View,然后让这些View移动起来.所以,整体的实现思路大概是这样的: 1.定义一个RelativeLayout,在里面动态添加TextView. 2.这些TextView的字体大小.颜色.移动速度.初始位置都是随机的. 3.将TextView添加到RelativeLayout的右边缘,每隔一段时间添加一个

  • 如何在Android studio 中使用单例模式

    本篇简单介绍如何在Android studio中 使用单例模式和使用注意事项. 单例模式 为什么要使用单例模式? 有一些对象我们只需要一个,只需要一个线程池 .缓存或是只有一台打印机.机器人 .机器人上面只有一个寻磁传感器.我们可以通过全局的静态变量来实现,但是全局变量在程序一开始就创建 可能比较耗费资源.可能一直没用到.单例模式和全局变量一样方便又没有它的缺点. 单利模式使用 public class Sensor { // 使用静态变量记录唯一的实例 private static Senso

  • 详解如何在Android studio中更新sdk版本和build-tools版本

    一.首先看下Android开发用到的sdk目录: build-tools 保存着一些Android平台相关通用工具,比如adb.和aapt.aidl.dx等文件.  aapt即Android Asset Packaging Tool , 在SDK的build-tools目录下. 该工具可以查看, 创建, 更新ZIP格式的文档附件(zip, jar, apk). 也可将资源文件编译成二进制文件.  Adb 即android debug bridge 管理模拟器和真机的万能工具,ddms 调试环境 

  • 如何在Android App中接入微信支付

    本篇简单介绍Android App中接入微信支付,包括App内支付和扫码支付.分享+支付 pofei 微信支付 wechat 官方接入文档 App内支付 源码下载 主要流程: 1.微信支付平台注册账号​ 注:注册并申请成功以后,需要在API安全中设置你的API密钥 32个字符.建议使用 MD5加密 ,并且需要妥善的保存.因为无法查看. 2.生成预支付订单 3.生成签名参数 4.调起微信,完成支付 扫码支付 扫码支付使用的是微信统一下单API ,使用的是模式二,模式一 一直说URL参数错误,完全按

  • Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)

    做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

  • Vue中实现过渡动画效果实例详解

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动

  • Android自定义view之围棋动画效果的实现

    前言 废话不多说直接开始 老规矩,文章最后有源码 完成效果图 棋子加渐变色 棋子不加渐变色 一.测量 1.获取宽高 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; useWidth = mWidth; if (mWidth > mHeight) { useWidth =

  • Android编程实现仿心跳动画效果的方法

    本文实例讲述了Android编程实现仿心跳动画效果的方法.分享给大家供大家参考,具体如下: // 按钮模拟心脏跳动 private void playHeartbeatAnimation() { AnimationSet animationSet = new AnimationSet(true); animationSet.addAnimation(new ScaleAnimation(1.0f, 1.8f, 1.0f, 1.8f, Animation.RELATIVE_TO_SELF, 0.5

  • Android自定义带加载动画效果的环状进度条

    最近闲来无事,自定义了一个环状进度条,话不多说直接上代码 : public class CircleProgressView extends View{ private Paint mCirPaint; private Paint mArcPaint; private Paint mTextPaint; private float radius=200; private int textsize=60; private int progress=68; private int stokeWidt

  • Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

随机推荐