前言

h5移動(dòng)端循環(huán)彈幕動(dòng)畫(huà)實(shí)現(xiàn)

上次的彈幕動(dòng)畫(huà)效果是已經(jīng)實(shí)現(xiàn)了，但是由于手上的手機(jī)有限，沒(méi)有測(cè)試出對(duì)部分手機(jī)的兼容問(wèn)題， 同事測(cè)試出了，該彈幕效果在iPhone6s上不兼容，彈幕未移動(dòng)到屏幕左側(cè)就已經(jīng)消失了。

解決過(guò)程

我初步的想了一下，未到屏幕左側(cè)就消失，那一定是動(dòng)畫(huà)結(jié)尾所處位置計(jì)算的不正確，也就是transform: translateX(calc(-100vw - 100%))這句代碼中calc內(nèi)的100%為0，這就導(dǎo)致了bug的發(fā)生

我首先想從兼容問(wèn)題上下手解決，后來(lái)發(fā)現(xiàn)這個(gè)實(shí)在不大可行

之后我就想，可不可以像其他動(dòng)畫(huà)效果一樣，初始為translateX: 0，之后通過(guò)js添加translateX: 屏幕寬度 + 彈幕寬度，恩，想來(lái)是可行的

理清了思路，開(kāi)始寫(xiě)代碼

將.dan的css修改為如下，主要是去除了css動(dòng)畫(huà)的引用，transform設(shè)置初值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; }

接下來(lái)修改js代碼，主要修改彈幕開(kāi)始這一部分

function bulletChatStart(i=1){bulletChat.forEach(async (item, index) => {// 動(dòng)畫(huà)時(shí)間隨機(jī)范圍，單位slet numMax = 10, numMin = 3;// 兩條彈幕之間時(shí)間間隔隨機(jī)范圍，單位100mslet bulletChatMax = 20, bulletChatMin = 5;// 動(dòng)畫(huà)時(shí)間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)// 創(chuàng)建jquery對(duì)象，方便之后進(jìn)行操作let el = $(`<div class="dan text-2 dan-${index + i}" style="transition: transform ${num}s linear;top: ${top}%;">${item}</div>`);// 添加到該類(lèi)下el.appendTo('.bullet-chat-box');// 計(jì)算一下需要滾動(dòng)的長(zhǎng)度，基本為body的寬度加上彈幕的寬度，28是paddinglet movingLength = $(document.body).width() + el.width() + 28;// 添加transform對(duì)初值進(jìn)行覆蓋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);}});}

總結(jié)

無(wú)論對(duì)于移動(dòng)端還是pc端，兼容都是一個(gè)很重要的問(wèn)題，對(duì)于css來(lái)說(shuō)更是如此，以后要多多考慮。

總結(jié)

以上是生活随笔為你收集整理的h5弹幕动画——解决部分手机兼容问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。