react-native - 如何制作无限动画

Question

如何制作在到达屏幕末端并从另一端开始时不会停止但循环的运动图像动画？示例 gif：

Answer 1

在您的示例中，它看起来像多层图像。z-indexing 和 png 非背景图像会很复杂。

基本上，无限重复的动画将是这样的：

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("http://placehold.it/1600x800") repeat 0 0;
  background-size: auto 100%;
  animation: animatedBackground 10s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -3200px 0; /* image width X 2 */
  }
}