javascript - SVG 动画 : Object along a path on a scroll-6ren

javascript - SVG 动画 : Object along a path on a scroll

转载作者：太空宇宙更新时间：2023-11-04 06:47:24

我创建了一个SVG 动画:对象沿着滚动路径。

请检查下面的代码和Codepen demo

HTML

    <circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
    <circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>

    <path id="c" d="M174.093 22.89a.384.384 0 0 0-.148.037l-.921.437-.002-.009a.113.113 0 0 0-.151-.054l-.978.463a.113.113 0 0 0-.054.151l.005.007-1.049.497a.384.384 0 0 0-.183.512l2.25 4.747c.066.14.205.22.35.219-.056.058-.101.15-.04.28l1.395 2.942-.498-.03a.134.134 0 0 0-.016.267l.644.04.602 1.27c.25.527.874.75 1.4.5l.346-.164a.113.113 0 0 0 .155.14l.978-.463a.113.113 0 0 0-.01-.209l.346-.164c.527-.249.75-.874.5-1.4l-.68-1.437.439-.45a.133.133 0 0 0-.003-.189.133.133 0 0 0-.19.002l-.369.379-1.306-2.757c-.069-.155-.164-.195-.25-.193a.382.382 0 0 0 .048-.404l-2.248-4.747a.384.384 0 0 0-.363-.22z" fill="#1a1a1a" fill-rule="evenodd"/>
</svg>

CSS

#route {
  margin-top: 200px;
}

.code {
  height:150px;
  width:250px;
  background:#000;
  color:#fff;
  margin:20px;
  width: 40%;
  clear: both;
  height: 200px;
  background: #000;
  border-radius: 2px;
  margin: 100vh 0;
  padding: 10px;
}

$(document).ready(function(){           
    $(window).scroll(function() {
        drawLine( $('#bx_a'),document.getElementById('path') );
        positionTheDot();
        //positionCar();            
    });

    // init the line length
    drawLine( $('#bx_a'),document.getElementById('path') );
    positionTheDot();       
    //positionCar();

    function positionTheDot() {
    // What percentage down the page are we? 
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    // Get path length
    var path = document.getElementById("path");
    var pathLen = path.getTotalLength();
    // Get the position of a point at <scrollPercentage> along the path.
    var pt = path.getPointAtLength(scrollPercentage * pathLen);
    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
   var  path = document.getElementById("path");
   // Calculate distance along the path the car should be for the current scroll amount
   var  pathLen = path.getTotalLength();
   var  dist = pathLen * scrollY / maxScrollY;
   var  pos = path.getPointAtLength(dist);
   // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
   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);
   }

   // Position the red dot at this point
   var dot = document.getElementById("dot");          
   dot.setAttribute("transform", "translate("+ pt.x + "," + (pt.y+5) + ")");        
   var  car = document.getElementById("c");
   car.setAttribute("transform", "translate(" + (pt.x-171) + "," + (pt.y-21) + ")");
   //car.setAttribute("transform", "translate(" + (pt.x-171) + "," + (pt.y) + ") rotate(" + (rad2deg(angle)) + ")");
   };

   //draw the line
   function drawLine(container, line) {
    var pathLength = line.getTotalLength(),
    maxScrollTop = $(document).height() - $(window).height(),
    percentDone = $(window).scrollTop() / maxScrollTop,
    length = percentDone * pathLength;
    line.style.strokeDasharray = [ length,pathLength].join(' ');
   }

   function positionCar() {
    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
    var  path = document.getElementById("path");
    // Calculate distance along the path the car should be for the current scroll amount
    var  pathLen = path.getTotalLength();
    var  dist = pathLen * scrollY / maxScrollY;
    var  pos = path.getPointAtLength(dist);
    // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
    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);
    }
    // Position the car at "pos" totated by "angle"
    var  car = document.getElementById("c");
    car.setAttribute("transform", "translate(" + (pos.x) + "," + (pos.y) + ") rotate(" + (rad2deg(angle)) + ")");
    }

    function rad2deg(rad) {
        return 180 * rad / Math.PI;
    }    
});

请查看 Codepen 演示:https://codepen.io/yesvin/pen/XymwvX

问题是 SVG 中的对象(例如:汽车)没有沿着路径旋转。我尝试了变换旋转，但它不起作用。请检查 SVG 设置属性函数的注释行。

那么，如何实现对象必须沿着卷轴上的路径旋转自身？是否有任何其他计算来计算物体的 Angular 和路径的长度？

提前致谢。

最佳答案

问题是旋转中心和初始 Angular 。目前，汽车的初始位置使其旋转中心应位于 (171, 21)。您可以先将该点平移到 (0, 0)，然后将其旋转 -65 度，使其指向右侧。在这种情况下，重写路径数据以合并这些转换会更容易:

d="M 3.02008,-2.00446 A 0.384,0.384 0 0 0 2.99106,-1.85469 L 2.99789,-0.835296 2.98889,-0.837286 A 0.113,0.113 0 0 0 2.87613,-0.723255 L 2.88243,0.358786 A 0.113,0.113 0 0 0 2.99646,0.471542 L 3.00492,0.469969 3.01203,1.63073 A 0.384,0.384 0 0 0 3.39872,2.01296 L 8.65185,1.97994 C 8.80663,1.97929 8.93788,1.88712 8.99825,1.75528 9.02715,1.83055 9.09151,1.91021 9.23511,1.90987 L 12.491,1.88891 12.2534,2.32758 A 0.134,0.134 0 0 0 12.4886,2.45492 L 12.797,1.88816 14.2024,1.87929 C 14.7857,1.87543 15.2515,1.40414 15.2473,0.821764 L 15.2448,0.438872 A 0.113,0.113 0 0 0 15.4372,0.357561 L 15.4309,-0.72448 A 0.113,0.113 0 0 0 15.2373,-0.803744 L 15.2349,-1.18664 C 15.2319,-1.76949 14.7597,-2.23574 14.1774,-2.23146 L 12.5876,-2.22247 12.3653,-2.81052 A 0.133,0.133 0 0 0 12.1927,-2.88767 0.133,0.133 0 0 0 12.1143,-2.71463 L 12.3018,-2.22003 9.25118,-2.20155 C 9.08154,-2.20452 9.00514,-2.13533 8.9706,-2.05654 A 0.382,0.382 45 0 0 8.62474,-2.27078 L 3.37245,-2.23957 A 0.384,0.384 0 0 0 3.01965,-2.00355 Z"

$(document).ready(function(){

  $(window).scroll(function() {
    drawLine( $('#bx_a'),document.getElementById('path') );
    positionTheDot();
    positionCar();			
  });

  // init the line length
  drawLine( $('#bx_a'),document.getElementById('path') );
  positionTheDot();		
  positionCar();

  function positionTheDot() {
    // What percentage down the page are we? 
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    // Get path length
    var path = document.getElementById("path");
    var pathLen = path.getTotalLength();
    // Get the position of a point at <scrollPercentage> along the path.
    var pt = path.getPointAtLength(scrollPercentage * pathLen);

    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
    var  path = document.getElementById("path");
    // Calculate distance along the path the car should be for the current scroll amount
    var  pathLen = path.getTotalLength();
    var  dist = pathLen * scrollY / maxScrollY;
    var  pos = path.getPointAtLength(dist);
    // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
    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);
    }

    // Position the red dot at this point
    var dot = document.getElementById("dot");		  
    dot.setAttribute("transform", "translate("+ pt.x + "," + (pt.y+5) + ")");
  };

  //draw the line
  function drawLine(container, line) {
    var pathLength = line.getTotalLength(),
    maxScrollTop = $(document).height() - $(window).height(),
    percentDone = $(window).scrollTop() / maxScrollTop,
    length = percentDone * pathLength;
    line.style.strokeDasharray = [ length,pathLength].join(' ');
  }

  function positionCar() {
    var  scrollY = window.scrollY || window.pageYOffset;
    var  maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
    var  path = document.getElementById("path");
    // Calculate distance along the path the car should be for the current scroll amount
    var  pathLen = path.getTotalLength();
    var  dist = pathLen * scrollY / maxScrollY;
    var  pos = path.getPointAtLength(dist);
    // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
    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);
    }
    // Position the car at "pos" totated by "angle"
    var  car = document.getElementById("c");
    car.setAttribute("transform", "translate(" + (pos.x) + "," + (pos.y) + ") rotate(" + (rad2deg(angle)) + ")");
  }

  function rad2deg(rad) {
    return 180 * rad / Math.PI;
  }

});

#route {
  margin-top: 200px;
}
.code {
	height:150px;
	width:250px;
	background:#000;
	color:#fff;
	margin:20px;
	width: 40%;
    clear: both;
    height: 200px;
    background: #000;
    border-radius: 2px;
    margin: 100vh 0;
    padding: 10px;
}
svg {
	/*width:100%;
	height:auto;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:absolute; top:0; right:0; width:100%; height:auto; background:url('background-map.jpg') no-repeat;" id="route">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 334 1426" id="svgRoute">
		<path id="path" d="M170 19s18 32 18 57c0 48-40 51-40 72 0 22 43 31 43 44 0 10-9.4 10-10 23-.7 14 2.3 16 2.2 28-.17 12-14 24-21 32-6.5 7.2-17 15-20 23-2.4 6.8-3.5 23 12 29 16 5.7 32 10 37 24 5.2 13-7.4 26-17 33-9.2 6.6-30 20-26 30 3.5 9.9 27 6.2 27 24 0 18 8.8 13 8.8 24-11 24 16 50 13 71-.46 17-15 23-8.2 42-32 37 1.3 83 26 106 28 20-33 5.7-33 39 2.4 51-28 113-34 139-4.1 18-3.5 41 18 41 8.1-.2 14-6.5 15-14 .37-6.3-6.1-14-16-12-11 1.8-16 11-19 24-1.3 6.6-2.1 17-2.3 28-.43 29 14 36 19 39 2.6 1.8 19 8.8 19 17 10 18-41 7.8-35 28 .61 10 37 22 36 35 8.4 94-128 42-89 130 8.8 36-63 33-60 68-2.1 25 35 32 38 44" stroke="red" fill="none"/>
		
		<circle r="2" cy="18.591" cx="169.887" fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
		<circle r="2" id="dot" cy="-5" cx="0"  fill="red" fill-opacity=".96" fill-rule="evenodd" stroke="red" stroke-width=".55"/>
		
		<path id="c" d="M 3.02008,-2.00446 A 0.384,0.384 0 0 0 2.99106,-1.85469 L 2.99789,-0.835296 2.98889,-0.837286 A 0.113,0.113 0 0 0 2.87613,-0.723255 L 2.88243,0.358786 A 0.113,0.113 0 0 0 2.99646,0.471542 L 3.00492,0.469969 3.01203,1.63073 A 0.384,0.384 0 0 0 3.39872,2.01296 L 8.65185,1.97994 C 8.80663,1.97929 8.93788,1.88712 8.99825,1.75528 9.02715,1.83055 9.09151,1.91021 9.23511,1.90987 L 12.491,1.88891 12.2534,2.32758 A 0.134,0.134 0 0 0 12.4886,2.45492 L 12.797,1.88816 14.2024,1.87929 C 14.7857,1.87543 15.2515,1.40414 15.2473,0.821764 L 15.2448,0.438872 A 0.113,0.113 0 0 0 15.4372,0.357561 L 15.4309,-0.72448 A 0.113,0.113 0 0 0 15.2373,-0.803744 L 15.2349,-1.18664 C 15.2319,-1.76949 14.7597,-2.23574 14.1774,-2.23146 L 12.5876,-2.22247 12.3653,-2.81052 A 0.133,0.133 0 0 0 12.1927,-2.88767 0.133,0.133 0 0 0 12.1143,-2.71463 L 12.3018,-2.22003 9.25118,-2.20155 C 9.08154,-2.20452 9.00514,-2.13533 8.9706,-2.05654 A 0.382,0.382 45 0 0 8.62474,-2.27078 L 3.37245,-2.23957 A 0.384,0.384 0 0 0 3.01965,-2.00355 Z" fill="#1a1a1a" fill-rule="evenodd"/>
	</svg>
</div>

关于javascript - SVG 动画 : Object along a path on a scroll，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53188841/

文章推荐： c - 如何创建矩阵的静态数组

文章推荐： java - Spring请求参数中的特殊符号

文章推荐： python - 用另一个列表中相同索引处的值替换列表中的错误值

文章推荐： c - 如何知道文件的类型？

shell - echo PATH $PATH\$PATH 有什么作用？
这是我的作业 What does echo PATH $PATH \$PATH do? 我不知道它是如何工作的。 echo PATH打印“路径” $PATH创建一个“PATH”变量......也许？
python - path = path + [node1], path += [node1] 和 path.append(node1) 的区别
我想弄清楚两者之间的区别路径=路径+[节点1] 路径+=[节点1] path.append(node1) 我得到的是 path = path + [node1] 的正确路径，但不是其他两个。 def
python - 序列化错误 "c:\path\path"[Errno 13] 权限被拒绝 : C:\\path\\path
我使用 Robot 框架在 Ride 中创建了一个测试用例。运行时出现错误。我更新了python的路径。我更新了库和 Ride。我换了文件夹还是不行 *** Settings *** Documen
path - 自定义路径lib.Path()
我尝试使用额外的功能自定义 pathlib.Path()。特别是，我真的很喜欢使用上下文管理器作为移入和移出目录的方法。我一直在使用它，但我似乎在让 Path() 与自定义上下文管理器一起工作时遇到错
python - 为什么使用 sys.path.append(path) 而不是 sys.path.insert(1, path)？
编辑:基于 Ulf Rompe 的评论，重要的是使用“1”而不是“0”，否则您将破坏 sys.path . 我已经做 python 很长一段时间了(一年多)，我总是很困惑为什么人们建议你使用 sys.
path - 我可以使用 `std::path::Path` 的 `strip_prefix` 来替换动态前缀吗？
我有兴趣这样做的原因是因为我的路径中有一部分将保持不变，但我希望将其与其所有父部分一起删除。所以如果我们说， some/unknown/path/foo/bar/baz 我想回去 bar/baz 但
python - os.path.abspath(os.path.join(os.path.dirname(__file__), os.path.pardir)) 是什么意思？ Python
在几个 SO 的问题中，有这些行可以访问代码的父目录，例如os.path.join(os.path.dirname(__file__)) returns nothing和 os.path.join(o
python - 导出 PATH 命令 - 'export PATH=~/anaconda3/bin:$PATH'
我已经在我的 Linux 中安装了 anaconda 来导入 python 包。安装 anaconda 后，我无法在 python 中使用 anaconda，经过一番搜索后我发现输入此命令我能够使用
c# - new FileInfo(path).Name 与 Path.GetFileName(path)
哪个更好用，为什么？我的意思是这两个命令在哪些方面不同以及如何不同？性能、可读性…… new FileInfo(path).Name 或 Path.GetFileName(path) 最佳答案因为您
android - java.lang.SecurityException : Unsupported path path/path/JPEG_5e3bbe8ed6c75_24741_. jpg
这不适用于某些设备。在三星设备中，他们不允许使用下载管理器下载文件。我已经在 list 中定义了权限并获得了运行时权限。 DownloadManager downloadManager = (Do
java - 加入 nio.path 与 Paths.get() 或 Path.resolve()
我想知道在这个例子中使用 Paths.get() 和 Path.resolve 有什么区别: public static void main(String[] args) { Path p1
path - SVG 可以同时包含绝对命令和相对命令吗？
目前我正在开发一个转换由 Inkscape 创建的 svg-paths 的应用程序。现在我不清楚关于绝对和相对路径组合的路径规范。规范是否说明了同时包含相对和绝对坐标的路径定义？特别是关于绝对贝塞尔
path - 在 $PATH 上查找命令
我正在编写脚本，我需要在用户的 $PATH 上查找命令并获取该命令的完整路径。问题是我不知道用户的登录 shell 是什么，或者他们的 do 文件中可能有什么奇怪的东西。我将 bourne shell
path - Metalsmith:如何使用 path()？
Metalsmith 的文档对 path() 函数没有太多解释:#path(paths...): Resolve any amount of paths... relative to the work
path - Wine PATH 通过命令行而不是持久的
我知道我可以通过 regedit 更改我的 wine PATH，但实际上我只需要为一次运行更改 PATH。例如，我的软件名为frontend.exe，这取决于example/mylib.dll，我需
path - 什么是 "canonical path"？
因此，绝对路径是一种到达某个文件或位置的方法，描述了它的完整路径、完整路径，并且它依赖于操作系统(Windows 和 Linux 的绝对路径，例如，不同)。另一方面，相对路径是从当前位置 ..(两个点
path - 为什么使用 $PATH 以及它是什么
我对编程有点陌生(不是真的，但我仍在学习 - 我们不是吗？)。虽然我了解 Java 和 Python，并且了解 C、C++、JS、C#、HTML、CSS 等(并且我可以在终端中很好地导航)，但我不熟悉
path - 为什么使用 $PATH 以及它是什么
我对编程有点陌生(不是真的，但我仍在学习 - 我们不是吗？)。虽然我了解 Java 和 Python，并且了解 C、C++、JS、C#、HTML、CSS 等(并且我可以在终端中很好地导航)，但我不熟悉
path - 应用程序特定的 PATH 变量
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
Bash - $PATH 和 ${PATH}
使用环境变量(如 PATH)作为 $PATH 或 ${PATH} 有什么区别？最佳答案在大多数情况下没有区别。唯一重要的是你是否想在扩展后包含尾随文本。例如，假设您的 PATH 包含字符串 FOO

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - SVG 动画 : Object along a path on a scroll