Anime.js 和 MathML

Question

我刚刚发现了anime.js，感觉它是我需要的正确工具（在2D 中为一些网络教程制作动画）。 问题是我使用的是 MathML（HTML5 标准的一部分），它使用“数学”标签。

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)

在火狐中

"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)

在火狐中

"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，结果相同。

我玩弄了代码，动画又回来了 + 如果我去掉“数学”标签，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/