javascript - 像轮盘一样滚动 div 内容

Question

我想创建一个轮盘赌，滚动一些数字并显示滚动。
首先，我尝试使用图像和 backgroundOffset，但它滞后太多并且检查滚动数时出现问题。所以我做了那个代码:

<div class="container" style="display: flex">
    <div class="block red">1</div>
    <div class="block black">14</div>
    <div class="block red">2</div>
    <div class="block black">13</div>
    <div class="block red">3</div>
    <div class="block black">12</div>
    <div class="block red">4</div>
    <div class="block green">0</div>
    <div class="block black">11</div>
    <div class="block red">5</div>
    <div class="block black">10</div>
    <div class="block red">6</div>
    <div class="block black">9</div>
    <div class="block red">7</div>
    <div class="block black">8</div>

</div>

JSFIDDLE

我怎样才能使这个卷像 here ？

Answer 1

使用 Canvas API 是为 <canvas> 中的对象设置动画的最有效方式。绘制和动画对象，尤其是在制作游戏时。因为使用 div 这样做效率较低并且会导致性能下降。此外，使用 canvas API，您可以使用更多工具来廉价地重绘和重新激活您的对象，而且您可以获得更漂亮的外观，而无需为此付出巨大的性能缺点。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

也不要使用 setInterval，除非是非常简单的动画。
setInterval 不会等到之前的动画结束，这意味着在某些情况下，在较弱的机器上，您可以同时运行多个间隔!而且您无法控制动画。

在 html5 游戏开发中，动画对象的标准方法是使用 requestAnimationFrame() 函数: https://developer.mozilla.org/pl/docs/Web/API/Window/requestAnimationFrame