你能“弯曲”周围贝塞尔路径的SVG动画时?

问题描述 投票:2回答:1

I S再以任何方式“弯曲”的SVG对象作为其沿贝塞尔路径动画?我一直使用大多为GSAP动画的东西。其结果将是这个样子:https://www.behance.net/gallery/49401667/Twist ED-字母-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的?

animation svg bezier
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.