跳到主要内容

Latex

Click to preview animation

Open in Playground
import {Latex, makeScene2D} from '@motion-canvas/2d';
import {createRef, waitFor} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const tex = createRef<Latex>();
  view.add(<Latex ref={tex} tex="{{y=}}{{a}}{{x^2}}" fill="white" />);

  yield* waitFor(0.2);
  yield* tex().tex('{{y=}}{{a}}{{x^2}} + {{bx}}', 1);
  yield* waitFor(0.2);
  yield* tex().tex(
    '{{y=}}{{\\left(}}{{a}}{{x^2}} + {{bx}}{{\\over 1}}{{\\right)}}',
    1,
  );
  yield* waitFor(0.2);
  yield* tex().tex('{{y=}}{{a}}{{x^2}}', 1);
});

Latex 组件用于显示数学公式并对其进行动画。

定义 LaTex​

您可以使用 tex 属性指定要显示的 LaTex 公式。与 Txt 节点类似，您可以分别使用 fill 和 fontSize 属性控制文本的颜色和大小。

确保始终设置某种 fill 颜色，否则什么都不会显示！

Click to preview animation

Open in Playground
import {Latex, makeScene2D} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  view.add(
    <Latex
      // 尝试编辑下面的公式：
      tex="a^2 + b^2 = c^2"
      fill="white"
      fontSize={32}
    />,
  );
});

动画 LaTex​

我们可以通过 tween tex 属性来动画 LaTex。要启用删除、插入和转换动画，您必须将公式分成几个部分。您可以通过提供字符串数组来做到这一点：

<Latex tex={['a^2', '+', 'b^2', '=', 'c^2']} />

或者使用大括号 ({{}}) 语法：

<Latex tex="{{a^2}} + {{b^2}} = {{c^2}}" />
// 等同于
<Latex tex={['a^2', '+', 'b^2', '=', 'c^2']} />

您还可以混合使用两者：

<Latex tex={['{{a}}^2', '+',  '{{b}}^2', '=', '{{c}}^2']} />
// 等同于
<Latex tex={['a','^2', '+', 'b', '^2', '=', 'c', '^2']} />

仅存在于源公式中的 tex 部分被视为已删除并被淡出。类似地，仅存在于目标公式中的部分被淡入。源和目标公式中都存在的 tex 部分将被 tween：

Click to preview animation

Open in Playground
import {Latex, makeScene2D} from '@motion-canvas/2d';
import {createRef, waitFor} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const tex = createRef<Latex>();
  view.add(<Latex ref={tex} tex="{{1}} + {{2}}" fill="white" />);

  yield* waitFor(0.5);
  yield* tex().tex(['2', '+', '3', '+', '4'], 1);
});

如果给定的 tex 部分在源公式和目标公式中出现多次，但出现次数不匹配，该部分将被复制或合并。您可以在上面的示例中看到这一点。公式开始时只有一个加号 (+)，但结束时有两个。

常见陷阱​

转义斜杠​

反斜杠字符 (\) 在 JavaScript 中用作转义字符。要将其用作 LaTex 公式的一部分，您需要通过将其加倍来转义它：

node().tex('{{\\frac{1}{2}}}');

请注意，这不适用于 JSX 字符串属性内：

// 不需要转义：
<Latex tex="{{\frac{1}{2}}" />
// 需要转义：
<Latex tex={'{{\frac{1}{2}}'} />

缺少空格​

到目前为止，tex 部分是通过将它们连接在一起而不使用分隔符来放在一起的。如果公式依赖于两个部分之间的空格，这可能会破坏公式。例如，以下公式将破坏：

<Latex tex={['\\Delta', 'y']} />

节点将尝试将其解析为 \\Deltay 而不是正确的 \\Delta y。为了防止这种情况，您应该将 y 部分包装在大括号中：

<Latex tex={['\\Delta', '{y}']} />

这将被解析为 \\Delta{y}，这是正确的。