如何從行尾（SVG）繪製動畫？

我有這樣的SVG動畫HERE，現在如果你看到SVG，你會看到虛線拿得出，繪製線條的代碼如下：如何從行尾（SVG）繪製動畫？

$(document).ready(function() { 

    $("#sec-three").waypoint(function(direction) { 

    /* code for first line animation */ 
    var offset = parseInt($('#move-opacity').attr("offset")); 
    setInterval(function() { 
     $('#move-opacity').attr("offset", offset + "%"); 
     if (offset < 100) { 
     $('#last-opacity').attr("offset", (offset + 1) + "%"); 
     } 
     offset++; 

    }, 25); 

    /* code for secound line animation */ 
    var offset1 = parseInt($('#move-opacity-1').attr('offset')); 
    setInterval(function() { 
     $('#move-opacity-1').attr("offset", offset + "%"); 
     if (offset < 90) { 
     $('#last-opacity-1').attr("offset", (offset + 1) + "%"); 
     } 
     offset++; 

    }, 25); 

    $("#lock").attr("class" , "animated bounceInUp"); 
    $("#quote-icon").attr("class" , "animated bounceInUp delay-05s"); 

    }, { 
    offset: '75%' 
    }); 

    $("#lock").addClass("animated bounceInUp"); 

});

現在動畫繪製第一條黑色虛線是完美的，但第二條虛線（黃色虛線）的繪製動畫不是我想要的方式，IE我真的很喜歡這條線是在相反的方向上繪製的，到現在爲止，箭頭先被繪製出來，我真正想要的是動畫從行尾開始，我如何才能做到這一點？

來源

2015-12-01 Alexander Solonik

您只需要在下面的代碼塊中反轉黃色漸變的linearGradient定義，並且還可以反轉相應的jQuery代碼。

<defs> 
    <linearGradient id="yellow-gradient"> 
    <stop offset="100%" id="move-opacity-1" stop-opacity="0" stop-color="#ffde17" /> 
    <stop offset="100%" id="last-opacity-1" stop-opacity="1" stop-color="#ffde17" /> 
    </linearGradient> 
</defs>

var offset1 = parseInt($('#move-opacity-1').attr('offset')); 
setInterval(function() { 
    if (offset1 > 0) { 
    $('#move-opacity-1').attr("offset", offset1 + "%"); 
    $('#last-opacity-1').attr("offset", (offset1 + 1) + "%"); 
    } 
    offset1--; 
}, 25);

Fiddle Demo

來源

2015-12-01 06:20:42 Harry

如何從行尾（SVG）繪製動畫？

回答

相關問題