字符

定义字符是否以及如何进行拆分。
拆分后的字符元素可以通过 chars 属性（属于 TextSplit 实例）返回的数组进行访问。

const { chars } = text.split(target, { chars: true });

默认分割包装器

默认情况下，每个字符都包裹在一个 span 元素中，并带有以下样式和数据属性

<span style="display: inline-block;" data-line="0" data-word="0" data-char="0">H</span>
<span style="display: inline-block;" data-line="0" data-word="0" data-char="1">E</span>
<span style="display: inline-block;" data-line="0" data-word="0" data-char="2">Y</span>

自定义分割包装器

可以通过传递包含拆分参数的 Object，或传递自定义的 HTML 模板 String 来配置拆分包装器。

在按行拆分时也对字符进行动画处理

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

const split = text.split(target, params);

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

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

接受

布尔值
分割参数的 Object
HTML 模板 String

默认值

false

字符代码示例

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

const { chars } = text.split('p', {
  chars: { wrap: 'clip' },
});

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

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