使用请求动画帧平移元素

问：

我正在尝试创建一个简单的钢琴瓷砖游戏，其中瓷砖从上到下平移。

代码有什么作用？ 我有一个startGame函数，每300毫秒运行一个动画函数。animate 函数创建一个图块，获取一个随机索引，该索引通过 track[random index generated] 随机附加到 track（4 个车道的 nodeList），最后是 animate 函数中的下移函数，该函数将图块从上到下平移，并在动画超过车道高度时被删除并取消动画

它按预期工作，但动画出现故障，并在瓷砖掉落时显示瓷砖的碎片。 简单来说，它使瓷砖变得模糊。

有没有办法使动画平滑，或者有更好的替代请求动画帧的方法？

代码 [HTML全文]

<div class="container">

          <div class="lane"></div>

          <div class="lane"></div>

          <div class="lane"></div>

          <div class="lane"></div>

        </div>

CSS的

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Poppins", sans-Serif;

}

body {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

}

.container {

    width: 100vw;

    height: 100vh;

    background: #de8f5f;

    display: flex;

}

.lane {

    position: relative;

    height: 100%;

    width: 25%;

    border-right: 1px solid #ffffff30;

}

.lane:last-child {

    border: none;

}

.tile {

    position: absolute;

    background-color: #1f2124;

    width: 100%;


}

JavaScript的

const track = document.querySelectorAll(".lane");

let previousIndex = -1;

function getRandomLane() {

    let index;

    do {

        index = Math.floor(Math.random() * track.length);

    } while (index === previousIndex);

    previousIndex = index;

    return index;

}

function createTile() {

    let span = document.createElement("span");

    span.className = "tile";

    span.style.cssText = `height: 150px; transform: translateY(-150px);`;

    return span;

}

function startGame() {

    const length = 300;

     animate();

     setInterval(animate, length)

}

function animate() {

    let tile = createTile();

    let position = getRandomLane();

    track[position].appendChild(tile);

    let posTop = -tile.offsetHeight;

    function moveDown() {

        posTop += 4;

        tile.style.transform = `translateY(${posTop}px)`;

        requestAnimationFrame(moveDown);

        if (posTop > track[position].offsetHeight) {

            tile.remove();

            cancelAnimationFrame(animId);

        }

    }

    let animId = requestAnimationFrame(moveDown);

    moveDown();

}

startGame(
);