diff --git a/src/BulletScreen.js b/src/BulletScreen.js index 1e6799b..49908d8 100644 --- a/src/BulletScreen.js +++ b/src/BulletScreen.js @@ -1,11 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { options, initBulletAnimate, isPlainObject, getContainer } from './helper'; +import { defaultOptions, initBulletAnimate, isPlainObject, getContainer } from './helper'; import StyledBullet from './StyledBullet'; export default class BulletScreen { target = null; - options = options; + options = defaultOptions; bullets = []; allPaused = false; allHide = false; @@ -14,7 +14,8 @@ export default class BulletScreen { constructor(ele, opts = {}) { // 更新默认配置项 this.options = Object.assign(this.options, opts); - const { trackHeight } = this.options; + console.log('construction ' + this.options.animate) + const { trackHeight, animate } = this.options; // 设置弹幕目标 if (typeof ele === 'string') { this.target = document.querySelector(ele); @@ -36,7 +37,9 @@ export default class BulletScreen { // this.target.style.overflow = 'hidden'; } // 插入css animation - initBulletAnimate(this.target); + console.log(animate) + initBulletAnimate(this.target, 'RightToLeft'); + initBulletAnimate(this.target, 'Suspension') } _getTrack() { let readyIdxs = []; @@ -67,9 +70,16 @@ export default class BulletScreen { } push(item, opts = {}) { - const options = Object.assign({}, this.options, opts); + console.log(this) + console.log('this ' + this.options.animate) + console.log('default ' + opts.animate) + let options = Object.assign({}, this.options, opts); + console.log({ options }); + if (opts.animate) options.animate = opts.animate + console.log('push ' + options.animate) + const { onStart, onEnd, top } = options; const bulletContainer = getContainer({ ...options, diff --git a/src/helper.js b/src/helper.js index 08f401a..316f547 100644 --- a/src/helper.js +++ b/src/helper.js @@ -1,19 +1,32 @@ import convert from 'color-convert'; -const initBulletAnimate = screen => { +const initBulletAnimate = (screen, animateName='RightToLeft') => { if (!screen) { return; } - const animateClass = 'BULLET_ANIMATE'; + const animateClass = { + RightToLeft: 'BULLET_ANIMATE_RIGHT_TO_LEFT', + Suspension: 'BULLET_ANIMATE_SUSPENSION' + }; let style = document.createElement('style'); - style.classList.add(animateClass); + style.classList.add(animateClass[animateName]); document.head.appendChild(style); + // eslint-disable-next-line no-unused-vars let { width } = screen.getBoundingClientRect(); - let from = `from { visibility: visible; transform: translateX(${width}px); }`; - let to = `to { visibility: visible; transform: translateX(-100%); }`; - style.sheet.insertRule(`@keyframes RightToLeft { ${from} ${to} }`, 0); - + const RightToLeftRule = `@keyframes RightToLeft { + from { visibility: visible; transform: translateX(${width}px); } + to { visibility: visible; transform: translateX(-100%); } + }`; + const SuspensionRule = `@keyframes Suspension { + from { visibility: visible; transform: translateX(calc(${width/2}px - 50%)); } + to { visibility: visible; transform: translateX(calc(${width/2}px - 50%)); } + }`; + const RuleSet = { + RightToLeft: RightToLeftRule, + Suspension: SuspensionRule + } + style.sheet.insertRule(RuleSet[animateName]) }; const isPlainObject = val => { if (val === null) { @@ -49,6 +62,7 @@ const getContainer = opts => { // bulletContainer.style.zIndex = zIndex; bulletContainer.style.visibility = 'hidden'; bulletContainer.style.animationName = animate; + console.log(animate) bulletContainer.style.animationIterationCount = loopCount; bulletContainer.style.animationDelay = isNaN(delay) ? delay : `${delay}s`; bulletContainer.style.animationDirection = direction; @@ -138,7 +152,7 @@ function getCorrectTextColor(rgb = [0, 0, 0]) { } } -const options = { +const defaultOptions = { // 跑道高度 trackHeight: 50, // 弹幕之间的间距 @@ -154,4 +168,4 @@ const options = { direction: 'normal', animateTimeFun: 'linear' }; -export { options, initBulletAnimate, isPlainObject, getContainer, getCorrectTextColor }; +export { defaultOptions, initBulletAnimate, isPlainObject, getContainer, getCorrectTextColor };