2. 程式人生 > >輕鬆又酷炫地實現彈幕效果——手把手教學

輕鬆又酷炫地實現彈幕效果——手把手教學

阿新 • • 發佈：2019-01-30

前言

現在越來越多的視訊網站或者客戶端支援彈幕功能，彈幕功能似乎也成了很多人的愛好，發彈幕，看彈幕成了大家吐槽、搞笑、發表看法的一種方式。

而國內彈幕的鼻祖應該就算A站和B站了。

彈幕（barrage），中文流行詞語，原意指用大量或少量火炮提供密集炮擊。而彈幕，顧名思義是指子彈多而形成的幕布，大量吐槽評論從螢幕飄過時效果看上去像是飛行射擊遊戲裡的彈幕。

最近一直在寫視訊播放器，那彈幕怎麼能少得了呢！所以把自己開發彈幕功能的思路寫出來與大家分享。

依舊還是先上效果圖：

這裡寫圖片描述

大體思路

我們的目標是將各式各樣的itemView展示到播放器上方，並且使之滾動起來，itemView支援自定義，這樣看起來和ListView的功能很相像

，但與之不一樣的是，彈幕是多行多列，需要計算每個itemView的位置，且一直在滾動。

所以，我採用介面卡模式，仿ListView的Adapter來實現彈幕功能。
想到這裡，很多人就會覺得這不典型的橫向瀑布流嘛，用RecyclerView或者flexbox很輕鬆就實現了。

但我想自己從設計模式、實現原理來考慮、設計，從而也可以更深刻地理解介面卡模式和ListView的原理，如果您想使用RecyclerView來實現，可以自己試試。

關鍵：

  • 使用介面卡模式將各式各樣的itemView進行適配、處理、展示
  • 使用hadler定時傳送訊息使itemView滾動
  • itemView最佳位置的計算
  • 滾動區域的設定

接下來就一起來實現：

1、實體類

實體類當然不能少了：

/**
 * Description: 彈幕實體類
 * Created by jia on 2017/9/25.
 * 人之所以能，是相信能
 */
public class DanmuModel {

    private int type;

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }
}

其中的type是model實體類的型別，因為彈幕的itemView中會有多種型別，對應不同type的實體類。

使用時可以自己定義實體類，繼承自DanmuModel ，也可以不繼承，只要能區分不同型別就可以：因為自己稍後的adapter中沒有像ListView的Adapter一樣定義了獲取item型別的方法，所以就在getView方法中依據type選擇不同的itemView即可。

2、BaseAdapter

這裡寫圖片描述

首先Adapter定義為抽象類，且設定泛型M，M就是對應的實體類。

在Adapter中定義三個抽象方法：

  1. getViewTypeArray ：獲取itemView的型別type組成的陣列
  2. getSingleLineHeight ：獲取單行itemView的高度
  3. getView ：獲取itemView，功能類似於ListView的Adapter中getView方法
public abstract class DanmuAdapter<M> {
    /**
     * 獲取型別陣列
     *
     * @return
     */
    public abstract int[] getViewTypeArray();

    /**
     * 獲取單行彈幕 高度
     *
     * @return
     */
    public abstract int getSingleLineHeight();

    /**
     * 獲取itemView
     *
     * @param entry
     * @param convertView
     * @return
     */
    public abstract View getView(M entry, View convertView);
}

這樣介面卡抽象類就定義好了嘛？不是的！

在顯示彈幕的時候會，會建立大量的View物件，如果不做處理，很容易造成記憶體溢位，所以我們要進行快取優化：

A、首先建立了map集合

// 使用HashMap，以型別和對應view的棧為key-value儲存，實現快取
private HashMap<Integer, Stack<View>> cacheViews;

以view的型別為key，對應的view存入棧中，以棧為value。

B、構造中

public DanmuAdapter() {
    cacheViews = new HashMap<>();
    typeArray = getViewTypeArray();
    for (int i = 0; i < typeArray.length; i++) {
        Stack<View> stack = new Stack<>();
        cacheViews.put(typeArray[i], stack);
    }
}

獲取itemView型別陣列，迴圈建立對應type的棧。

C、itemView加入快取

/**
  * 將彈幕itemView加入快取（壓棧）
  *
  * @param type
  * @param view
  */
synchronized public void addViewToCache(int type, View view) {
    if (cacheViews.containsKey(type)) {
        cacheViews.get(type).push(view);
    } else {
        throw new Error("your cache has not this type");
    }
}

D、將itemView移出快取

/**
* 將itemView移出快取（彈棧）
*
* @param type
* @return
*/
synchronized public View removeViewFromCache(int type) {
    if (cacheViews.containsKey(type) && cacheViews.get(type).size() > 0)
        return cacheViews.get(type).pop();
    else
        return null;
}

E、減小快取大小

/**
* 減小快取大小
*/
public void shrinkCacheSize() {
    int[] typeArray = getViewTypeArray();
    for (int i = 0; i < typeArray.length; i++) {
        if (cacheViews.containsKey(typeArray[i])) {
            Stack<View> typeStack = cacheViews.get(typeArray[i]);
            int length = typeStack.size();
            // 迴圈彈棧，直到大小變為原來一半
            while (typeStack.size() > (int) (length / 2.0 + 0.5)) {
                typeStack.pop();
            }
            cacheViews.put(typeArray[i], typeStack);
        }
    }
}

F、獲取快取大小

/**
* 獲取快取大小
*
* @return
*/
public int getCacheSize() {
    int size = 0;
    int[] types = getViewTypeArray();
    for (int i = 0; i < types.length; i++) {
        size = size + cacheViews.get(types[i]).size();
    }
    return size;
}

ok，到這裡BaseAdapter就封裝完成了

3、DanmuView

繼承自ViewGroup，重寫其三個構造方法是必然的。不再累贅

A、變數、以及get/set方法

// 移動速度
public static final int LOWER_SPEED = 1;
public static final int NORMAL_SPEED = 4;
public static final int HIGH_SPEED = 8;

// 出現位置
public final static int GRAVITY_TOP = 1;    //001
public final static int GRAVITY_CENTER = 2;  //010
public final static int GRAVITY_BOTTOM = 4;  //100
public final static int GRAVITY_FULL = 7;   //111

private int gravity = GRAVITY_FULL;

private int speed = 4;

private int spanCount = 6;

private int WIDTH, HEIGHT;

private int singltLineHeight;

private DanmuAdapter adapter;

public List<View> spanList;

private OnItemClickListener onItemClickListener;

首先要有這樣一個思路，在介面卡中抽取出方法，返回itemView的高度，在彈幕View中根據彈幕繪製區域高度，除以itemView的高度，算出合理的彈幕行數（這裡大家也理解了為什麼在寫介面卡的時候要定義getSingleLineHeight()方法了）。

B、再次封裝實體類

這裡只是簡單得將傳進來的實體類DanmuModel與計算出的對應的最佳行數進行封裝。

class InnerEntity {
    public int bestLine;
    public DanmuModel model;
}

C、設定Adapter

public void setAdapter(DanmuAdapter adapter) {
    this.adapter = adapter;
    singltLineHeight = adapter.getSingleLineHeight();
    // 開執行緒使彈幕滾動起來，稍後會介紹     
}

D、計算最佳位置

關鍵的來了，先上程式碼

    /**
     * 計算最佳位置
     *
     * @return
     */
    private int getBestLine() {
        // 轉換為2進位制
        int gewei = gravity % 2;
        int temp = gravity / 2;
        int shiwei = temp % 2;
        temp = temp / 2;
        int baiwei = temp % 2;

        // 將所有的行分為三份,前兩份行數相同,將第一份的行數四捨五入
        int firstLine = (int) (spanCount / 3.0 + 0.5);

        List<Integer> legalLines = new ArrayList<>();
        if (gewei == 1) {
            for (int i = 0; i < firstLine; i++) {
                legalLines.add(i);
            }
        }
        if (shiwei == 1) {
            for (int i = firstLine; i < firstLine * 2; i++) {
                legalLines.add(i);
            }
        }
        if (baiwei == 1) {
            for (int i = firstLine * 2; i < spanCount; i++) {
                legalLines.add(i);
            }
        }

        int bestLine = 0;
        // 如果有空行,將空行返回
        for (int i = 0; i < spanCount; i++) {
            if (spanList.get(i) == null) {
                bestLine = i;
                if (legalLines.contains(bestLine))
                    return bestLine;
            }
        }

        float minSpace = Integer.MAX_VALUE;
        // 沒有空行，就找最大空間的
        for (int i = spanCount - 1; i >= 0; i--) {
            if (legalLines.contains(i)) {
                if (spanList.get(i).getX() + spanList.get(i).getWidth() <= minSpace) {
                    minSpace = spanList.get(i).getX() + spanList.get(i).getWidth();
                    bestLine = i;
                }
            }
        }

        return bestLine;
    }

不知是否有注意到，在定義顯示位置的常亮的時候，只用了1，2，4，7，因為它們轉化為二進位制數為001，010，100，111，這裡用了一個巧妙的思路，三位數代表螢幕三個位置，0表示不顯示彈幕，1表示顯示彈幕（有沒有豁然開朗）

大家可以參照程式碼來看，計算最佳位置的思路是這樣的：

  1. 將設定的位置轉為二進位制數，判斷顯示位置
  2. 將所有的行分為三份,前兩份行數相同,將第一份的行數四捨五入，將所有要顯示彈幕的行數放入一集合中
  3. 由上至下迴圈判斷是否有空行，有空行則直接返回，此行就是這個itemView的最佳位置
  4. 沒有空行的話，由下至上尋找最大空間返回，就是該itemView的最佳位置

E、根據型別設定View

    /**
     * 新增view
     */
    public void addTypeView(DanmuModel model, View child, boolean isReused) {
        super.addView(child);
        child.measure(0, 0);
        //把寬高拿到，寬高都是包含ItemDecorate的尺寸
        int width = child.getMeasuredWidth();
        int height = child.getMeasuredHeight();

        //獲取最佳行數
        int bestLine = getBestLine();
        // 設定子view位置
        child.layout(WIDTH, singltLineHeight * bestLine, WIDTH + width, singltLineHeight * bestLine + height);

        InnerEntity innerEntity = null;
        innerEntity = (InnerEntity) child.getTag(R.id.tag_inner_entity);
        if (!isReused || innerEntity == null) {
            innerEntity = new InnerEntity();
        }
        innerEntity.model = model;
        innerEntity.bestLine = bestLine;
        child.setTag(R.id.tag_inner_entity, innerEntity);

        spanList.set(bestLine, child);
    }

這裡就不多說了，將itemView的model與最佳位置對應起來並設定位置；

然後將spanList（itemView集合）對應view設定進去。

一定要注意：super.addView(child); child.measure(0, 0); 這兩句話不能少！

F、新增彈幕

    /**
     * 新增彈幕view
     *
     * @param model
     */
    public void addDanmu(final DanmuModel model) {
        if (adapter == null) {
            throw new Error("DanmuAdapter(an interface need to be implemented) can't be null,you should call setAdapter firstly");
        }

        View dmView = null;
        if (adapter.getCacheSize() >= 1) {
            dmView = adapter.getView(model, adapter.removeViewFromCache(model.getType()));
            if (dmView == null)
                addTypeView(model, dmView, false);
            else
                addTypeView(model, dmView, true);
        } else {
            dmView = adapter.getView(model, null);
            addTypeView(model, dmView, false);
        }

        //新增監聽
        dmView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(onItemClickListener != null)
                    onItemClickListener.onItemClick(model);
            }
        });
    }

此方法則是暴露外部的設定彈幕view的方法，這裡注意一下，itemView有快取就複用，沒快取就不復用，就ok了。

G、子執行緒計算時間，傳送訊息，handler處理view平移

    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            int count = 0;
            Message msg = null;
            while(true){
                if(count < 7500){
                    count ++;
                }
                else{
                    count = 0;
                    if(DanmuView.this.getChildCount() < adapter.getCacheSize() / 2){
                        adapter.shrinkCacheSize();
                        System.gc();
                    }
                }
                if(DanmuView.this.getChildCount() >= 0){
                    msg = new Message();
                    msg.what = 1; //移動view
                    handler.sendMessage(msg);
                }

                try {
                    Thread.sleep(16);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }

        }
    }

這裡注意：
Adapter快取過大要及時清理；
每隔16毫秒讓itemView位置重新整理一次，這樣視覺效果好一些；
在setAdapter中開啟執行緒 new Thread(new MyRunnable()).start();

    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                for(int i=0;i<DanmuView.this.getChildCount();i++){
                    View view = DanmuView.this.getChildAt(i);
                    if(view.getX()+view.getWidth() >= 0)
                        // 向左滑動
                        view.offsetLeftAndRight(0 - speed);
                    else{
                        //新增到快取中
                        int type = ((InnerEntity)view.getTag(R.id.tag_inner_entity)).model.getType();
                        adapter.addViewToCache(type,view);
                        DanmuView.this.removeView(view);

                    }
                }
            }

        }
    };

使用舉例：

1、實體類

/**
 * Description:彈幕實體類
 * Created by jia on 2017/9/25.
 * 人之所以能，是相信能
 */
public class MyDanmuModel extends DanmuModel {

    public String content;
    public int textColor;
    public String time;

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }
}

2、介面卡

/**
 * Description: 彈幕介面卡
 * Created by jia on 2017/9/25.
 * 人之所以能，是相信能
 */
public class MyDanmuAdapter extends DanmuAdapter<MyDanmuModel> {

    private Context context;

    public MyDanmuAdapter(Context c){
        super();
        context = c;
    }

    @Override
    public int[] getViewTypeArray() {
        int type[] = {0};
        return type;
    }

    @Override
    public int getSingleLineHeight() {
        View view = LayoutInflater.from(context).inflate(R.layout.item_danmu, null);
        //指定行高
        view.measure(0, 0);

        return view.getMeasuredHeight();
    }

    @Override
    public View getView(MyDanmuModel entry, View convertView) {
        ViewHolder vh=null;
        if(convertView==null){
            convertView= LayoutInflater.from(context).inflate(R.layout.item_danmu,null);
            vh=new ViewHolder();
            vh.tv=convertView.findViewById(R.id.tv_danmu);
            convertView.setTag(vh);
        }else{
            vh= (ViewHolder) convertView.getTag();
        }

        vh.tv.setText(entry.getContent());
        vh.tv.setTextColor(entry.getTextColor());

        return convertView;
    }

    class ViewHolder{
        TextView tv;
    }
}

有木有很像ListView的Adapter！
相信大家一看就能明白，就不再多說。

3、配置基本資訊

jsplayer_danmu.setDanMuAdapter(new MyDanmuAdapter(this));
jsplayer_danmu.setDanMuGravity(3);
jsplayer_danmu.setDanMuSpeed(DanmuView.NORMAL_SPEED);

4、建立實體類並設定給DanmuView

MyDanmuModel danmuEntity = new MyDanmuModel();
danmuEntity.setType(0);
danmuEntity.setContent(DANMU[random.nextInt(8)]);
danmuEntity.setTextColor(COLOR[random.nextInt(4)]);
jsplayer_danmu.addDanmu(danmuEntity);

更多精彩內容，請關注我的微信公眾號——Android機動車
這裡寫圖片描述

相關推薦

輕鬆又酷炫地實現彈幕效果——手把手教學

前言 現在越來越多的視訊網站或者客戶端支援彈幕功能，彈幕功能似乎也成了很多人的愛好，發彈幕，看彈幕成了大家吐槽、搞笑、發表看法的一種方式。 而國內彈幕的鼻祖應該就算A站和B站了。 彈幕（barrage），中文流行詞語，原意指用大量或少量火炮提供密

純js 實現彈幕效果

彈幕時近幾年新興的一種技術，接下來我要展示的就是怎麼實現類似彈幕的效果。 先貼下效果圖： 說是效果，要拿出去用肯定是不行的。 先說一下是怎麼樣的實現方法。彈幕肯定是出現在螢幕上，所以我們暫時把出現彈幕的視窗稱為背景。 彈幕肯定儘量不能重疊在一起，所以我把整個彈幕出現的背

簡單實現彈幕效果

     首先分析一下，他是由三層佈局來共同完成的，第一層視訊佈局，第二層字幕布局，第三層輸入框佈局，要想讓這三個佈局在同一頁面上，必須用相對佈局或幀佈局。 <?xml version="1.0" encoding="utf-8"?> <RelativeL

使用Swoole中的WebSocket快速實現彈幕效果

WebSocket協議是基於TCP的一種新的網路協議。它實現了瀏覽器與伺服器全雙工(full-duplex)通訊——允許伺服器主動傳送資訊給客戶端。 具體詳細瞭解WebSocket可以檢視：WebS

【Web前端】用CSS3實現彈幕

font ram hover 字符 才會 命令 .sh left window 初版 用css3來實現彈幕確實比較簡單，只需要設置動畫讓彈幕從屏幕右側移動到屏幕左側即可，一開始是這樣實現的 .danmu { position: fixed; left: 100%

QML實現彈幕功能

彈幕在視訊網站上很流行。這裡用QML實現一下基本功能。主要用到了動畫以及動態建立元件的相關知識。 效果如下（圖片的動態效果不太好O(∩_∩)O哈哈~） 程式碼如下： import QtQuick 2.9 import QtQuick.Controls 2.2 ApplicationW

微信新玩法，只需三步就可以在朋友圈傳送豎排文字，好看又酷炫！

很多小夥伴喜歡用微信朋友圈來記錄生活中的點點滴滴，那麼如何才能讓自己的動態在朋友圈中看起來與眾不同呢？ 今天給小夥伴們分享一個有意思的微信小程式，只需幾步就能設定豎排文字，效果超棒，趕快一起學起來吧！   第一步：開啟微信小程式"文字豎排"，在文字框中輸入內容。 &n

新潮又酷炫，3D列印鞋離你有多遠？

新潮、酷炫，是很多時尚一族不變的追求與信仰。身為潮流達人的你，是否注意到近來在運動圈與3D列印圈頻繁曝光的新晉主角——3D列印鞋?譬如，輕盈舒適、拒絕水分的耐克Flyprint 3D，一體成型、無縫銜接的匹克FUTURE 3.0，實現了個性化定製的阿迪達斯Futurecraft 4D，更加輕便、更強抓地

新潮又酷炫，3D打印鞋離你有多遠？

進行 sha 自己的 帶來 一起 以及 ESS 是否 blog 新潮、酷炫，是很多時尚一族不變的追求與信仰。身為潮流達人的你，是否註意到近來在運動圈與3D打印圈頻繁曝光的新晉主角——3D打印鞋?譬如，輕盈舒適、拒絕水分的耐克Flyprint 3D，一體成型、無縫銜接的

基於Electron + nodejs + 小程式 實現彈幕小工具（開篇）

前言 彈幕（barrage），中文流行詞語，指的是在網路上觀看視訊時彈出的評論性字幕。類似小說中行間彰顯的夾批，視訊中屏間飄過的評點叫做彈幕，原意指用大量或少量火炮提供密集炮擊。而彈幕，顧名思義是指子彈多而形成的幕布，大量吐槽評論從螢幕飄過時效果看上去像是飛行射擊遊戲裡的彈幕。 很久以前，彈幕還

基於Electron + nodejs + 小程式 實現彈幕小工具（上篇）

前言 上一篇文章，大概講述我們即將要做的彈幕小工具是什麼樣的，將使用什麼樣的技術。那麼，從這一篇開始，我們將一步步把想法落地成程式碼。本文，我們將使用Electron實現接收端，讓我們的彈幕飛起來。 效果圖 如上圖所示，把放映PPT的同時，使用者可以通過掃描小程式二維碼，實時發表自己的

基於Electron + nodejs + 小程式 實現彈幕小工具（中篇）

前言 基於Electron + nodejs + 小程式 實現彈幕小工具（開篇） 基於Electron + nodejs + 小程式 實現彈幕小工具（上篇) 上兩篇文章，分別對產品需求和Electron端的實現做了相關的介紹，有興趣的朋友可以看看之前的文章。本文，將介紹服務端的實現。 需求

基於Electron + nodejs + 小程式 實現彈幕小工具（下篇）

前言 接著前面的文章，我們來講彈幕小工具的最後一篇。用小程式來實現彈幕的傳送端，傳送端的需求很簡單：一個簡單的小程式，把使用者要輸入的彈幕內容轉發給nodejs端，使用者雙擊發送按鈕時，預設傳送666。 效果圖 小程式就只有這兩個頁面，非常簡單，使用者掃碼首次進入需要授權

基於Electron + nodejs + 小程式 實現彈幕小工具（終篇）

前言 首先說明一下，本文無干貨，不喜勿噴。 本文是彈幕小工具系列的最後一篇文章，主要是做一下歸檔和總結。 本系列，我們從零開始實現一個簡單可用的彈幕小工具，目前已部署在線上環境，有興趣的朋友可以下載體驗，掃碼即用，十分方便。當然，對實現有興趣的也可以查閱原始碼。 下載體驗 搶先體驗版 專案原始碼

Android彈幕功能實現，模仿鬥魚直播的彈幕效果

記得之前有位朋友在我的公眾號裡問過我，像直播的那種彈幕功能該如何實現？如今直播行業確實是非常火爆啊，大大小小的公司都要涉足一下直播的領域，用鬥魚的話來講，現在就是千播之戰。而彈幕則無疑是直播功能當中最為重要的一個功能之一，那麼今天，我就帶著大家一起來實現一個簡單的Androi

Android開發之實現最簡單最酷炫的3D圖片瀏覽效果(一)

一、原理 整體實現是以手機螢幕的正中間位置為對稱軸，位於正中間的圖片顯示最大，也最亮，同時左右兩邊的圖片以最中間位置為對稱軸，分別旋轉對應的角度，同時亮度調整為適當的比例，已達到對稱的效果。具體的3D瀏覽圖片效果，我是通過自定義Gallery來實現的，建立一個類Galler

酷炫MQTT實現訊息推送

首先在實現本功能之前我們需要儲備一下預備知識，大家可以看我的前兩篇文章以及官網,瞭解MQTT的基本常識： MQTT入門篇 在步入正題之前先給大家發放個福利，介紹一款MQTT外掛：MQTTLens 。 MQTTLens外掛的使用 1.安裝：

Android開發之實現最簡單最酷炫的3D圖片瀏覽效果(二)

          （一）截圖                      （二）實現關鍵：           1、改寫Gallery，實現圖片的層疊和透明度漸變。 主要是改寫getChildStaticTransformation方法           2、對圖片進行

Android之——史上最簡單最酷炫的3D圖片瀏覽效果的實現

如今，Android開發已經成為移動互聯開發領域中一支不可或缺的力量，那麼Android中要實現3D的效果那也就是合情合理的事情了。那麼，如何在Android中實現像IOS中那樣的3D圖片瀏覽效果呢？下面，鄙人將重磅推出今天的重點博文，和大家一起在Android中實現酷炫

（資料科學學習手札85）Python+Kepler.gl輕鬆製作酷炫路徑動畫

> 本文示例程式碼、資料已上傳至我的`Github`倉庫[https://github.com/CNFeffery/DataScienceStudyNotes](https://github.com/CNFeffery/DataScienceStudyNotes) # 1 簡介 　　`Kepler.gl`