Как вы анимируете внешний файл SVG с аниме. js? - PullRequest
Новая
       112

Как вы анимируете внешний файл SVG с аниме. js?

0 голосов
/ 27 апреля 2020

Я попытался включить файл svg в качестве элемента img, который не работал - аниме. js не распознал svg. Затем поместите его в элемент object, который также не работает.

Так как настроить фреймворк для распознавания SVG и элементов внутри него?

1 Ответ

0 голосов
/ 27 апреля 2020

Вам необходимо использовать элемент object, но вы не можете просматривать файл html напрямую - вам нужно обслуживать его с сервера, например, с помощью Python - на консоли выполните 

python -m http.server 8001

, затем просмотрите его на http://localhost:8001

Вот пример - 

<html>
  <!-- note: must run this from a server for svg to load properly -->
  <!-- eg `python -m http.server 8001` -->
  <!-- see https://stackoverflow.com/questions/11434916/javascript-accessing-inner-dom-of-svg -->
  <head>
    <script src="anime.min.js"></script>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: #222;
      }
      object {
        opacity: 0;
        background: black;
        border: 1px solid #aaa;
      }
    </style>
  </head>
  <body>
    <script>
      function loaded() {

        // get references to svg and subelements

        const svg = document.querySelector("#svg")
        const title = [
          svg.contentDocument.querySelector("#path30"),
          svg.contentDocument.querySelector("#path34"),
        ]
        const subtitle = [
          svg.contentDocument.querySelector("#text54"),
        ]
        const swooshes = [
          svg.contentDocument.querySelector("#path42"),
          svg.contentDocument.querySelector("#path38"),
          svg.contentDocument.querySelector("#path50"),
          svg.contentDocument.querySelector("#path46"),
        ]

        // set some initial values

        svg.style.opacity = 1
        for (const element of title) {
          element.style.opacity = 0
        }
        for (const element of subtitle) {
          element.style.opacity = 0
        }
        for (const element of swooshes) {
          element.style.opacity = 0
        }

        // animate elements

        anime({
          targets: svg,
          delay: 0,
          duration: 2000,
          background: '#ffffff',
          easing: 'linear'
        })

        anime({
          targets: title,
          opacity: 1,
          delay: 0,
          duration: 2000,
          easing: 'linear',
        })

        anime({
          targets: subtitle,
          opacity: 0.9,
          delay: 2000,
          duration: 2000,
          easing: 'linear',
        })

        let startTime = 3000
        for (let i = 0; i < 4; i++) {
          window.setTimeout(() => {
            anime({
              targets: swooshes[i],
              opacity: 1,
              duration: 2000,
              easing: 'linear',
              direction: 'alternate',
              loop: true,
            })
          }, startTime)
          startTime += 500
        }

      }
    </script>

    <!-- must put svg in an object element -->
    <!-- https://stackoverflow.com/questions/28652648/how-to-use-external-svg-in-html -->
    <object data="Emergent_Logo.svg" type="image/svg+xml" id="svg" onload="loaded()"></object>

  </body>
</html>
...