words

定义是否以及如何拆分单词。
拆分的单词元素可以通过 TextSplit 实例的 words 属性返回的数组进行访问。

const { words } = splitText(target, { words: true });

在内部，对于支持的浏览器，单词拆分是使用本地的 Intl.Segmenter 对象完成的，这允许对不使用空格的语言（如日语、中文、泰语、老挝语、高棉语、缅甸语等）进行单词拆分，并在较旧的浏览器中回退使用 String.prototype.split() 。

默认分割封装器

默认情况下，每个单词都被封装在一个具有以下样式和数据属性的 span 元素中：

<span style="display: inline-block;" data-line="0" data-word="0">Split</span>
<span style="display: inline-block;" data-line="0" data-word="1">by</span>
<span style="display: inline-block;" data-line="0" data-word="2">words</span>

自定义拆分封装器

可以通过传递一个包含拆分参数的对象，或者通过传递一个自定义的 HTML 模板 字符串来配置拆分封装器。

在按行拆分时为文字添加动画

每次行拆分都会覆盖现有的单词元素，这会导致字体加载完成后或每次文本元素调整大小时，正在运行的单词动画停止。
在 split.addEffect() 方法中声明动画，可以确保在调整大小之间持续播放，并在使用 split.revert()时自动恢复。

const split = splitText(target, params);

split.addEffect(({ lines, words, chars }) => animate([lines, words, chars], {
  opacity: { from: 0 },
}));

split.revert(); // This also reverts the animation declared with addEffect

接受

Boolean
Object of Split parameters
HTML template String

默认

true

单词代码示例

import { animate, splitText, stagger } from 'animejs';

const { words } = splitText('p', {
  words: { wrap: 'clip' },
})

animate(words, {
  y: [
    { to: ['100%', '0%'] },
    { to: '-100%', delay: 750, ease: 'in(3)' }
  ],
  duration: 750,
  ease: 'out(3)',
  delay: stagger(100),
  loop: true,
});

<div class="large centered row">
  <p class="text-xl">Split text by words.<br>単語ごとに分割します。</p>
</div>
<div class="small row"></div>

lines
chars