Suspension mode added

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,

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 };