2

我是 svg 动画的新手。我想和 vivus.js 一起工作。我已经建立了测试环境。并从这里下载了一个 svg：https ://www.svgimages.com/hand.html 我尝试对其进行动画处理，但它不起作用，但是当我用示例 svg 替换它时它可以工作。有什么帮助吗？

 <div class="section matrix">
      <div class="content">
        <div class="box box-50">
          <p>
            This should display the obturateur SVG like on the demo page. The strokes must be orange. The element must remain an <i>object</i> tag.
          </p>
          <button onclick="this.textContent=(document.querySelector('object#obt')?'Pass!':'Failed.')">Test</button>
        </div><div class="box box-50">
          <object id="obt" data="hand.svg" type="image/svg+xml" style="width: 100%; max-height: 250px;"></object>
        </div>
      </div>
    </div>

    <script>

      // Display warning message if not on http server
      if (window.location.protocol === 'file:') {
        var configIntro = document.getElementById('config-instructions');
        configIntro.style.display = 'block';
      }

      // Obturateur
      var obt1 = new Vivus('obt', {
        type: 'delayed',
        duration: 150
      });

      // polaroid-dynamic
      var polaroidD = new Vivus('polaroid-dynamic', {
        file: 'polaroid.svg',
        type: 'scenario-sync',
        duration: 20
      });

      var hiD = new Vivus('hi-dynamic', {
        file: 'hi-there.svg',
        type: 'scenario-sync',
        duration: 20,
        start: 'manual'
      });

      var synthD = new Vivus('synth-dynamic', {
        file: 'synth.svg',
        type: 'oneByOne',
        duration: 200,
        start: 'manual',
        animTimingFunction: Vivus.EASE_IN
      });

      function easeOutBounce (x) {
        var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
        var rate = Math.pow(base,1.5);
        var rateR = Math.pow(1 - x, 2);
        var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
        return (1- rateR) + (progress * rateR);
      }

    </script>
4

0 回答 0