你能在动画过程中将SVG沿着贝塞尔路径“弯曲”吗？

Question

有没有办法在SVG对象沿着贝塞尔路径动画时“弯曲”它？我一直在使用GSAP来进行动画制作。效果看起来像这样：https://www.behance.net/gallery/49401667/Twisted-letters-2（带有蓝色铅笔的那个）。我已经成功让红色箭头沿着路径动画，但形状始终保持不变。我希望它沿着绿色路径移动并随着曲线弯曲，以便在动画结束时具有紫色箭头的形状。这是codepen。

GSAP代码：

var motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#arrow1"});
var tl1 = new TimelineMax({paused:true, reversed:true});
tl1.set("#arrow1", {xPercent:-50, yPercent:-50});
tl1.to("#arrow1", 4, {bezier:{values:motionPath, type:"cubic"}});


$("#createAnimation").click(function(){
    tl1.reversed() ? tl1.play() : tl1.reverse();
});

有没有只使用GSAP就能实现这个的方法？还是需要类似Pixi的东西？

- comp1201

---

看起来Inkscape有一个工具可以在静态图像上实现这个功能：https://graphicdesign.stackexchange.com/questions/103080/inkscape-bend-a-vector-along-a-circular-arc - Sphinxxx

Answer 1

这是我会做的方式：

首先，我需要一个点数组来绘制箭头和轨道。我想在轨道上移动箭头，并且箭头应该沿着轨道弯曲。为了在动画的每一帧中实现这种效果，我正在计算箭头的点的新位置。

另外：轨道的长度看起来是它实际长度的两倍。

请查看代码中的注释。

let track = document.getElementById("track");
let trackLength = track.getTotalLength();
let t = 0.1;// the position on the path. Can take values from 0 to .5
// an array of points used to draw the arrow
let points = [
[0, 0],[6.207, -2.447],[10.84, -4.997],[16.076, -7.878],[20.023, -10.05],[21.096, -4.809],[25.681, -4.468],[31.033, -4.069],[36.068, -3.695],[40.81, -3.343],[45.971, -2.96],[51.04, -2.584],[56.075, -2.21],[60.838, -1.856],[65.715, -1.49],[71.077, -1.095],[75.956, -0.733],[80, 0],[75.956, 0.733],[71.077, 1.095],[65.715, 1.49],[60.838, 1.856],[56.075, 2.21],[51.04, 2.584],[45.971, 2.96],[40.81, 3.343],[36.068, 3.695],[31.033, 4.069],[25.681, 4.468],[21.096, 4.809],[20.023, 10.05],[16.076, 7.878],[10.84, 4.997],[6.207, 2.447],[0, 0]
];

function move() {
  requestAnimationFrame(move);
  if (t > 0) {
    t -= 0.001;
  } else {
    t = 0.5;
  }
  let ry = newPoints(track, t);
  drawArrow(ry);
}

move();



function newPoints(track, t) {
  // a function to change the value of every point on the points array
  let ry = [];
  points.map(p => {
    ry.push(getPos(track, t, p[0], p[1]));
  });
  return ry;
}

function getPos(track, t, d, r) {
  // a function to get the position of every point of the arrow on the track
  let distance = d + trackLength * t;
  // a point on the track
  let p = track.getPointAtLength(distance);
  // a point near p used to calculate the angle of rotation
  let _p = track.getPointAtLength((distance + 1) % trackLength);
  // the angle of rotation on the path
  let a = Math.atan2(p.y - _p.y, p.x - _p.x) + Math.PI / 2;
  // returns an array of coordinates: the first is the x, the second is the y
  return [p.x + r * Math.cos(a), p.y + r * Math.sin(a)];
}

function drawArrow(points) {
  // a function to draw the arrow in base of the points array
  let d = `M${points[0][0]},${points[0][1]}L`;
  points.shift();
  points.map(p => {
    d += `${p[0]}, ${p[1]} `;
  });
  d += "Z";
  arrow.setAttributeNS(null, "d", d);
}

svg {
  display: block;
  margin: 2em auto;
  border: 1px solid;
  overflow: visible;
  width:140vh;
}
#track {
  stroke: #d9d9d9;
  vector-effect: non-scaling-stroke;
}

<svg viewBox="-20 -10 440 180">

<path id="track" fill="none"
d="M200,80 
   C-50,280 -50,-120 200,80
   C450,280 450,-120 200,80
   C-50,280 -50,-120 200,80
   C450,280 450,-120 200,80Z" />
   
<path id="arrow" d="" />  
</svg>

- enxaneta

---

我印象深刻。 - ADJenks