Anime.js и MathML - PullRequest
Новая
       9

Anime.js и MathML

0 голосов
/ 03 декабря 2018

Я только что обнаружил 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)

В 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 с тем же результатом.

Я играл с кодом, и анимация возвращается + сообщение об ошибке исчезает в Firefox и Safari, если я избавляюсь от тега "math".Но тогда, конечно, математическая формула - беспорядок, который не помогает.Но, похоже, проблема связана только с этим математическим тегом.Я также пытался стилизовать, развернуть тег math и внутренние теги, но ошибка остается.

Я мог понять, что этот тег не поддерживается animate.js, но анимация работает нормально и без каких-либо ошибок в моем Coda2(программное обеспечение для веб-разработки) на Mac, в отдельном браузере.Так что это кажется очень зависимым от браузера, но пока это единственный браузер, который, кажется, считает скрипт действительным.

Я не нашел в сети ничего, что касалось бы и anime.js, и MathML, так что это сложночтобы сказать, если это ошибка или ошибка с моей стороны.

Спасибо.

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

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете использовать оболочку или изменить функцию getCSSValue в библиотеке animejs.По сути, эта функция ищет свойство style для этой конкретной цели.

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

Когда код достигает строки if, ваш mi .letter не имеет этого атрибута, и вызов функции завершается неудачно и всплывает.

Использование предложенного обходного пути, вы можете создать div, который содержит ваши mathML теги: 

<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/

...