svg animate marker-end/marker-start с анимацией изогнутого пути

у меня есть изогнутые пути, которые анимируются с помощью элемента animate. он анимирует путь в сочетании с @keyframes, но когда я добавляю маркеры внутри изогнутого пути, маркеры не анимируются. я протестировал один, используя простой путь, изменив атрибут значений пути. он отлично работал, используя простой путь, но как мне заставить элементы маркера анимироваться с помощью изогнутого пути?

демо codepen: https://codepen.io/tfss/pen/yZoBLo с использованием простого и изогнутого пути


svg svg-animate
person telo78    schedule 04.02.2019    source источник
comment
прочитайте bl.ocks.org/darosh/0c33c72c6a18264eadb2, вы заметите, что значение анимации включает начало стрелки и конечное положение   -  person Alen.Toma    schedule 04.02.2019

Ответы (1)


arrow_upward
3
arrow_downward

Поскольку у вас есть кривая Безье, вы можете рассчитать точки, чтобы нарисовать кривую от начала координат до нового положения. Чтобы понять, что будет дальше, вам нужно понять, что такое кривая Безье.

В следующем примере я использую диапазон типов ввода для изменения кривой. Вместо этого вы можете анимировать его. Пожалуйста, прочитайте комментарии в коде.

//the points used to draw the final curve
let points = [[308.7, 34.9],[381.3, 37.4],[444.3, 78],[478.7,137.5]];
//the position of the final point of the actual curve on the final curve.
let t = 0.5;
//the points for the actual curve
let newPoints = getBezierPoints(t);
drawCBezier(newPoints, the_bezier);

// on input recalcalculate the points for the curve and the curve
T.addEventListener("input", function() {
  t = this.value;
  newPoints = getBezierPoints(t);
  drawCBezier(newPoints, the_bezier);
});


function getBezierPoints(t) {
  let helperPoints = [];

  // helper points 0,1,2
  for (let i = 1; i < 4; i++) {
    //points.length must be 4 !!!
    let p = lerp(points[i - 1], points[i], t);
    helperPoints.push(p);
  }

  // helper points 3,4
  helperPoints.push(lerp(helperPoints[0], helperPoints[1], t));
  helperPoints.push(lerp(helperPoints[1], helperPoints[2], t));

  // helper point 5 is where the first Bézier ends and where the second Bézier begins
  helperPoints.push(lerp(helperPoints[3], helperPoints[4], t));

  // points for the dynamic bézier
  let firstBezier = [
    points[0],
    helperPoints[0],
    helperPoints[3],
    helperPoints[5]
  ];
  
  return firstBezier;
}

function lerp(A, B, t) {
  // a virtual line from A to B
  // get the position of a point on this line
  // if(t == .5) the point in in the center of the line
  // 0 <= t <= 1
  let ry = [
    (B[0] - A[0]) * t + A[0], //x
    (B[1] - A[1]) * t + A[1] //y
  ];
  return ry;
}

function drawCBezier(points, path) {
  let d = `M${points[0][0]},${points[0][1]} C`;
  // points.length == 4
  for (let i = 1; i < 4; i++) {
    d += ` ${points[i][0]},${points[i][1]}`;
  }
  
  path.setAttributeNS(null, "d", d);
}
svg {
  border: 1px solid;
  width:100vh
}
<input type="range" value=".5" min="0" max="1" step=".01" id="T">
<svg viewBox="290 0 200 150">
  <defs>
  <marker
    id="arrow"
    orient="auto-start-reverse"
    viewBox="0 0 7.1 11.5"
    markerWidth="7.1"
    markerHeight="11.5"
    markerUnits="strokeWidth"
    refX="5" refY="5.75">
    <path d="M1 11.5L0 10.4L5.1 5.7L0 1L1 0L7.1 5.7L1 11.5" fill="#00897b"></path> 
  </marker>
  
  <marker id="circle" viewBox="0 0 6 6" refX="1" refY="3"
			markerUnits="userSpaceOnUse" orient="auto"
			markerWidth="6" markerHeight="6">
			<circle cx="3" cy="3" r="3" fill="#4caf50"/>
   </marker>
</defs>

  
  <path id="the_bezier" d=""
    marker-start="url(#circle)"
    marker-end="url(#arrow)"
    stroke-width="2"
    fill="none"
    stroke="blue" />
</svg>

Этот пост о кривых Безье может оказаться полезным: Как добавить точку к кубической кривой Безье в SVG

Для другого подхода вы можете прочитать этот ответ: Анимация обводки, как прикрепить другой путь к появившейся обводке?

Надеюсь, это поможет.

person enxaneta    schedule 04.02.2019