從頂部SVG動畫不從底部

我是新來的SVG動畫。我在tweenmax的幫助下創建了一個svg動畫，但現在動畫從底部開始。我希望它從頂部開始。從頂部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>

//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

來源

2014-12-22 user3232285

http://jsfiddle.net/Lmc0m242/2/ – user3232285

請把你的代碼放在這裏給人們一個更好的迴應機會。 – rfornal

這裏是我的小提琴http://jsfiddle.net/Lmc0m242/2/ – user3232285

我能想到的兩種方法可以做到這一點：

寫你的路徑相反的順序。
使用t.reverse(0)創建補間對象後立即強制反向動畫。 Fiddle.

來源

2014-12-22 12:13:12

但是如何以相反的順序編寫代碼。 – user3232285

爲什麼不使用 http://maxwellito.github.io/vivus/ 它可以幫助你很多插件有

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

因此，所有你需要使用動畫SVG :)

來源

2014-12-24 17:49:12

感謝您的重播..，我會盡力... – user3232285

@ user3232285沒問題，希望它能幫助你:) –

從頂部SVG動畫不從底部

回答

相關問題