无限动画的JS/GSAP解决方案

Question

我正在尝试创建一个无限的星雨动画，所有的星星都是 SVG 的。 我试过这个来创建动画：

(function($) {
TweenMax.set(".astar", {
  x:function(i) {
    return i * 50;
  }
});


TweenMax.to(".astar", 5, {
  ease: Linear.easeNone,
  x: "+=500", //move each box 500px to right
  modifiers: {
    x: function(x) {
      return x % 500; //force x value to be between 0 and 500 using modulus
    }
  },
  repeat: -1
});
})(jQuery);

正如您在此 Codepen 上看到的那样，重复过程并不顺利： https://codepen.io/daniellwdb/pen/NXogoB 是否有任何 JS 或 GS​​AP 解决方案可以使动画平滑，使其看起来像星星不断从左侧生成并向右移动？

Answer 1

根据您当前的设置，我认为最简单的方法是复制您的星空，以便下一个循环的开头与第一个循环的结尾相同。假设这是您的星空 SVG：

|...o.|
|o....|
|..o..|

您的新“复制”星空基本上是：

|...o.|...o.|
|o....|o....|
|..o..|..o..|

因此，当您将复制的图像从左向右移动 100% 时，您在最后一个“帧”中看到的内容与它循环时返回的内容相同。

这是一个展示这个概念的小提琴：https://jsfiddle.net/yarp4oLs/5/

我有两个相同的 200x200 星场图像（并排时为 400x200），它们显示在 200x200 的“视口”容器中。然后我只是将它们向左滑动 200px 并重复。即时明星！