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

 更新时间:2016年04月28日 17:39:20   转载 作者:viclee108  
这篇文章主要介绍了如何在Android应用中实现弹幕动画效果的实例,文中是利用RelativeLayout布局然后控制ViewGroup中view的显示,细节展示得比较详细,需要的朋友可以参考下

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

2016428173817427.gif (1280×720)

 从直观上,弹幕效果就是在一个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产生不同的滑动效果等等。

相关文章

  • android调用web service(cxf)实例应用详解

    android调用web service(cxf)实例应用详解

    Google为ndroid平台开发Web Service提供了支持,提供了Ksoap2-android相关架包接下来介绍android调用web service(cxf),感兴趣的朋友可以了解下
    2013-01-01
  • Android自定义ListView实现下拉刷新

    Android自定义ListView实现下拉刷新

    这篇文章主要为大家详细介绍了Android自定义ListView实现下拉刷新的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Activity 四种启动模式详细介绍

    Activity 四种启动模式详细介绍

    这篇文章主要介绍了Activity 四种启动模式详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02
  • Android开发之使用ExifInterface获取拍照后的图片属性

    Android开发之使用ExifInterface获取拍照后的图片属性

    这篇文章主要介绍了Android开发之使用ExifInterface获取拍照后的图片属性,较为详细的分析了ExifInterface类操作图片的具体使用技巧,需要的朋友可以参考下
    2016-01-01
  • Android仿泡泡窗实现下拉菜单条实例代码

    Android仿泡泡窗实现下拉菜单条实例代码

    最近参与android的项目开发,其中遇到这样的需求:点击下拉按钮,显示出所有的条目,有删除和点击功能,点击后将条目显示。下面通过实例代码给大家介绍下Android仿泡泡窗实现下拉菜单条效果,需要的朋友参考下吧
    2017-05-05
  • Android 开发程序锁应用简单实例

    Android 开发程序锁应用简单实例

    这篇文章主要介绍了Android 开发程序锁应用简单实例的相关资料,需要的朋友可以参考下
    2016-10-10
  • Android实现全局右滑返回

    Android实现全局右滑返回

    这篇文章主要为大家详细介绍了Android实现全局右滑返回,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • Android自定义View之继承TextView绘制背景

    Android自定义View之继承TextView绘制背景

    这篇文章主要为大家详细介绍了Android自定义View之继承TextView绘制背景的相关资料,需要的朋友可以参考下
    2016-05-05
  • Android图片裁剪功能实现代码

    Android图片裁剪功能实现代码

    这篇文章主要为大家详细介绍了Android图片裁剪功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Android底部菜单栏实现的实例代码

    Android底部菜单栏实现的实例代码

    这篇文章主要介绍了Android底部菜单栏实现的实例代码,本文通过使用RadioGroup来实现底部导航菜单栏。现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论