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

Question

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

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 点，但我想让它们彼此平行，所以，每个盒子都应该有一个不同top/right点去。我猜我的问题是计算它，但我该怎么做呢？而且这也干扰了我的屏幕外问题。

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.

希望对您有所帮助。

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

JQuery/GSAP - Moving multiple elements parallel to each other

javascript

jquery

gsap