JQuery/GSAP - 相互平行移动多个元素

Question

我想做的是：我想在页面的 Y 或 X 轴（底部和左侧边框）上生成框并让它们移动彼此平行，直到它们离开屏幕，我想删除它们。 这是我到目前为止所做的：

Codepen.

function generate(){
  var $element = $("<div>", {class: "box"});
  //Generate random x and y coordinates
  var posy = (Math.random() * ($('body').height() - $element.width())).toFixed();
  var posx = (Math.random() * ($('body').width() - $element.height())).toFixed();
  //Place the box on the x or y axis
  var rand = Math.floor(Math.random()*2);
  if(rand==0)
  {
    posx=0;
  }else{
    posy=0;
  }

  $element.css(
  {'position':'absolute',
  'right':posx+'px',
  'bottom':posy+'px'});
  $("body").append($element);

  //Move box diagonally, all the boxes paths are parallel
    TweenLite.to($element, 2, {top:0, right:0, ease:Power2.easeOut});

  //Delete boxes offscreen
  var $boxes=$(".box");
  /*$boxes.each(function(){
    if($(this).position().left >1300){
      $(this).remove();
    }
  });*/
}

我的问题是：我如何准确地找到动画盒子的正确点，以使所有盒子彼此平行移动？ 另外，有没有办法不使用外部插件来查找元素是否超出了页面范围？ 感谢您的任何回答！

编辑： 这是一张图，可以更好地解释我自己。对不起我糟糕的绘画技巧！

现在所有的盒子都汇聚到同一个 top:0 和 right:0 点，但我想让它们彼此平行，因此，每个盒子都应该有一个不同的顶部/右侧点去。我猜我的问题是计算它，但我该怎么做呢？这也影响了我的屏幕外问题。

Answer 1

this是你想要创造的那种效果吗？

JavaScript：

function generate(){
  var windowHeight = $(window).height();
  var windowWidth = $(window).width();
  var $element = $('<div>', {class: 'box'});
  var initX = parseInt(Math.random() * windowWidth) - (windowWidth * 0.5);
  var destX = parseInt(initX) + $(window).height();

  $('body').append($element);
  TweenLite.fromTo($element, 2, {x:initX, y:0}, {x:destX, y:-windowHeight, ease:Power2.easeOut, onComplete: onCompleteAnimation, onCompleteParams: [$element]});
}

function onCompleteAnimation($element) {
  $element.remove();
}

您会注意到，我没有像您之前那样使用position: absolute; 为top 和left（或right）属性设置动画。相反，我正在为x 和y 设置动画，它们本质上是translate(x, y) 值。这使动画看起来很流畅：Link。

希望这会有所帮助。