Отобразить стрелку для анимированной линии

Question

Я анимирую линию от точки 1 до точки 2 с помощью https://jsfiddle.net/arungeorgez/r9x6vhcb/4/. Как добавить стрелку к той же линии?

<style>
  .key-anim1 {
    -webkit-animation: Drawpath 1s linear forwards;
    animation: Drawpath 1s linear forwards;
    stroke-dasharray: 0, 600;
  }

  @-webkit-keyframes Drawpath {
    from {
      stroke-dasharray: 0, 600;
    }
    to {
      stroke-dasharray: 600, 600;
    }
  }
  @keyframes Drawpath {
    from {
      stroke-dasharray: 0, 600;
    }
    to {
      stroke-dasharray: 600, 600;
    }
  }
  </style>

Answer 1

<animate attributeType="XML" 
         attributeName="opacity" 
         from="0" to="1" 
         dur=".08s" begin=".23s" 
         repeatCount="0" fill="freeze" 
/>

, кажется, дает достойный эффект для вашего случая, так как стрелка мала.Однако для более тонкой настройки можно использовать <animateTransform> или <animateMotion> вместо <animate>, в зависимости от случая.

Вот спецификация для SMIL Animations .

Хотя эффект легко достижим с помощью CSS-анимации (в конце я только анимирую opacity выше), я склонен рекомендовать SMIL Animations для <svg> s, поскольку они предоставляют гораздо больше возможностей дляуправление различными аспектами анимации, намного превосходящими опции CSS, IMHO.

function makeSVG(tag, attrs) {
  var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var k in attrs)
    el.setAttribute(k, attrs[k]);
  return el;
}

$(document).ready(function() {
  var line = makeSVG('line', {
    id: "-",
    class: "key-anim1",
    x1: 20,
    y1: 20,
    x2: 120,
    y2: 120,
    stroke: 'black',
    'stroke-width': 2,
    'marker-end': "url(#arrow)"
  });
  document.getElementById("svg").appendChild(line);
});

.key-anim1 {
    -webkit-animation: Drawpath 1s linear forwards;
    animation: Drawpath 1s linear forwards;
    stroke-dasharray: 0, 600;
  }

  @-webkit-keyframes Drawpath {
    from {
      stroke-dasharray: 0, 600;
    }
    to {
      stroke-dasharray: 600, 600;
    }
  }
  @keyframes Drawpath {
    from {
      stroke-dasharray: 0, 600;
    }
    to {
      stroke-dasharray: 600, 600;
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg height="600" width="600" id="svg">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth" opacity="0">
      <path d="M0,0 L0,6 L9,3 z" fill="#000" />
      <animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".08s" begin=".23s" repeatCount="0" fill="freeze" />
    </marker>
  </defs>
</svg>

Примечание: простой способ точной настройки любая анимацияэто уменьшить скорость в 10 раз.Таким образом, вы сможете сделать его идеальным и увеличить его после того, как будете довольны тем, как он работает в 10 раз медленнее.Иногда, когда вы ускоряете его обратно, вам нужно внести незначительные корректировки из того, как это было бы "технически правильно", чтобы уравновесить оптические иллюзии (но это часто далеко в страну "невидимых деталей").

---

Если вы хотите, чтобы создатель был видимым и двигался вместе с линией, вам нужно отбросить черту (потому что теперь ваша линия имеет одинаковую длину от начала до конца анимации, но она нарисована пунктирной линией, и выпросто перемещая промежутки в этой пунктирной линии, чтобы она выглядела как растущая).Вместо этого вам нужно сначала сделать его коротким и оживить его в сторону увеличения.

Вот пример:

<svg height="600" width="600" id="svg">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#000" opacity="0">
        <animate attributeType="XML" attributeName="opacity" from="0" to="1" dur=".1s" repeatCount="0" fill="freeze" />
      </path>
    </marker>
  </defs>
  <line id="-" x1="20" y1="20" x2="21" y2="21" stroke="black" stroke-width="2" marker-end="url(#arrow)">
      <animate attributeType="XML" attributeName="x2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
      <animate attributeType="XML" attributeName="y2" from="21" to="120" dur="1s" repeatCount="0" fill="freeze" />
  </line>
</svg>