使用Blast.js制作文本动画

在库的帮助下，如今使用CSS或JavaScript为HTML元素制作动画几乎是一件容易的事。 但是您只能为完整的现有元素设置动画。

这意味着如果要为段落中的单个单词设置动画，则必须将单词包装在单个元素中（例如span ），然后相应地将其定位。

如果只有这样一个或两个span元素，那没什么大不了的，但是如果要为段落中的每个字符设置动画怎么办？ 对于每个字符，您都必须创建一个span ，这会增加很多额外的标记并使文本难以编辑。 这就是为什么存在Blast.js 。

什么是Blast.js？

Blast.js是一个jQuery插件，可让您为单个字符，单词或句子设置动画。 在本文中，我将提供一些示例，以便您可以了解如何使用Blast.js。 要使用Blast.js并尝试下面的示例，您将需要jQuery，当然还需要Blast.js文件，该文件可以在Blast.js 的项目网站上找到 。

如前所述，Blast.js允许我们围绕字符，单词或句子创建元素，但是库不仅限于这些选项。 在下一节中，我们将看到一些具体示例来介绍一些选项。 我们将看到的选项列表并不详尽； 可用选项的完整列表可以在项目的网站上找到。

爆破我们的第一批文字

在第一个示例中，我们将展开标题以动画化每个角色，并将其逐个向右移动。 所需的唯一HTML代码如下：

<h1>Hello World!</h1>

包括jQuery和Blast.js之后，此部分的下一部分代码将全部放在jQuery ready处理程序内的自定义JavaScript文件中，以确保页面已准备就绪：

$(function() {
  // Animation code
});

现在我们可以爆破我们的头衔了。 在我们的示例中，仅使用$('h1')定位元素就足够了，但是在您的情况下，您将使用适合于定位元素的任何选择器。

Blast.js在jQuery对象上提供了一种新方法： .blast() ，它具有一个参数：列出您要使用的所有选项的对象。 在第一个示例中，我们将仅使用一个选项， delimiter: 'character' ，指示我们要逐字符展开标题字符。

如果我们未包含该参数，则将使用默认值'word' （而不是“ character”），因此将在每个单词周围创建span （而不是我们想要的每个字符周围）。

$('h1').blast({
  delimiter: 'character'
});

这样，我们的简单h1元素将被爆炸，并生成以下生成的DOM：

<h1 class="blast-root">
  <span class="blast">H</span>
  <span class="blast">e</span>
  <span class="blast">l</span>
  <span class="blast">l</span>
  <span class="blast">o</span>

  <span class="blast">W</span>
  <span class="blast">o</span>
  <span class="blast">r</span>
  <span class="blast">l</span>
  <span class="blast">d</span>
  <span class="blast">!</span>
</h1>

请注意，单词之间的空格已保留，尚未封装为span 。

现在，我们需要检索生成的span元素。 例如，您可以尝试$('.blast') ，但是有一种更简单的方法。 默认情况下， .blast()方法返回生成的元素，因此检索这些元素的唯一要做的就是将它们存储在变量中。

var chars = $('h1').blast({
  delimiter: 'character'
});

获取生成的元素很有用，但并非总是如此。 因此，如果您希望.blast()方法返回父元素（您正在爆炸的主要元素）而不是生成的元素，则可以使用另一种方法来完成： returnGenerated 。 默认情况下，它设置为true ； 将其设置为false ，您将拥有您的父元素：

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

让我们回到示例中来对我们收集的元素进行动画处理。 多亏了jQuery的.each()方法，我们将为每个字符一个动画。

.each()方法将为存储在jQuery对象中的每个元素执行一个函数。 这是我们将使用的，在注释中进行了解释。

// A character by character animation
chars.each(function(i) {
  // initialize position
  $(this).css({
    position: 'relative',
    left: 0
  })

  // Delay: we don't want to animate
  // characters simultaneously
  .delay(i * 45)

  // Animate to the right
  .animate({ left: '50px' }, 300);
});

解释代码：首先，我们使用$(this)检索当前元素（即本例中的当前字符$(this) 。 我们将其相对位置初始化为零，最后为该位置设置动画。

如代码中的相应注释所述， .delay()方法使用i * 45在定义的毫秒数后启动动画，其中i是jQuery提供的计数器（我们将其作为参数传入）。 对于第一个字符， i等于0 ，所以动画立即启动，然后等于1 ，第二个字符在45毫秒后动画，依此类推。

我们的动画已经准备就绪，可以正常工作！ 您可以在下面查看实时示例。

见笔Blast.js例如由SitePoint（ @SitePoint上） CodePen 。

选择包装元素

默认情况下，将创建span元素，这是我们大多数时候想要的。 但是有时候我们想和其他元素一起玩，例如strong ， em甚至div和p 。 使用Blast.js，这是可能的。

为此，在下一个示例中，我们将创建一个段落，其中每个单词将使用随机颜色进行样式化，并封装在em元素中。

首先，我们需要一个函数来为我们提供一个随机数。 我们将使用原生JavaScript中提供的Math.random()的修改版本。

function rand(min, max) {
  return parseInt(Math.round(min + Math.random() * (max - min)));
}

这个新函数将为我们提供一个介于min和max之间的随机整数，这是传递给函数的参数。

现在，我们可以为段落添加颜色了。 首先，我们使用定界符'word'来展开段落。 我们添加了一个新选项： tag ，它使我们能够指示我们希望Blast.js用于生成元素的标签。 而不是默认的'span'我们将其设置为'em' 。

var words = $('p').blast({
  delimiter: 'word',
  tag: 'em'
});

现在，我们所有的单词都封装在em标记内。 对于每个标签，我们.css() jQuery的.css()方法和自定义的rand()函数来定义新颜色：

words.each(function() {
  $(this).css('color', 
              'rgb(' + rand(0, 255) + ',
              ' + rand(0, 255) + ',
              ' + rand(0, 255) + ')');
});

接下来，我们将添加另一行代码，以介绍如何检索父元素的初始状态（即，如何删除所有这些额外生成的标记）。

为此，可以将.blast()方法的值设置为false 。 这告诉Blast.js，先前调用此方法添加的所有标签将被删除。

您可以在下面查看此示例的实时版本。

见笔Blast.js色彩演示由SitePoint（ @SitePoint上） CodePen 。

请注意，将.blast(false)方法应用于尚未由Blast.js转换的元素将不会执行任何操作。

用Blast.js搜索

默认情况下，Blast.js会围绕文本中的每个单词，字符或句子创建元素。 但是，您也只能定位一个单词或一组单词：Blast.js然后将每个出现的单词或一组单词封装到一个元素中。 为此，我们使用带有字符串作为值的search选项，而不是delimiter选项。

为了演示，我们将创建一个包含输入和提交按钮的表单。 用户将在输入中指示要在特定段落中搜索的单词，然后Blast.js将搜索到的术语封装到span元素中。

<form method="get" action="search.html">
    <p>
      <input type="text" name="s" id="s" placeholder="Search">
      <input type="submit" value="Go!">
    </p>
</form>

我们将在表单上使用submit事件执行此操作。

$('form').submit(function(e) {
  $('#awesometext').blast(false).blast({
    search: $('#s').val(),
    customClass: 'search',
    generateIndexID: true
  });

  e.preventDefault();

});

指令e.preventDefault(); 包含以禁用表单的默认行为，即提交表单。

我们使用正确的选择器检索我们的段落，然后第一次使用false值应用.blast()方法。 这样，如果用户先前执行了其他搜索，则将清除这些搜索。

接下来，我们再次使用.blast()方法，这次搜索所需的术语。 为此，我们使用search选项，为其提供输入值。 另外两个选项不是强制性的，但是它们很有用，我想向您展示它们的存在。

customClass选项允许我们将自己的类名称添加到生成的元素中。 如果查看前面示例中生成的元素，您肯定会看到它们都具有blast类。 使用customClass ，可以添加一个或多个类。

generateIndexID选项是布尔值。 设置为true ，它将为每个生成的元素添加一个ID。 要工作，它需要使用customClass选项。 在这里，我们选择了class search ，因此第一个生成的元素将具有ID search-1 ，第二个元素将具有search-2 ，依此类推。

为了使我们的示例有用，我们需要在CSS中添加一些规则以突出显示所生成的元素。 例如，您可以应用以下规则。

.search {
  background-color: #0096ff;
  color: #fff;
}

#search-1 {
  font-weight: bold;
}

您可以在下面查看此示例的实时版本。 尝试输入页面上显示的现有单词之一以查看效果。

见笔Blast.js搜索例如由SitePoint（ @SitePoint上） CodePen 。

现有元素呢？

现在，我们已经了解了Blast.js的工作原理，这是一个需要回答的重要问题。 由于我们将.blast()方法应用于容器，如果该容器已经包含文本节点以外的其他元素，该怎么办？ 例如，如果对下一段应用爆炸，会发生什么？

<p>Hello <span>World</span>!</p>

Blast.js不会破坏您的DOM树。 在这种情况下，将不会删除现有的span元素，而是将创建一个新的（具有blast类的元素）。 通过在上一段中执行$('p').blast() ，我们产生以下结果：

<p class="blast-root">
  <span class="blast">Hello</span>

  <span>
    <span class="blast">World</span>
  </span>
  <span class="blast">!</span>
</p>

最后：如果这个现有的span元素实际上是Blast.js生成的span怎么办？ 答案取决于您想做什么。

假设我们已将.blast()方法应用于将delimiter选项设置为'word'的段落，如果再次应用相同的方法，则在创建新元素之前，将删除先前生成的元素，即使新元素调用使用搜索而不是定界符。

但是，如果您搜索了一个词，然后再次调用.blast()方法来搜索一个新词，则旧的搜索将不会被删除。 在上一部分的最后一个示例中，尝试删除.blast(false)调用。 在这种情况下，新搜索将突出显示，而旧搜索也将突出显示。

结论

Blast.js并非对所有人有用，有些人可能认为完全没有必要。 但是，如果要为文本设置动画，这可能是您可以找到的最佳选择之一。

如上所述，您可以找到其他选项来定制生成的元素。 如果选择，您甚至可以禁用ARIA属性。

如果您对如何以创造性的方式使用它有任何想法，或者您已经使用此工具或其他工具为文本设置动画，请随时在讨论中告知我们。

From: https://www.sitepoint.com/animating-text-with-blast-js/