Можете ли вы "согнуть" SVG вокруг безье пути во время анимации? - PullRequest
Новая
       61

Можете ли вы "согнуть" SVG вокруг безье пути во время анимации?

0 голосов
/ 12 января 2019

Есть ли какой-нибудь способ "согнуть" объект SVG, так как он анимируется по безье? Я использовал в основном GSAP для анимации. Эффект будет выглядеть примерно так: https://www.behance.net/gallery/49401667/Twisted-letters-2 (тот, что синим карандашом). Мне удалось заставить красную стрелку анимироваться вдоль пути, но форма остается неизменной все время. Мне бы хотелось, чтобы он следовал по зеленому пути и сгибался по ходу кривой, чтобы в конце анимации он имел форму фиолетовой стрелки. Вот кодекс .

Код 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?

1 Ответ

0 голосов
/ 05 февраля 2019

Вот как бы я это сделал:

Для начала мне нужен массив точек, чтобы нарисовать стрелку и дорожку. Я хочу переместить стрелку на дорожку, и стрелка должна сгибаться вслед за дорожкой. Чтобы добиться этого эффекта с каждым кадром анимации, я рассчитываю новую позицию точек для стрелки.

Также: дорожка в два раза длиннее, чем кажется.

Пожалуйста, прочитайте комментарии в коде 

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>
...