Question

我有一个通过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以外的任何按钮，它们将继续进行动画处理。

我在此上花费了几个小时，并尝试除了添加“发件人”之外，还添加了“发件人”，更改的路径，顺序，keySplines，keyTimes。我还创建了具有相同结果的js函数。

注意：我试图避免使用第三方库。我意识到SMIL不如GSAP或Snap.js好，但这是我需要制作动画的全部，并且大多数情况下都可以。

感谢您的帮助！

通过SMIL的SVG动画。在Safari中重复动画错误

0 个答案: