彈幕的實現

2022-06-02 18:39:10 字數 762 閱讀 3052

一、前言

今天瀏覽某**看到乙個活動頁有內嵌的彈幕模組(圖一),但是看到移動的彈幕重疊很多,不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕,就翻出來看了一下,呵,也是不忍直視的,最後再附上當年的效果以及**;

二、大話幾點

5、彈幕的後台實現可以通過websocket實現,當然也可以借助node實現。當使用者輸入彈幕,彈幕需經過特殊處理,比如經過第三方(數美等)過濾敏感關鍵字等,最後再把內容下發,觜最後展示;

三、思考:怎麼做到彈幕均勻排布,不會重疊呢?還有速度控制問題。

1、可以想象把彈幕面板分成幾個管道,每條彈幕隨機分配(當然不是簡單的隨機,應該加上點概率論的知識)到每條管道中,當前方有彈幕時候,該彈幕的位置就要與前方彈幕保持一定計算的距離;

2、每條彈幕的速速要結合當前彈幕的長度和移動的位置去動態的新增初始速度,當然執行速度可以可以有linear ease-in ease-out ...等把控;

四、最後

很久前寫的彈幕,沒有對彈幕分布和速度進行把控,當然也沒有後台,純粹前端展示了,我就不折騰了。

傳送

彈幕功能的實現

在做專案的時候用到了彈幕功能 彈幕的字型大小和顏色也都是隨機的,奉上 html 彈幕 css tool switch container switch type checkbox type radio tool switch container labeljs switch 彈幕 switch la...

彈幕的實現(純前端)

一 前言 今天瀏覽某 看到乙個活動頁有內嵌的彈幕模組 圖一 但是看到移動的彈幕重疊很多,不忍直視啊。突然想起很久之前自己寫寫過類似的彈幕,就翻出來看了一下,呵,也是不忍直視的,最後再附上當年的效果以及 二 大話幾點 5 彈幕的後台實現可以通過websocket實現,當然也可以借助node實現。當使用...

關於彈幕效果的實現

doctype html html lang en head meta charset utf 8 title title title style content bottomcon txt btn span style head body div class content div class b...