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或者GSAP的解决方案可以让动画流畅，让星星看起来一直从左边产生，然后向右移动？

Answer 1

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

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

您的新 "duplicated" 星空基本上是：

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

因此，当您将复制的图像从左向右移动 100% 时，您在最后 "frame" 中看到的内容与循环时 return 所看到的内容相同。

这里有一个 fiddle 展示了这个概念的实际应用：https://jsfiddle.net/yarp4oLs/5/

我有两个相同的星空图像，大小为 200x200（因此并排时为 400x200），它们显示在 200x200 的 "viewport" 容器中。然后我将它们向左滑动 200px 并重复。瞬间星星！

JS/GSAP无限动画解决方案

JS/GSAP solution for infinite animation

javascript

jquery

animation

svg

gsap