1

.storybook/webpack.config.js

@@ -5,5 +5,12 @@ module.exports = ({config, mode}) => {
     loaders: ["style-loader", "css-loader", "less-loader"],
     include: path.resolve(__dirname, '../')
   });
+  config.module.rules.push({
+    test: /\.(js|jsx|ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
   return config;
 }
\ No newline at end of file

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 9001 -c .storybook"
+    "storybook": "start-storybook -p 9003 -c .storybook"
   },
   "keywords": [],
   "author": "",

src/stories/danma/danmaCtrl.js

+import React from "react";
+
+/**
+ * 
+ * @param {*} DanmaItem 传入的弹幕Item Item
+ * @param {*} DanmaData 弹幕数据 [{},{}]
+ * @param {Array} speed 移动速度 [2,3,1,3]
+ * @param {*} DanmaItemWidth 弹幕Item宽度 200
+ * @param {*} DanmaItemHeight 弹幕Item高度/2 30
+ * @returns 不知道写了啥
+ */
+export default function DanmaCtrl(DanmaItem, DanmaData, speed, DanmaItemWidth, DanmaItemHeight) {
+  return class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        danmaItems: new Map()
+      }
+      this.pos = 350
+      this.top = DanmaItemHeight + 15
+      this.col = speed.length
+      /**  speed*(fixedTime-spaceTime)>DanmaItem.width  不重叠 */
+      this.speed = speed
+      this.fixedTime = 50
+      this.spaceTime = 50
+      this.i = 0
+      this.sendTaskMap = new Map()
+      this.totalMinusTime = 0
+      this.nowDanmaItems = new Map()
+      this.requestAnimationFrameId = null
+    }
+
+    componentDidMount() {
+      for (let i = 0; i < this.col * 2; i++) {
+        let t = (this.fixedTime + DanmaItemWidth / this.speed[i % this.col]) * Math.floor(i / this.col) + this.spaceTime * Math.random()
+        let data = {
+          danmaData: this.getDanmaData(),
+          t: t
+        }
+        this.sendTaskMap.set(i, data)
+      }
+      this.danmaMove()
+    }
+
+
+    getDanmaData() {
+      const data = {
+        danmaData: DanmaData[this.i % DanmaData.length],
+        i: this.i
+      }
+      this.i++
+      return data
+    }
+
+
+    sendDanma(data) {
+      const newDanmaItem = React.createElement(DanmaItem, {
+        key: data.i,
+        ...data.danmaData,
+        style: {
+          left: this.pos + "px",
+          top: this.top * (data.i % this.col) + "px"
+        }
+      })
+
+      this.nowDanmaItems.set(data.i, newDanmaItem)
+      this.setState({
+        danmaItems: this.nowDanmaItems
+      })
+    }
+    danmaMove = async () => {
+      this.totalMinusTime++
+      let danmaContainer = document.getElementById("danmaContainer")
+      if (danmaContainer) {
+        let danmaItems = danmaContainer.children
+        for (let i = danmaItems.length - 1; i >= 0; i--) {
+          let danmaItem = danmaItems[i]
+          danmaItem.style.left = danmaItem.offsetLeft - this.speed[Math.floor(danmaItem.offsetTop / this.top)] + 'px'
+          if (danmaItem.offsetLeft + danmaItem.offsetWidth < -100) {
+
+            let l = Math.floor(danmaItem.offsetTop / this.top)
+            let nowDanmaItems = this.state.danmaItems
+            for (let j = 0; j < this.i; j++) {
+              if (j % this.col == l) {
+                let v = nowDanmaItems.get(j)
+                if (v) {
+                  if (v == "remove") {
+                    break
+                  }
+                  nowDanmaItems.set(j, 'remove')
+                  break
+                }
+              }
+            }
+            this.nowDanmaItems = nowDanmaItems
+
+            let t = (this.fixedTime + DanmaItemWidth / this.speed[this.i % this.col]) * Math.floor(this.i / this.col) + this.spaceTime * Math.random() - this.totalMinusTime
+            let danmaData = this.getDanmaData()
+            let data = {
+              danmaData: danmaData,
+              t: t
+            }
+            this.sendTaskMap.set(this.i, data)
+          }
+        }
+      }
+      this.sendTaskMap.forEach((data, i) => {
+        let t = data.t--
+
+        if (t <= 0) {
+          this.sendDanma(data.danmaData)
+          this.sendTaskMap.delete(i)
+        }
+      })
+      this.requestAnimationFrameId = requestAnimationFrame(this.danmaMove)
+    }
+
+
+    map2arr = (map) => {
+      let arr = []
+      map.forEach((item, index) => {
+        if (item != 'remove') {
+          arr.push(item)
+        } else {
+          map.delete(index)
+        }
+      })
+      return arr
+    }
+
+
+    componentWillUnmount() {
+      this.requestAnimationFrameId && cancelAnimationFrame(this.requestAnimationFrameId)
+    }
+
+    render() {
+      let {
+        danmaItems
+      } = this.state
+      return (
+        <div id="danmaContainer" >
+          {this.map2arr(danmaItems)}
+        </div>
+      )
+    }
+  };
+}
\ No newline at end of file

src/stories/danma/danmaItem.jsx

+
+
+
+
+'use strict';
+
+import React, { Component } from 'react';
+
+import './danmaItem.less';
+
+class DanmaItem extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { danmaText, danmaAvatar, style } = this.props
+        return (
+            <div className="dan_mu_2 " style={style}>
+                <div className="gun_dong_xin_xi ">
+                    <img className="yuan_jiao_ju_xing_2389 " src={RES_PATH + '引导1/圆角矩形 2389.png'} />
+                    <span className="danmaText ">{danmaText}</span>
+                </div>
+                <div className="hao_you_tou_xiang ">
+                    <img className="tuo_yuan_2076_kao_bei " src={RES_PATH + '引导1/椭圆 2076 拷贝.png'} />
+                    <img
+                        className="danmaAvatar "
+                        src={danmaAvatar}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default DanmaItem;

src/stories/danma/danmaItem.less

+.dan_mu_2 {
+    width: 387px;
+    height: 69px;
+    position: absolute;
+
+    .gun_dong_xin_xi {
+        width: 364px;
+        height: 58px;
+        left: 23px;
+        top: 6px;
+        position: absolute;
+
+        .yuan_jiao_ju_xing_2389 {
+            width: 364px;
+            height: 58px;
+            left: 0px;
+            top: 0px;
+            opacity: 0.4;
+            position: absolute;
+        }
+
+        .danmaText {
+            width: 380px;
+            height: 26px;
+            left: 57px;
+            top: 14px;
+            position: absolute;
+            font-size: 20px;
+            color: #ffffff;
+        }
+    }
+
+    .hao_you_tou_xiang {
+        width: 69px;
+        height: 69px;
+        left: 0px;
+        top: 0px;
+        position: absolute;
+
+        .tuo_yuan_2076_kao_bei {
+            width: 69px;
+            height: 69px;
+            left: 0px;
+            top: 0px;
+            position: absolute;
+        }
+
+        .danmaAvatar {
+            width: 65px;
+            height: 65px;
+            border-radius: 100px;
+            left: 2px;
+            top: 2px;
+            position: absolute;
+        }
+    }
+}

src/stories/danma/danmaShowView.jsx

+import React, { useEffect, useState } from 'react'
+import DanmaCtrl from './danmaCtrl'
+import DanmaItem from './danmaItem'
+import './danmaShowView.less'
+
+
+const DanmaShowView = () => {
+
+    let text = `
+
+    let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
+    , "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg"
+    , "//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg"
+    , "//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg"
+    ,
+    "//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg"
+    , "//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg"
+    , "//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg"
+    , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+    , "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
+  ]
+  
+  let getPhoneNum = () => {
+    let phoneHead = [181, 156, 131, 176, 138, 135]
+    let head = phoneHead[Math.floor(Math.random() * phoneHead.length)]
+    let bottomNum = "" + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10))
+  
+    return head + "****" + bottomNum
+  }
+  let getPrize = () => {
+    let prizes = ["100元立减金", "电影票X4", "爱国者耳机", "5元立减金", "100元立减金"]
+    return prizes[(Math.floor(Math.random() * prizes.length))]
+  }
+  
+  
+  let danmaData = [{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
+  { danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] }]
+  
+   return DanmaCtrl(DanmaItem, danmaData, [1, 3, 2, 2, 4], 200, 26)
+  `
+
+    let Danma
+
+      Danma = new Function(text)
+      console.log("Danma",Danma())
+
+    return (
+        <>
+            <textarea className="codeText" name="code" >{text}</textarea>
+            <div className="view">
+                {console.log(Danma)}
+                {Danma && <Danma></Danma>}
+            </div>
+        </>
+    )
+}
+export default DanmaShowView
\ No newline at end of file

src/stories/danma/danmaShowView.less

+.codeText {
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+    display: inline-block;
+}
+
+.view {
+    width: 750px;
+    height: 1624px;
+    left: 780px;
+    background-color: aqua;
+    position: absolute;
+    display: inline-block;
+}
\ No newline at end of file