Question

我是svg动画的新手。我在tweenmax的帮助下创建了一个svg动画，但现在动画从底部开始。我希望它从顶部开始。

HTML

  <div id="sliderWrapper">
    <div id="slider"></div>
</div>
<div>
  <button id="play">play</button> 
  <button id="reverse">reverse</button>
  <button id="pause">pause</button>
  <button id="resume">resume</button> 
</div>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">





<path class="kiwi" stroke-width="5"  style="fill:none;stroke:#ffffff;stroke-miterlimit:10;" d="M393.667,644.667v-50.666
  c0,0,1.667-20.667-21.333-20.667s-112,0-112,0S235,573.335,235,598.001s0,35.666,0,35.666s3.333,20.5-20.5,20.5s-37.833,0-37.833,0
  S156,656,156,628.667s0-87.333,0-87.333V428.001h15V323.334c0,0-3-28.333,24.667-28.333S234,295,234,295s24.667-2.333,24.667,27.333
  s0,121,0,121s0.333,25.333,32.667,25.333s68.667,0,68.667,0l44.334-21l-12.667-38.333l-13.333-2.333H351
  c0,0-29.333,2.667-29.333-21.667c0-24.333,0-17.667,0-17.667s-1-20,27-20s134.333,0,134.333,0s32-4.667,32,30V395
  c0,0-1.667,26.333,28,26.333s70,0,70,0L618.667,363l5.666-32.667V308c0,0-1.999-21.333,27.667-21.333h6.333c0,0,17,2.667,17-10
  s0-49.667,0-49.667l-8-13.667L615,215l-40.334,1h-40c0,0-15.667-0.333-15.667,15.667c0,0-2,14,14.667,14c0,0,8.422,0,11.057,7.105
  c0.488,1.317,0.777,2.878,0.777,4.729v11.167c0,0-0.167,11-17.167,11s-77,0-77,0L378,271l-7.667-53l-2.667-14h-42.333
  c0,0-26.333,2-26.333-18.667S299,163,299,163s-2.667-20.667,30.667-20.667s60.667,0,60.667,0S416,145.667,416,125.667
  c0,0-0.334-16.333-27.334-16.333h-171"/>
<filter id="pictureFilter" >
  <feGaussianBlur stdDeviation="0" />
</filter>
</svg>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js'></script>

JS

//THE MEAT
var orig = document.querySelector('path'), length, timer;

var obj = {length:0,
           pathLength:orig.getTotalLength()};

orig.style.stroke = '#f60';

var t = TweenMax.to(obj, 10, {length:obj.pathLength, onUpdate:drawLine, ease:Linear.easeNone})

function drawLine() {
  orig.style.strokeDasharray = [obj.length,obj.pathLength].join(' ');
  updateSlider();
}


//A bunch of jQuery UI stuff

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:0.1,
  slide: function ( event, ui ) {
    t.pause();
    t.progress( ui.value/100);
    }
}); 

function updateSlider() {
  $("#slider").slider("value", t.progress()*100);
}       

$("#play").click(function() {
        t.play();
    if(t.progress() === 1){
      t.restart();
      from(393.667);
      fromTo(334-16);
    }
});

$("#pause").click(function() {
        t.pause();
});

$("#reverse").click(function() {
        t.reverse();
});

$("#resume").click(function() {
        t.resume(); 
});

Here is my fiddle

Answer 1

我可以想到两种方法：

按相反顺序编写路径。
使用t.reverse(0)创建补间对象后立即强制执行反向动画。 Fiddle.

Answer 2

为什么不使用 http://maxwellito.github.io/vivus/ 它可以帮到你很多插件有

var myVivus = new Vivus('my-svg-id');
myVivus
  .stop()
  .reset()
  .play(2)

所以你需要用于动画svg：）

SVG动画从顶部而不是从底部

2 个答案: