仿视频网站弹幕效果

一、需求

开发一个类似bilibili的视频弹幕效果。网上有bilibili的开源项目。那么我们要实现一个简易的，应该怎么办呢？
有办法的，先看效果：

二、分析

最直接的办法是自定义一个ScreenView作为幕布，然后绘制一个个的子弹（每一个view，暂且这么叫），但是想想一个个的draw，效率应该不高。
换成自定义ViewGroup，然后创建一个个的子弹view add进去，确定子弹的left和top就好了，然后view自己去执行动画，起始和终点位置也很好确定：

起点：就是屏幕宽度
终点：距屏幕左边子弹（每一个view，暂且这么叫）宽度的长度

子弹的left很好确定，就是屏幕宽度，但是top怎么办？
我们可以按幕布的高度去随机一个值，但是随机值得话有风险，子弹会重叠。
那就先按子弹的高度去划分屏幕，把屏幕分成固定的行数，然后判断随机的值落在哪一行。
还有一个问题，子弹和子弹之间是有空隙的，随机值落在空隙之间怎么办？
这个很好处理，落在空隙之间的数值全部计为-1，只要是-1就重新random。
说了这么多一步步的看代码怎么实现吧。

三、代码实现

3.1 子弹view

别的不管，先画布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="wrap_content"
              android:layout_height="36dp"
              android:background="@drawable/bg_bullet_view"
              android:padding="4dp"
              android:gravity="center_vertical"
    >
    <ImageView
        android:id="@+id/iv_head_view"
        android:layout_width="28dp"
        android:layout_height="28dp"
        android:src="@mipmap/headview"
        />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="很好看"
        android:textSize="14sp"
        android:layout_marginLeft="4dp"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/zan"
        android:layout_marginLeft="10dp"
        />

    <TextView
        android:id="@+id/tv_zan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="254"
        android:textSize="12sp"
        android:layout_marginRight="6dp"
        android:layout_marginLeft="2dp"
        />
LinearLayout>

一个头像，一个标题加上一个赞数，很常见的样式。再看子弹view的代码：

public class BulletView extends LinearLayout {

    private ImageView ivHeadView;           //头像
    private TextView tvTitle;               //标题
    private TextView tvZan;                 //赞数
    private ObjectAnimator animator;        //动画
    private float animatedValue;            //记录当前动画的移动值
    private Bullet bullet;                  //子弹数据
    private int line;                       //记录所在的行数
    private Point startPoint;               //开始点
    private Point endPoint;                 //终点
    private OnAllShowInScreen listener;     //动画监听
    private boolean hasClear = false;       //标记  标记是否移除了起始位置的子弹
}

这里最重要的是一个属性动画属性，就是说每一个子弹都有一个动作，从屏幕右边移动到屏幕左边。先不管动画，先看怎么把子弹添加进幕布。

3.2 幕布的创建

在幕布里用到一个生产者消费者的知识，我们需要开启一个线程相当于是消费者，一直消费子弹，而主线程就要不断的添加子弹，类似于生产者。
主线程我们可以手动控制添加，不需要等待，但是消费者不一样，没有子弹的时候，他需要等待，我们添加了新的子弹去唤醒他消费，每消费一个子弹，我们就往幕布增加一个子弹view。
这是第一种需要等待的情况，还有一种是子弹过多，屏幕上所有的行数都有子弹正在执行开始动画的时候，消费子弹的也需要等待。注意是开始动画而不是所有行数都有动画的时候，这是为了避免新添加的子弹view覆盖正在执行开始动画的子弹view。
挑主要的代码看：

public class BulletScreenView extends FrameLayout {
    ...

    private List bullets = new ArrayList<>();           //子弹仓库
    private List rightRect = new ArrayList<>();           //随机的高度值所在的rect
    private List> lines = new ArrayList<>();       //每一行正在执行开始动画的子弹
    private List lineBullets = new ArrayList<>();       //所有行正在执行开始动画的子弹

    // 锁
    private final Lock lock = new ReentrantLock();
    // 消费者状态
    private final Condition consumer = lock.newCondition();

    ...
}

幕布view中这四个变量非常重要，第四个和第三也不是重复，避免了大量遍历。
一个个看，bullets就是存储所有添加进来的子弹，看暴漏的方法：

    /**
     * 添加子弹
     * @param bs
     */
    public void addBullet(List bs) {
        lock.lock();
        bullets.addAll(bs);
        consumer.signal();
        lock.unlock();
    }

前后加锁，只要有新子弹进来就去通知消费者线程，看消费者线程做了啥：

    /**
     * 消耗线程
     */
    public class ConsumerThread extends Thread {
        @Override
        public void run() {
            while (true){
                lock.lock();
                while (bullets.size() == 0 || lineBullets.size() == lineCount) {
                    try {
                        consumer.await();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
                Bullet bullet = bullets.remove(0);
                initBulletView(bullet);
                lineBullets.add(bullet);
                handler.obtainMessage(0, bullet).sendToTarget();

                lock.unlock();
            }
        }
    }

死循环里面，还是加锁，然后while下的判断条件，当子弹仓库为空或者所有行开始动画个数等于个数的时候，消费者进入等待，否则就去取第一个子弹，然后初始化子弹view，这个时候需要把这个子弹view添加进所有行开始动画的lineBullets里面记录下来，还发出去一个handler消息。
1. 初始化子弹view做了啥；
2. handler做了啥。
首先看第一个代码：

    /**
     * 初始化子弹view
     * @param bullet
     */
    private void initBulletView(Bullet bullet) {
        //随机高度
        double randomHeight = Math.random() * mHeight;
        //判断在哪一行
        int currentLine = seekLine(randomHeight);
        //如果行数等于-1 说明不合法 循环取
        while (currentLine == -1){
            randomHeight = Math.random() * mHeight;
            currentLine = seekLine(randomHeight);
        }
        //如果这一行没有开始动画，直接初始化子弹
        if (lines.get(currentLine).size() == 0) {
            BulletView bulletView = new BulletView(mContext);
            LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            // 找到当前行的top值
            params.topMargin = seekLineTop(randomHeight);
            bulletView.setLine(currentLine);
            //设置动画监听
            bulletView.setListener(new BulletView.OnAllShowInScreen() {
                @Override
                public void onAllShow(BulletView bulletView) {
                    lock.lock();
                    int measuredWidth1 = bulletView.getMeasuredWidth();
                    // 如果动画执行到 子弹完全暴漏在幕布上 的位置，那么这一行的 开始动画记录要清掉了
                    if (bulletView.getAnimatedValue() < mWidth - measuredWidth1) {
                        //是否清除过了，因为动画后续会一直进入这里  但是清除只需要清一次
                        if(!bulletView.isHasClear()) {
                            int line = bulletView.getLine();
                            //当前行记录动画清除
                            lines.get(line).clear();
                            //总开始动画记录也清掉
                            lineBullets.remove(bulletView.getBullet());
                            consumer.signal();
                            bulletView.setHasClear(true);
                        }
                    }
                    lock.unlock();
                }
            });
            bulletView.setLayoutParams(params);
            // 记录 当前行 开始动画
            lines.get(currentLine).add(bullet);
            bullet.setBulletView(bulletView);
        } else {
            //否则调用自己 重新选择行数
            initBulletView(bullet);
        }
    }

动画回调里面有一个consumer.signal();就是一旦有行数空一个位置出来，就去通知消费者送一个子弹过来。
那么handler做了啥呢？

    /**
     * 主线程刷新UI
     */
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 0:
                    Bullet obj = (Bullet) msg.obj;
                    BulletView bulletView = obj.getBulletView();
                    bulletView.setData(obj);
                    int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
                    bulletView.measure(spec, spec);
                    int measuredWidth = bulletView.getMeasuredWidth();
                    bulletView.startAnim(new Point(mWidth, y), new Point(-measuredWidth, y), 5000);
                    addView(bulletView);
                    break;
            }
        }
    };

设置数据之后，计算出这时候子弹的长度就比较精确了。然后开启子弹的动画，并把子弹add进布局。子弹的view我们已经记录在子弹里面了。到这里就是完整的思路了。

更多代码看GayHub，有兴趣试一试。

很多视频的弹幕触摸还有暂停，松开继续跑的需求没加了，用记录的动画位置就可以做到，不写了。感谢看到这里。