vivus.js可以与任何svg一起使用吗?

时间:2016-10-21 09:47:42

标签: svg vivus

我是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>

0 个答案:

没有答案