javascript - 如何从行尾(SVG)绘制动画？

Question

我有这个 SVG 动画 HERE ，现在如果你看到 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");

}); 

现在第一条黑色虚线的动画绘制是完美的，但是第二条虚线(黄色虚线)的绘制动画不是我想要的样子，I.E.我真的很想在相反的方向画线，因为现在先画箭头，我真正想要的是动画从线的末端开始，我如何才能做到这一点？

Answer 1

您只需要像下面的代码块一样反转黄色渐变的 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