快捷導(dǎo)航

實(shí)例解析如何在Android應(yīng)用中實(shí)現(xiàn)彈幕動畫效果

更新時(shí)間：2016年04月28日 17:39:20 作者：viclee108

這篇文章主要介紹了如何在Android應(yīng)用中實(shí)現(xiàn)彈幕動畫效果的實(shí)例,文中是利用RelativeLayout布局然后控制ViewGroup中view的顯示,細(xì)節(jié)展示得比較詳細(xì),需要的朋友可以參考下

在B站或者其他視頻網(wǎng)站看視頻時(shí)，常常會打開彈幕效果，邊看節(jié)目邊看大家的吐槽。彈幕看起來很有意思，今天我們就來實(shí)現(xiàn)一個(gè)簡單的彈幕效果。

2016428173817427.gif (1280×720)

從直觀上，彈幕效果就是在一個(gè)ViewGroup上增加一些View，然后讓這些View移動起來。所以，整體的實(shí)現(xiàn)思路大概是這樣的：
1、定義一個(gè)RelativeLayout，在里面動態(tài)添加TextView。
2、這些TextView的字體大小、顏色、移動速度、初始位置都是隨機(jī)的。
3、將TextView添加到RelativeLayout的右邊緣，每隔一段時(shí)間添加一個(gè)。
4、對每個(gè)TextView做平移動畫，使得TextView從右向左移動。
5、當(dāng)TextView從左邊移動出屏幕，將TextView從RelativeLayout中移除。
有了思路下面就來看具體的代碼。
首先定義BarrageItem，用來存儲每一個(gè)彈幕項(xiàng)的相關(guān)信息，包括字體內(nèi)容、字體大小顏色、移動速度、垂直方向的位置、字體占據(jù)的寬度等。

public class BarrageItem { 
  public TextView textView; 
  public int textColor; 
  public String text; 
  public int textSize; 
  public int moveSpeed;//移動速度 
  public int verticalPos;//垂直方向顯示的位置 
  public int textMeasuredWidth;//字體顯示占據(jù)的寬度 
}

然后定義BarrageView，由于彈幕的字體顏色大小和移動速度都是隨機(jī)的，需要定義最大最小值來限定它們的范圍，然后通過產(chǎn)生隨機(jī)數(shù)來設(shè)置它們在這個(gè)范圍內(nèi)的值。另外還需要定義彈幕的文本內(nèi)容，這里是直接寫死的一些固定值。

  private Context mContext; 
  private BarrageHandler mHandler = new BarrageHandler(); 
  private Random random = new Random(System.currentTimeMillis()); 
  private static final long BARRAGE_GAP_MIN_DURATION = 1000;//兩個(gè)彈幕的最小間隔時(shí)間 
  private static final long BARRAGE_GAP_MAX_DURATION = 2000;//兩個(gè)彈幕的最大間隔時(shí)間 
  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;//彈幕的行數(shù) 
  private String[] itemText = {"是否需要幫忙", "what are you 弄啥來", "哈哈哈哈哈哈哈", "搶占沙發(fā)。。。。。。", "************", "是否需要幫忙","我不會輕易的狗帶", "嘿嘿", "這是我見過的最長長長長長長長長長長長的評論"}; 
  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(); 
  }

如果彈幕顯示的垂直位置是隨機(jī)的，就會出現(xiàn)垂直方向上彈幕重疊的情況，所以需要根據(jù)高度對垂直方向按照彈幕高度的最大值等分，然后讓彈幕在這些指定的垂直位置隨機(jī)分布。這個(gè)值在onWindowFocusChanged里計(jì)算，因?yàn)樵谶@個(gè)方法中通過View的getMeasuredHeight()得到的高度不為空。

@Override 
public void onWindowFocusChanged(boolean hasWindowFocus) { 
  super.onWindowFocusChanged(hasWindowFocus); 
  totalHeight = getMeasuredHeight(); 
  lineHeight = getLineHeight(); 
  totalLine = totalHeight / lineHeight; 
} 
    通過Handler的sendEmptyMessageDelayed每隔隨機(jī)的時(shí)間產(chǎn)生一個(gè)彈幕項(xiàng)。下面的代碼設(shè)置彈幕項(xiàng)的屬性。
 
class BarrageHandler extends Handler { 
  @Override 
  public void handleMessage(Message msg) { 
    super.handleMessage(msg); 
    generateItem(); 
    //每個(gè)彈幕產(chǎn)生的間隔時(shí)間隨機(jī) 
    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); 
}

將每一個(gè)彈幕項(xiàng)添加到視圖上，并給View添加一個(gè)TranslateAnimation動畫，當(dāng)動畫結(jié)束時(shí)，將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; 
  }

這樣就完成了彈幕的功能，實(shí)現(xiàn)原理并不復(fù)雜。可以根據(jù)具體的需求來增加更多的控制，如控制每一行彈幕不重復(fù)，控制彈幕移動的Interpolator產(chǎn)生不同的滑動效果等等。

您可能感興趣的文章: