使用 JavaScript 动画图像“滚动”

Question

在 NumPy 中，有一个名为 roll 的函数。 documentation 描述如下：

沿给定轴滚动数组元素。

滚动到最后一个位置之外的元素在 首先。

具体来说，在图像上调用roll 可能会产生以下移位版本：

我的问题是如何在 JavaScript 中为沿宽度和高度轴的任意移位值实现相同的效果以及如何使其具有动画效果，以便人们可以看到从原始图像到转换后的版本。

Answer 1

所以答案非常简单。可以这样实现：

#imageDiv {
  background-image: url(the_image.png);
  background-repeat: repeat;
}

之后，您可以简单地为imageDiv 上的background-position 属性设置动画（例如background-position: 42px 69px）。