Движение растровой картинки по трассе в любую сторону при скролле

106

20 декабря 2021, 22:50

У меня есть растровая иконка автомобиля:

<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" 
     viewBox="0 0 672.474 933.78125"> 
	  
<image id="car" transform="scale(2)" xlink:href="https://i.stack.imgur.com/gLbds.png" y="25" x="0"   width="50px" height="50px"/> 
</svg>

И нарисованная в векторном редакторе трасса, вдоль которой должна двигаться иконка:

<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" 
     viewBox="0 0 672.474 933.78125"> 
<g transform="translate(-54.340447,-64.21875)" id="layer1"> 
   <path  fill="none" stroke="#914343" stroke-width="4"   id="path1" d="m 60.609153,64.432994 c 0,0 -34.345187,72.730986 64.649767,101.015256 98.99494,28.28427 321.2285,-62.62946 321.2285,-62.62946 0,0 131.31984,-52.527932 181.82746,16.16244 50.50763,68.69037 82.04198,196.41856 44.44671,284.86302 -30.25843,71.18422 -74.75128,129.29952 -189.90867,133.34013 -115.15739,4.04061 -72.73099,-153.54318 -72.73099,-153.54318 0,0 42.42641,-129.29953 135.36044,-119.198 92.93404,10.10152 -14.14213,-129.29953 -141.42135,-94.95434 -127.27922,34.34518 -183.84777,80.8122 -206.07112,121.2183 -22.22336,40.40611 -42.06243,226.23742 -26.26397,305.06607 8.77013,43.75982 58.20627,196.1403 171.72594,270.72088 73.8225,48.50019 181.82745,2.02031 181.82745,2.02031 0,0 94.95434,-12.12183 78.7919,-155.56349 -16.16244,-143.44166 -111.68403,-138.77778 -139.9683,-138.77778 -28.28427,0 83.39976,-156.18677 83.39976,-156.18677 0,0 127.27922,-189.90867 107.07617,16.16245 C 634.3758,640.21994 864.69058,888.71747 591.94939,941.2454 319.2082,993.77334 -16.162441,539.20469 153.54319,997.81395"/> 
 </g>   
</svg>

Как заставить иконку автомобиля двигаться вдоль трассы при скролле?

Answer 1

Растровую иконку автомобиля и path трассы размещаем в одном файле SVG.

Делается это для того, чтобы свести к минимуму усилия по позиционированию.

Анимацию движения вдоль трассы при скроллинге осуществляет JS.

Пояснения в комментариях кода:

function positionCar() 
{ 
  var  scrollY = window.scrollY  || window.pageYOffset ; 
  var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight; 
  var  path = document.getElementById("path1"); 
  // Рассчится расстояние по траектории, на которой машина должна быть на текущий момент прокрутки 
  var  pathLen = path.getTotalLength(); 
  var  dist = pathLen * scrollY / maxScrollY; 
  var  pos = path.getPointAtLength(dist); 
  // Рассчитайте положение немного впереди автомобиля (или позади, если мы в конце), чтобы мы могли рассчитать угол наклона автомобиля 
  if (dist + 1 <= pathLen) { 
    var  posAhead = path.getPointAtLength(dist + 1); 
    var  angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x); 
  } else { 
    var  posBehind = path.getPointAtLength(dist - 1); 
    var  angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x); 
  } 
  // Позиционирование автомобиля на «pos», повернутом на «angle» 
  var  car = document.getElementById("car"); 
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")"); 
} 
 
function rad2deg(rad) { 
  return 180 * rad / Math.PI; 
} 
 
// Передвигать автомобиль, когда есть событие прокрутки 
window.addEventListener("scroll", positionCar); 
 
// Начальная позиция автомобиля 
positionCar();

body { 
  min-height: 9000px; 
} 
 
svg { 
  position: fixed; 
}  
 
#path1 { 
fill:none; 
stroke:#9EA5CD; 
stroke-width:55; 
stroke-linecap:butt; 
stroke-linejoin:miter; 
stroke-opacity:1; 
}

<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" 
     viewBox="0 0 672.474 933.78125"> 
  <g transform="translate(-54.340447,-64.21875)" id="layer1"> 
   <path     id="path1" d="m 60.609153,64.432994 c 0,0 -34.345187,72.730986 64.649767,101.015256 98.99494,28.28427 321.2285,-62.62946 321.2285,-62.62946 0,0 131.31984,-52.527932 181.82746,16.16244 50.50763,68.69037 82.04198,196.41856 44.44671,284.86302 -30.25843,71.18422 -74.75128,129.29952 -189.90867,133.34013 -115.15739,4.04061 -72.73099,-153.54318 -72.73099,-153.54318 0,0 42.42641,-129.29953 135.36044,-119.198 92.93404,10.10152 -14.14213,-129.29953 -141.42135,-94.95434 -127.27922,34.34518 -183.84777,80.8122 -206.07112,121.2183 -22.22336,40.40611 -42.06243,226.23742 -26.26397,305.06607 8.77013,43.75982 58.20627,196.1403 171.72594,270.72088 73.8225,48.50019 181.82745,2.02031 181.82745,2.02031 0,0 94.95434,-12.12183 78.7919,-155.56349 -16.16244,-143.44166 -111.68403,-138.77778 -139.9683,-138.77778 -28.28427,0 83.39976,-156.18677 83.39976,-156.18677 0,0 127.27922,-189.90867 107.07617,16.16245 C 634.3758,640.21994 864.69058,888.71747 591.94939,941.2454 319.2082,993.77334 -16.162441,539.20469 153.54319,997.81395"/> 
 
    <image id="car"  xlink:href="https://i.stack.imgur.com/gLbds.png" y="-25" x="0"   width="50px" height="50px"/> 
  </g> 
</svg>