h5弹幕动画——解决部分手机兼容问题

前言

h5移动端循环弹幕动画实现

上次的弹幕动画效果是已经实现了，但是由于手上的手机有限，没有测试出对部分手机的兼容问题， 同事测试出了，该弹幕效果在iPhone6s上不兼容，弹幕未移动到屏幕左侧就已经消失了。

解决过程

我初步的想了一下，未到屏幕左侧就消失，那一定是动画结尾所处位置计算的不正确，也就是transform: translateX(calc(-100vw - 100%))这句代码中calc内的100%为0，这就导致了bug的发生

1. 我首先想从兼容问题上下手解决，后来发现这个实在不大可行
2. 之后我就想，可不可以像其他动画效果一样，初始为translateX: 0，之后通过js添加translateX: 屏幕宽度 + 弹幕宽度，恩，想来是可行的

理清了思路，开始写代码

将.dan的css修改为如下，主要是去除了css动画的引用，transform设置初值translateX(0)

.dan{
    position: absolute;
    left: 100%;
    background: #333;
    white-space: nowrap;
    padding: 0 14px;
    border-radius: 50px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: default;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    top: 80px;
}

接下来修改js代码，主要修改弹幕开始这一部分

function bulletChatStart(i=1){
        bulletChat.forEach(async (item, index) => {
          // 动画时间随机范围，单位s
          let numMax = 10, numMin = 3;
          // 两条弹幕之间时间间隔随机范围，单位100ms
          let bulletChatMax = 20, bulletChatMin = 5;
          // 动画时间
          let num = Math.floor(Math.random() * (numMax - numMin + 1) + numMin)
          // 距离顶部高度百分比
          let top = Math.floor(Math.random() * (35 - 2 + 1) + 2)
          if (index !== 0) {
            bulletChatTime += Math.floor(Math.random() * (bulletChatMax - bulletChatMin + 1) + bulletChatMin)
          }
          await sleep(100 * bulletChatTime)
          // 创建jquery对象，方便之后进行操作
          let el = $(`<div class="dan text-2 dan-${index + i}" style="transition: transform ${num}s linear;top: ${top}%;">${item}</div>`);
          // 添加到该类下
          el.appendTo('.bullet-chat-box');
          // 计算一下需要滚动的长度，基本为body的宽度加上弹幕的宽度，28是padding
          let movingLength = $(document.body).width() + el.width() + 28;
          // 添加transform对初值进行覆盖
          el.css("transform","translateX(-"+ movingLength +"px)");
          await sleep(1000 * num)
          $('.dan-' + (index + i)).remove();
          if (index === bulletChat.length - 1) {
            bulletChatTime = 0;
            bulletChatStart(index + i + 2);
          }
        });
      }

总结

无论对于移动端还是pc端，兼容都是一个很重要的问题，对于css来说更是如此，以后要多多考虑。