水平无限循环弹幕的实现

前言

在项目实践中应该有很多场景会用到弹幕，那么如何实现一个完美版本的弹幕呢？接下来我们原理加代码带你实现一个完整的弹幕组件(react版本)

无限循环的水平弹幕实现原理

针对实现原理，这里我画了一张原理图，大家可以看一下：

水平弹幕的实现有两种情况：

1、当弹幕的个数加起来的宽度不足以覆盖屏幕的可视化区域

2、当弹幕的个数加起来的宽度超过屏幕的可视化区域

针对以上两种情况我们有不同的展示效果，如下链接的展示效果：

针对第一种情况，实现原理很简单，当从初始化位置开始滚动的时候，计算滚动的距离，当滚动结束后，立马让其回到初始化位置。

第二种情况稍微复杂一些，我们需要利用人眼的视觉暂留效果，实现弹幕的偷梁换柱，具体怎么实现呢？

1. 初始化位置在屏幕最右侧，也就是隐藏在屏幕外面，这一点和上一种情况一致

2. 我们需要使用一个计算好的速度做一次动画滑到屏幕的最左侧，也就是后面循环往复的动画的初始化位置，这个初始化位置和第一点的初始化位置不是同一个。 2.1. 计算这个速度很简单，只需要知道我们做完全部动画的时间以及弹幕的总长度，得到的便是平均速度，之后再乘以屏幕的可视化区域宽度

3. 需要计算好我们在原有弹幕个数的基础上需要补充多少个弹幕才能超过屏幕可视化区域，做这个步骤是因为，只有补充这些弹幕，才能保证补充的弹幕的第一个滑到最左侧的时候整个弹幕整体瞬间回到初始化位置的时候，不会让用户看出端倪，也就是没有顿挫感。

4. 定好keyframe的具体参数即可开始做动画。

实现的代码

实现的代码是一个组件，这个组件有兴趣的童鞋可以将其丰富化，增加更多的参数，支持各种方向的循环滚动。

1class InfiniteScroll extends React.Component {
2  componentDidMount() {
3    const { animationName, scrollDirection } = this.props
4    setTimeout(() => {
5      if (this.scrollInstance) {
6        const appendElementWidth = []
7        const appendElement = []
8        const visibleWidth = this.scrollInstance.clientWidth
9        // 滚动的初始位置从视口的最右边开始，后面支持更多方向
10        const initPosition = visibleWidth
11        let scrollContainerWidth = 0
12        let isCoverViewPort = false
13        // 遍历滚动的所有元素
14        for (let i = 0; i < this.scrollInstance.children.length; i += 1) {
15          const style = this.scrollInstance.children[i].currentStyle || window.getComputedStyle(this.scrollInstance.children[i])
16          // width 已经包含了border和padding，如果box-sizing变化了呢？
17          const width = this.scrollInstance.children[i].offsetWidth// or use style.width
18          const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight)
19
20          const clientWidth = (width + margin)
21          scrollContainerWidth += clientWidth
22          // 保存需要追加到原有滚动元素的列表后面
23          if (scrollContainerWidth < visibleWidth * 2 && !isCoverViewPort) {
24            appendElementWidth.push(clientWidth)
25            appendElement.push(this.scrollInstance.children[i].cloneNode(true))
26
27            if (scrollContainerWidth >= visibleWidth && !isCoverViewPort) {
28              isCoverViewPort = true
29            }
30          }
31        }
32        // 该参数记录是否弹幕的宽度超过了屏幕可视化区域的宽度
33        const isScrollWidthLargeViewPort = scrollContainerWidth > visibleWidth
34
35        // const styleSheet = document.styleSheets[0]
36
37        // 注意这里的动画初始化位置两种情况是不一样的，在之前的步骤上有说过的(垂直方向的没实现，可以忽略掉~)
38        const keyframes = `
39        @keyframes ${animationName}{
40          from{
41            transform: ${scrollDirection === 'horizon' ? `translateX(${isScrollWidthLargeViewPort ? 0 : initPosition}px)` : 'translateY(0px)'};
42          }
43          to {
44            transform: ${scrollDirection === 'horizon' ? `translateX(-${scrollContainerWidth}px)` : `translateX(-${scrollContainerWidth}px)`};
45          }
46        }
47        @-webkit-keyframes ${animationName}{
48          from{
49            -webkit-transform: ${scrollDirection === 'horizon' ? `translateX(${isScrollWidthLargeViewPort ? 0 : initPosition}px)` : 'translateY(0px)'};
50          }
51          to {
52            -webkit-transform: ${scrollDirection === 'horizon' ? `translateX(-${scrollContainerWidth}px)` : `translateX(-${scrollContainerWidth}px)`};
53          }
54        }
55        `
56        const style = document.createElement('style')
57        const head = document.head || document.getElementsByTagName('head')[0]
58
59        style.type = 'text/css'
60        const textNode = document.createTextNode(keyframes);
61        style.appendChild(textNode);
62        head.appendChild(style)
63        // 如果css是external的话会报错：Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
64        // styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
65        const previousWidth = scrollContainerWidth
66        // 这个计算之后scrollContainerWidth就会包含那些补充了的弹幕的宽度，所以需要保留一个原始值，供后面的过渡动画使用
67        if (isScrollWidthLargeViewPort) {
68          appendElement.map(node => this.scrollInstance.appendChild(node))
69          appendElementWidth.map(it => scrollContainerWidth += it)
70        }
71
72        // TODO: 动画的速度以后需要使用props
73        // 因为初始化位置在视口外，但是我们动画的初始位置都是在0px上，所以就会有一个时差出现，
74        // 因为在animation生效之前需要有一个过渡动画，二者的时间是相等的
75        const delay = (this.scrollInstance.children.length * 3 * visibleWidth) / previousWidth
76        const styleText = isScrollWidthLargeViewPort ? `
77        width: ${scrollContainerWidth}px;
78        transform: translateX(0px);
79        -webkit-transform: translateX(0px);
80        transition: ${delay}s linear;
81        -webkit-transition: ${delay}s linear;
82        animation: ${animationName} ${this.scrollInstance.children.length * 3}s linear ${delay}s infinite;
83        -webkit-animation: ${animationName} ${this.scrollInstance.children.length * 3}s linear ${delay}s infinite;
84      ` : `
85      width: ${scrollContainerWidth}px;
86      animation: ${animationName} ${this.scrollInstance.children.length * 3}s linear infinite;
87      -webkit-animation: ${animationName} ${this.scrollInstance.children.length * 3}s linear infinite;
88    `
89        this.scrollInstance.style.cssText = styleText
90      }
91    }, 500)
92  }
93  render() {
94    const { scrollContent, scrollItemClass, scrollClass, scrollDirection } = this.props
95
96    const scrollClasses = scrollDirection === 'vertical' ? `scroll-list vertical ${scrollClass}` : `scroll-list horizon ${scrollClass}`
97
98    return (
99      <div className={scrollClasses} ref={ref => this.scrollInstance = ref}>
100        {
101          scrollContent.map((content, index) => (<div key={index} className={scrollItemClass}>{content}</div>))
102        }
103      </div>
104    )
105  }
106}

对应的CSS文件如下：

1.scroll-list{
2  display: flex;
3  &.horizon {
4    flex-direction: row;
5  }
6  &.vertical{
7    flex-direction: column;
8  }
9}

完整的应用参考：jsFiddle

至此完整版的水平循环弹幕实现完毕，有问题的欢迎留言~~