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

如何从行尾（SVG）绘制动画？

1 个答案: