SVG анимация через SMIL. Повторите ошибку анимации в Safari - PullRequest
Новая
       30

SVG анимация через SMIL. Повторите ошибку анимации в Safari

0 голосов
/ 21 мая 2019

У меня относительно простой путь, анимированный через SMIL. Все работает как положено в Chrome и Firefox. Поддержка IE / Edge не имеет значения.

Safari, однако, ведет себя странно и его легко воссоздать. К сожалению, крайне важно, чтобы Safari работал. 

<nav>
  <button id="button1" onClick="document.getElementById('animate1').beginElement()">1</button>
  <button id="button2" onClick="document.getElementById('animate2').beginElement()">2</button>
  <button id="button3" onClick="document.getElementById('animate3').beginElement()">3</button>
  <button id="button4" onClick="document.getElementById('animate4').beginElement()">4</button>
  <button id="button5" onClick="document.getElementById('animate5').beginElement()">5</button>
</nav>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  width="100%"
  height="100%"
  viewBox="0 0 1000 1000"
  style="enable-background:new 0 0 1000 1000;"
  xml:space="preserve"
  preserveAspectRatio="none">

  <path d="M0,0 830,0 1000,300 1000,1000 500,1000 80,1000z">

    <animate id="animate1" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M0,0 830,0 1000,300 1000,1000 500,1000 80,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate2" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M150,0 750,0 1000,150 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate3" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M50,0 750,0 1000,150 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate4" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M250,0 750,0 1000,450 1000,1000 500,1000 0,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />
    <animate id="animate5" attributeName="d" begin="indefinite" dur=".3s" fill="freeze" keyTimes="0;1" to="M0,0 930,0 1000,600 1000,1000 500,1000 80,1000z" calcMode="spline" keySplines="0.4, 0, 0.2, 1" />

  </path>
</svg>

Codepen: https://codepen.io/anon/pen/vwWKYN

При нажатии любой кнопки путь оживляется. Дополнительные нажатия кнопок будут правильно анимировать SVG, пока первая выбранная кнопка не будет нажата во второй раз.

например. Нажмите на 4. 1,2,3,5 будет работать, пока вы не нажмете 4 снова. Когда вы нажимаете 4 раза во второй раз, анимация останавливается, и вы должны выбрать 1,2,3,5 в любом порядке, чтобы «разблокировать» анимацию. Нажав любую кнопку, кроме 4, они продолжат анимацию.

Я потратил на это несколько часов и пытался добавить 'from' в дополнение к 'to', изменил пути, порядок, keySplines, keyTimes. Я также создал функцию js с тем же результатом.

Примечание. Я стараюсь избегать использования сторонней библиотеки. Я понимаю, что SMIL не так хорош, как GSAP или Snap.js, но это все, что мне нужно для анимации, и это в основном работает.

Спасибо за любую помощь!

...