Решение JS/GSAP для бесконечной анимации

Я пытаюсь создать бесконечную анимацию звездного дождя, все звезды - это 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, чтобы сделать анимацию плавной, чтобы она выглядела так, будто звезды продолжают появляться слева и двигаться вправо?


javascript svg animation jquery gsap
person Meza    schedule 20.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

С вашей текущей настройкой, я думаю, самый простой способ осуществить это — продублировать ваше звездное поле, чтобы начало вашего следующего цикла было идентично концу вашего первого. Допустим, это ваш звездный SVG:

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

Ваше новое «дублированное» звездное поле будет по существу таким:

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

Поэтому, когда вы перемещаете это дублированное изображение слева направо на 100%, то, что вы видите в последнем «кадре», идентично тому, к чему оно вернется, когда оно зациклится.

Вот скрипт, демонстрирующий эту концепцию в действии: https://jsfiddle.net/yarp4oLs/5/

У меня есть два одинаковых изображения звездного поля размером 200x200 (то есть 400x200, когда они расположены рядом друг с другом), и они отображаются в контейнере «просмотра» размером 200x200. Затем я просто сдвигаю их влево на 200 пикселей и повторяю. Мгновенные звезды!

person Chris Riebschlager    schedule 20.01.2018
comment
Спасибо за ваш комментарий, Крис, может быть, у вас есть небольшой код для этого решения, чтобы я мог попытаться заставить его работать для моего кода? Я не очень разбираюсь в этом подходе к анимации. - person Meza; 21.01.2018
comment
Еще бы, @Meza. Я отредактировал свой ответ со ссылкой на jsfiddle. - person Chris Riebschlager; 21.01.2018
comment
Это то, чего я пытаюсь достичь, мне еще не повезло реализовать это в моем коде, можно ли отредактировать тот, который я обновил в своем вопросе, чтобы получить тот же эффект? @Крис Рибшлагер - person Meza; 21.01.2018