热门搜索:
您现在的位置是：首页 > 文章详情

rc-bullets —— React 弹幕组件

日期：2021-04-26点击：1213

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>
原文链接：https://www.oschina.net/p/rc-bullets
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。

相关文章

    文章评论

    共有0条评论来说两句吧...

    文章二维码

    扫描即可查看该文章

    点击排行

    推荐阅读

    最新文章