實(shí)現(xiàn)彈幕很難嗎？
【公眾號(hào)回復(fù) “1024”，免費(fèi)領(lǐng)取程序員賺錢實(shí)操經(jīng)驗(yàn)】
今天推薦的這個(gè)項(xiàng)目是 rc-bullets。
該項(xiàng)目基于 CSS3 Animation，使用 React 構(gòu)建，可擴(kuò)展，高性能。
它有如下特性：
支持傳入 React 組件，靈活控制彈幕內(nèi)容和 UI，并提供一個(gè)默認(rèn)樣式組件：
彈幕屏幕管理：清屏，暫停，隱藏（后續(xù)可能會(huì)加入針對(duì)單個(gè)彈幕的控制）
彈幕動(dòng)畫參數(shù)化：運(yùn)動(dòng)函數(shù)（勻速/ease/步進(jìn)/cubic-bezier）、時(shí)長(zhǎng)（秒）、循環(huán)次數(shù)、延遲等
鼠標(biāo)懸浮彈幕暫停
常用 API：
初始化彈幕屏幕：
const screen = new BulletScreen(
|
,[
此處的option和下面的一致，偏向全局初始化，沒有則使用默認(rèn)值，每次發(fā)送彈幕不傳則使用默認(rèn)或全局設(shè)置，傳了則該條彈幕覆蓋全局設(shè)置。
發(fā)送彈幕：
const bulletId = screen.push(
|
,[
看一下效果：
點(diǎn)擊閱讀原文，查看更多更詳細(xì)內(nèi)容。
開源項(xiàng)目地址： https://github.com/zerosoul/rc-bullets
開源項(xiàng)目作者：Tristan Yang
推薦閱讀：
這位同學(xué)，通過這個(gè)開源項(xiàng)目，竟然拿到了字節(jié)跳動(dòng)的 offer ！
今天的推薦不知道大家喜歡嗎？如果你喜歡，請(qǐng)?jiān)谖恼碌撞苛粞院忘c(diǎn)贊，以表示對(duì)我的支持，你們的留言、點(diǎn)贊和轉(zhuǎn)發(fā)關(guān)注是我持續(xù)更新的動(dòng)力哦！
「GitHub精選」，每晚10:24準(zhǔn)時(shí)為您推送