Anime.js 和 MathML

Question

我刚刚发现 anime.js，感觉它是满足我需要的正确工具（以 2D 动画制作一些网络教程）。问题是我正在使用 MathML（HTML5 标准的一部分），它使用 "math" 标签。

HTML

<math>
    <mrow>
        <msqrt>
            <mrow>
                <msup class="ml4">
                    <mi class="letter">b</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
        </msqrt>   
    </mrow>
</math>

JS

<script type="text/javascript" src="anime.min.js"></script>
<script>
    anime.timeline({loop: true})
    .add({
        targets: '.ml4 .letter',
        opacity: [0, 1],
        scale: [0.2, 1],
        duration: 800
    });
</script>

当我尝试简单地为数学标签（不透明度、比例、持续时间）中的字母制作动画时，我得到：

如果我用anime.min.js (2.0)

在 Firefox 中

"TypeError: right-hand side of 'in' should be an object, got undefined" 
-> anime.min.js:9:136

在 Safari 中

"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
 -> "B" -> anime.min.js:9:145

如果我用anime.js (2.0)

在 Firefox 中

"TypeError: right-hand side of 'in' should be an object, got undefined"
-> anime.min.js:346:5

在 Safari 中

"TypeError: a.style is not an Object. (evaluating 'b in a.style')"
-> "getCSSValue" -> anime.min.js:346

在这两种情况下，数学公式看起来都很好，但动画不工作。我尝试了以前版本的 anime.js 结果相同。

我试了一下代码，动画又回来了 + 如果我去掉 "math" 标签，Firefox 和 Safari 上的错误消息就会消失。但是，当然，数学公式是一团糟，这没有任何帮助。但似乎这个问题只与这个数学标签有关。我还尝试对数学标签和内部标签设置样式、取消样式，但错误仍然存在。

我可以理解 animate.js 不支持此标签，但动画在我的 Mac 上的 Coda2（网络开发软件）中运行正常，并且在它自己的专用浏览器上没有任何错误。所以这似乎非常依赖于浏览器，但到目前为止，它是唯一一个似乎认为该脚本有效的浏览器。

我在网络上没有找到任何同时解决 anime.js 和 MathML 的内容，所以很难说这是错误还是我的错误。

谢谢。

https://jsfiddle.net/bt4u23rh/1/

Answer 1

您可以使用包装器，也可以修改 animejs 库中的函数 getCSSValue。基本上，该函数会为该特定目标查找 style 属性。

function getCSSValue(el, prop) {
  if (prop in el.style) {
    return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
  }
}

当代码到达 if 行时，您的 mi .letter 没有该属性，函数调用失败并冒泡。

使用建议的解决方法，您可以创建一个包含 mathML 标签的 div：

<div class="letterWrapper">
<math>
  <mrow>
    <msqrt>
      <mrow>
        <msup class="ml4">
          <mi class="letter">b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
    </msqrt>   
  </mrow>
</math>
</div>

https://jsfiddle.net/bt4u23rh/2/

Anime.js 和 MathML

Anime.js and MathML

mathml

anime.js