如何循环移动其他图像上的一个图像

Question

我们需要创建一个屏幕保护程序，其中一个图像被固定，第二个图像应该连续向右移动，当它向右移动时，应该填充图像不存在的左侧部分再次与图像。我们编码如下所示。

static void observableListMethod2(Observable<List<BaseClass>> listObservable) { }
public static void callObservableListMethod2() {
    Observable<List<BaseClass>> b = Observable.just(Collections.emptyList());
    Observable<List<SubClass>> s = Observable.just(Collections.emptyList());

    observableListMethod2(b);    // ok
    observableListMethod2(s.flatMapIterable(it -> it).cast(BaseClass.class).toList()); // ok, but yuck!
}

这是按预期将第二张图像向右移动但不确定如何填充左侧部分。我们需要创建一个效果，如图像连续向右移动，但图像也应该出现在左侧。这意味着由于图像移动，左侧不应出现空白区域。任何人都可以帮我解决这个问题。

Answer 1

我说你真的不需要JavaScript和克隆它。您可以使用简单的@keyframe动画，只要您获得正确重复循环的值（background-position，就可以为48.1vw,设置动画 - 当然，它可以是任意倍数ie：96.2vw），以匹配您使用的图像的比例。例如：

.animator {
  background-color: #eee;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/car.svg);
  resize: both;
  overflow: hidden;
  animation: move-background 3s linear infinite;
  padding-bottom: 25%;
  width: 100%;
  background-size: contain;
}
body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
@keyframes move-background {
  0% {
    background-position: 0vw, 0%;
  }
  100% {
    background-position: 48.1vw, 0%;
  }
}

<div class="animator"></div>