javascript - 使单词跳动并随机改变位置

Question

我正在做这个插件，它接受文字并让它们在屏幕上跳动:

它们先出现并长大，然后消失，换地方再出现

工作插件:

+ function($) {

  var Pulsate = function(element) {
    var self = this;
    
    self.element = element;
    self.max = 70;
    self.min = 0;
    self.speed = 500;
    self.first = true;
    self.currentPlace;
    self.possiblePlaces = [
      {
        id: 0,
        top: 150,
        left: 150,
      },
      {
        id: 1,
        top: 250,
        left: 250,
      },
      {
        id: 2,
        top: 350,
        left: 350,
      },
      {
        id: 3,
        top: 250,
        left: 750,
      },
      {
        id: 4,
        top: 450,
        left: 950,
      }
    ];
    
  };
  
  Pulsate.prototype.defineRandomPlace = function() {
    var self = this;
    self.currentPlace = self.possiblePlaces[Math.floor(Math.random() * self.possiblePlaces.length)];
    
    if(!self.possiblePlaces) self.defineRandomPlace;
    
    
    
    self.element.css('top', self.currentPlace.top + 'px');
    self.element.css('left', self.currentPlace.left + 'px');
  };
  
  Pulsate.prototype.animateToZero = function() {
    var self = this;
    
    self.element.animate({
      'fontSize': 0,
      'queue': true
    }, self.speed, function() {
      self.defineRandomPlace();
    });
    
  };
  
  Pulsate.prototype.animateToRandomNumber = function() {
    var self = this;
    
    self.element.animate({
      'fontSize': Math.floor(Math.random() * (70 - 50 + 1) + 50),
      'queue': true
    }, self.speed, function() {
      self.first = false;
      self.start();
    });
  };
  
  Pulsate.prototype.start = function() {
    var self = this;
    
    if (self.first) self.defineRandomPlace();
    if (!self.first) self.animateToZero();
    
    self.animateToRandomNumber();
  };


  $(window).on('load', function() {
    $('[data-pulsate]').each(function() {
      var element = $(this).data('pulsate') || false;
      
      if (element) {
        element = new Pulsate($(this));
        element.start();
      }

    });

  });

}(jQuery);

body {
  background: black;
  color: white;
}

.word {
  position: absolute;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  font-size: 0px;
}


.two {
  position: absolute;
  color: white;
  left: 50px;
  top: 50px;
}
div {
  margin-left: 0px;
}

<span class="word" data-pulsate="true">Love</span>
<span class="word" data-pulsate="true">Enjoy</span>
<span class="word" data-pulsate="true">Huggs</span>





<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

如果您注意到我在 self.possiblePlaces 中定义了单词可以增长的位置，并且如果您注意到动画，有时一个地方可以增长一个单词，那么我来这里的目的是寻求帮助。我怎样才能让两个词永远不会出现在同一个地方？？

我想这样做:

在 defineRandomPlace 中，我在 possiblePlaces 数组中选择了一个随机对象:

  Pulsate.prototype.defineRandomPlace = function() {
    var self = this;
    self.currentPlace = self.possiblePlaces[Math.floor(Math.random() * self.possiblePlaces.length)];

    if(!self.possiblePlaces) self.defineRandomPlace;


    delete self.possiblePlaces[self.currentPlace.id];
    self.element.css('top', self.currentPlace.top + 'px');
    self.element.css('left', self.currentPlace.left + 'px');
  };

注意删除，首先我克隆选择的对象，在我删除它之后但保留他在数组中的位置。

动画结束后，我再次将对象放入数组中，然后重新开始:

  Pulsate.prototype.animateToZero = function() {
    var self = this;

    self.element.animate({
      'fontSize': 0,
      'queue': true
    }, self.speed, function() {
      self.possiblePlaces[self.currentPlace.id] = self.currentPlace;
      self.defineRandomPlace();
    });

但这并没有什么不同。

谢谢!!

笔:http://codepen.io/anon/pen/waooQB

Answer 1

在您的示例中，您从包含五个成员的列表中随机选择，并且可以显示三个单独的词，因此重叠的可能性相当高。

一个简单的解决方法是每次选择列表中的第一项，将其从列表中删除，然后追加到列表末尾。因为您在列表中的位置多于从中选择的项目，所以您保证永远不会发生冲突。

1. 在所有实例之间共享相同的列表possiblePlaces。
2. 将第一项移出队列，每次完成后将其推到队列末尾，而不是在 defineRandomPlace 中随机选择。

片段突出显示#2:

// shift a position off the front
self.currentPlace = possiblePlaces.shift();

self.element.css('top', self.currentPlace.top + 'px');
self.element.css('left', self.currentPlace.left + 'px');

// push it back on the end
possiblePlaces.push(self.currentPlace);

如果您希望它真正随机，您需要随机选择并从数组中删除一个项目，并且在使用之后才将其放回数组中。您还需要始终确保您拥有的 possiblePlaces 多于要放置在页面上的 dom 元素。

像这样:

Pulsate.prototype.defineRandomPlace = function() {
  var self = this;
  var newPlace = possiblePlaces.splice(Math.floor(Math.random()*possiblePlaces.length), 1)[0];

  if (self.currentPlace) {
    possiblePlaces.push(self.currentPlace);
  }

  self.currentPlace = newPlace;

  self.element.css('top', self.currentPlace.top + 'px');
  self.element.css('left', self.currentPlace.left + 'px');
};

参见 http://codepen.io/anon/pen/bdBBPE