首页 > 系统 > Android > 正文

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

2019-12-12 06:28:11
字体:
来源:转载
供稿:网友

在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产生不同的滑动效果等等。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表