如何从末尾绘制动画（SVG）？ [英] How to draw animation from end of the line (SVG)?

问题描述

我有这个SVG动画 这里 ，现在如果您看到SVG，您将看到虚线绘制，绘制线的代码如下：

I have this SVG animation HERE, now if you see the SVG, you will see that the dashed lines get drawn, the code that draws the lines is as follows:

$(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我真的想是线被画在相反的方向，因为现在的箭头首先绘制，我真正想要的是动画从线的结束开始，我该如何做到这一点？

Now the animation drawing for the first black dashed line is perfect, but the drawing animation for second dashed line (the yellow dashed line) is not the way I want it to be, I.E. I would really like is the line gets drawn in the opposite direction, as of now the arrow gets drawn first, what I really want is for the animation to start from the end of the line, how do I make that possible?

推荐答案

您只需要逆转黄色渐变的 linearGradient 像下面的代码块一样，也可以反转相应的jQuery代码。

You just need to reverse the linearGradient definition for the yellow gradient like in the below code block and also reverse the corresponding jQuery code.

<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);

小提示演示

这篇关于如何从末尾绘制动画（SVG）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！