React 弹幕组件 rc-bullets

MIT
JavaScript
跨平台
2019-12-19
华尔666

rc-bullets 是一个基于 CSS3 Animation,使用 React 构建的可扩展、高性能弹幕组件。

特性

  • 支持传入 React 组件,灵活控制弹幕内容和 UI,并提供一个默认样式组件:<StyledBullet/>
  • 弹幕屏幕管理:清屏,暂停,隐藏(后续可能会加入针对单个弹幕的控制)
  • 弹幕动画参数化:运动函数(匀速/ease/步进/cubic-bezier)、时长(秒)、循环次数、延迟等
  • 鼠标悬浮弹幕暂停

常用 API

  • 初始化弹幕屏幕:const screen = new BulletScreen(<queryString>|<HTMLElement>,[<option>]),此处的option和下面的一致,偏向全局初始化,没有则使用默认值,每次发送弹幕不传则使用默认或全局设置,传了则该条弹幕覆盖全局设置。
  • 发送弹幕:const bulletId = screen.push(<string>|<ReactElement>,[<option>])

option

选项 含义 值类型 默认值 备注
top 弹幕位置 string undefined 自已强制定制距离顶部的高度,格式同CSS中的top
trackHeight 轨道高度 string 50px 均分轨道的高度
onStart 自定义动画开始函数 function null e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效,在特定时间暂停该弹幕:screen.pause(bulletId)
onEnd 自定义动画结束函数 function null e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效
pauseOnClick 鼠标点击暂停 boolean false 再次点击继续
pauseOnHover 鼠标悬停暂停 boolean true 鼠标进入暂停,离开继续
loopCount 循环次数 number/string 1 值为‘infinite’时,表示无限循环
duration 滚动时长 number/string 10 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位
delay 延迟 number/string 0 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位
direction 动画方向 string normal animation-direction支持的所有值
animateTimeFun 动画函数 string linear:匀速 animation-timing-function支持的所有值
  • 弹幕清屏:screen.clear([<bulletId>]),无参则清除全部
  • 暂停弹幕:screen.pause([<bulletId>]),无参则暂停全部
  • 弹幕继续:screen.resume([<bulletId>]),无参则继续全部
  • 隐藏弹幕(滚动继续):screen.hide([<bulletId>]),无参则隐藏全部
  • 显示弹幕:screen.show([<bulletId>]),无参则显示全部
  • 自带的一个弹幕样式组件:<StyledBullet msg="<弹幕内容>" head="<头像地址>" color="<字体颜色>" backgroundColor="<背景色>" size="<尺寸:small|normal|large|huge|自定义大小,基于em机制,默认normal>
的码云指数为
超过 的项目
加载中
请先登录后再评论。

暂无资讯

暂无问答

ubuntu rc0-rc6

开机自动启动项

2016/01/20 11:44
4
1
RC Immix

[toc] RC Immix Rifat Shariyar等,Reference Counting Immix,2013 目的 RC Immix算法将引用计数的一大缺点(吞吐量低)改善到了实用的级别。本算法改善了引用计数算法的“合并型引用计数法...

2018/12/18 15:19
9
0
Kubernetes概念之RC

感觉自己浪费了一年的时间,种一棵树最好的时间是十年前,还有就是现在,虽然这颗树种了又种,种了又种,这次真的要种了...... 本文通过《Kubernetes权威指南》的概念部分学习总结 RC(Repli...

2019/09/18 18:02
9
0
STA之RC Corner

RC corner,这里的RC指gate跟network的寄生参数,寄生参数抽取工具根据电路的物理信息,抽取出电路的电阻电容值,再以寄生参数文件输入给STA工具,常见的寄生参数文件格式为SPEF。 ICer都知道...

2019/08/27 23:06
12
0
我需要一个没有任何项目符号的无序列表 - I need an unordered list without any bullets

问题: I have created an unordered list. 我创建了一个无序列表。 I feel the bullets in the unordered list are bothersome, so I want to remove them. 我觉得无序列表中的项目符号很麻...

06/01 08:32
7
0
Rc 类型总结

ref: alloc::rc::Rc - Rust <!-- toc --> 方法 new pin try_unwrap into_raw from_raw downgrade weak_count strong_count get_mut ptr_eq make_mut downcast <!-- tocstop --> std::rc::Rc...

02/01 17:44
57
0
STA之RC网

STA的主要工作是计算电路网络的延时,如今的电路网络还是由CMOS cell和net组成的,所以STA所要计算的延时仍是电容的充放电时间。等量子计算机普及的时候,如今的这一套理论都将随着科技的进步...

2019/08/21 23:12
0
0
Linux /etc/rc.local

/etc/rc.d 里面存放了rc.local、rc.sysinit、init.d,、rcX.d (X包括0-6对应相对runlevel) #查看默认 runlevel [root@payun rc.d]# cat /etc/inittab  # inittab is only used b...

2015/09/21 23:32
61
0
Visual Studio 2019 RC

Visual Studio 2019 RC入门 介绍 在本文中,让我们看看如何开始使用Visual Studio 2019 RC。Microsoft现已发布Visual Studio Release Candidate,现在可以下载了。最初,Microsoft开始发布V...

2019/04/03 19:08
7
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部