使文字脉动并随意改变地方

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

Answer 2

我的决定是将页面划分为假想的行，并禁止同一行中出现多个单词。请检查一下。

注意：由于代码当前不支持在文档大小调整时重新计算行数，因此完整页面视图将无法正确显示。单击“重新加载框架”或尝试JSFiddle或其他。

var pulsar = {
  // Delay between words appearance
  delay: 400,
  // Word animation do not really depend on pulsar.delay,
  // but if you set pulsar.delay small and wordAnimationDuration long
  // some words will skip their turns. Try 1, 2, 3...
  wordAnimationDuration: 400 * 3,
  // Depending on maximum font size of words we calculate the number of rows
  // to which the window can be divided
  maxFontSize: 40,
  start: function () {
    this.computeRows();
    this.fillWords();
    this.animate();
  },
  // Calculate the height or row and store each row's properties in pulsar.rows
  computeRows: function () {
    var height = document.body.parentNode.clientHeight;
    var rowsCount = Math.floor(height/this.maxFontSize);
    this.rows = [];
    for (var i = 0; i < rowsCount; i++) {
      this.rows.push({
        index: i,
        isBusy: false
      });   
    }
  },
  // Store Word instances in pulsar.words
  fillWords: function () {
    this.words = [];
    var words = document.querySelectorAll('[data-pulsate="true"]');
    for (var i = 0; i < words.length; i++) {
      this.words.push(new Word(words[i], this.wordAnimationDuration, this.maxFontSize));
    }
  },
  // When it comes time to  animate another word we need to know which row to move it in
  // this random row should be empty at the moment
  getAnyEmptyRowIndex: function () {
    var emptyRows = this.rows.filter(function(row) {
      return !row.isBusy;
    });
    if (emptyRows.length == 0) {
      return -1;
    }
    var index = emptyRows[Math.floor(Math.random() * emptyRows.length)].index;
    this.rows[index].isBusy = true;
    return index;
  },
  // Here we manipulate words in order of pulsar.words array
  animate: function () {
    var self = this;
    this.interval = setInterval(function() {
      var ri = self.getAnyEmptyRowIndex();
      if (ri >= 0) {
        self.words.push(self.words.shift());
        self.words[0].animate(ri, function () {
          self.rows[ri].isBusy = false;
        });
      }
    }, this.delay);
  }
}

function Word (span, duration, maxFontSize) {
  this.span = span;
  this.inAction = false;
  this.duration = duration;
  this.maxFontSize = maxFontSize;
}

/** 
  * @row {Numer} is a number of imaginary row to place the word into
  * @callback {Function} to call on animation end
  */
Word.prototype.animate = function (row, callback) {
  var self = this;
  // Skip turn if the word is still busy in previous animation
  if (self.inAction) {
    return;   
  }
  var start = null,
      dur = self.duration,
      mfs = self.maxFontSize,
      top = row * mfs,
      // Random left offset (in %)
      left = Math.floor(Math.random() * 90),
      // Vary then font size within half-max size and max size
      fs = mfs - Math.floor(Math.random() * mfs / 2);

  self.inAction = true;
  self.span.style.top = top + 'px';
  self.span.style.left = left + '%';

  function step (timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    // Calculate the factor that will change from 0 to 1, then from 1 to 0 during the animation process
    var factor = 1 - Math.sqrt(Math.pow(2 * Math.min(progress, dur) / dur - 1, 2));
    self.span.style.fontSize = fs * factor + 'px';
    if (progress < dur) {
      window.requestAnimationFrame(step);
    }
    else {
      self.inAction = false;
      callback();
    }
  }
  window.requestAnimationFrame(step);
}

pulsar.start();

body {
    background: black;
    color: white;
}

.word {
    position: absolute;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
    font-size: 0px;
    /* To make height of the .word to equal it's font size */
    line-height: 1;
}

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