如何滚动到 svg 路径 animation 的一部分？
[英]How to scroll into view, a part of a svg path animation?
问题描述
I have an svg animation in a react app like the one shown below:
我在 React 应用程序中有一个 svg animation，如下所示：
path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: dash 5s linear forwards; } @keyframes dash { 100% { stroke-dashoffset: 0; } }
<svg width="100%" height="100%" viewBox="0 0 1303 1746" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M495.674 19C553.546 53.1388 589.991 55.0358 663.789 59.9498C737.587 64.8637 791.945 74.6917 820.024 74.0365C848.103 73.3813 1016.94 59.9498 1016.94 59.9498C1034.02 61.1928 1045.66 66.4237 1069.86 83.5368C1083.69 96.7405 1087.74 105.547 1090.74 122.849C1090.17 139.224 1097.22 153.315 1089.3 164.781C1081.38 176.247 1042.58 186.028 1016.94 186.075L946.74 201.8H892.022H850.983L755.586 214.248H626.71L552.552 201.8H472.275L329.719 230.301L306.32 255.198L301.28 260.561L293 279.44L301.28 299.424L329.719 313.838L440.956 326.287L601.151 343.977H626.71H782.945L843.424 351.184L987.779 361.995L1108.74 372.478L1165.25 399.014C1209.07 419.059 1211.36 430.761 1178.93 452.412L1134.11 473.706L1089.3 495L957.5 592L782.945 668.5L544 683L354 718.5L231.5 787.5L177 839L293 1005.5L524.5 1019L700 1035H892.5H1075.5L1190 1060L1275.5 1132.5L1241.5 1195.5L1121 1325H1009H865L686.5 1356L564.5 1325L488 1279.5L354 1288.5L326 1325L134.5 1334L24 1418L40 1522.5L58 1588.5L267 1616.5V1481L407 1493L473 1588.5L623.5 1703.5L776.5 1720H913.5" stroke="#403737" strokeWidth="36" pathLength="100" strokeLinecap="round" /> </svg>
It's path is a long path (kind of like a race track) and has a very long height.它的路径很长（有点像赛道）并且高度很长。
What I want to do is when I am animating the path (like water flowing in a pipe), i want scroll into view, that one end of the path which is being animated.我想要做的是当我为路径设置动画时（就像水在管道中流动），我想滚动到视图中，即正在设置动画的路径的一端。
So how do i know how much to scroll to see that particular segment when its animating?那么我怎么知道在动画时要滚动多少才能看到那个特定的片段呢？
How to make it dynamic so that the scroll follows that animating path.如何使其动态化，以便滚动遵循动画路径。
NOTE: I want to SET THE SCROLL position based on the svg animation path and not the other way around.注意：我想 SET THE SCROLL position based on the svg animation path 而不是相反。 I DONT WANT to set the animation values based on the user's scroll position.我不想根据用户的滚动条 position 设置 animation 值。
1 个解决方案
解决方案1
0 2022-03-15 17:21:46
Here is a function set_dashoffset() that calculates the offset and set it on the <path> .这是一个 function set_dashoffset()计算偏移量并将其设置在<path>上。 height is the height of the entire window and window.innerHeight is the height of the visible part. height是整个window和window.innerHeight的高度。innerHeight是可见部分的高度。 The offset is a number between (100-half-innerHeight) and 0. So in the initial state the path is already half way down the visible window. offset是一个介于 (100-half-innerHeight) 和 0 之间的数字。因此在最初的 state 中，路径已经在可见的 window 的中间。
Instead of the @keyframes I use transition to make a smooth animation when setting a new offset .在设置新的offset时，我使用transition代替@keyframes来制作平滑的 animation 。
var body = document.body, html = document.documentElement; var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); var path = document.querySelector('path'); const set_dashoffset = e => { var offset = 100 - (window.scrollY + window.innerHeight/2) / (height - window.innerHeight/2) * 100; path.style.strokeDashoffset = offset; }; set_dashoffset(); document.addEventListener('scroll', set_dashoffset);
path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 3s; }
<svg width="100%" height="100%" viewBox="0 0 1303 1746" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M495.674 19C553.546 53.1388 589.991 55.0358 663.789 59.9498C737.587 64.8637 791.945 74.6917 820.024 74.0365C848.103 73.3813 1016.94 59.9498 1016.94 59.9498C1034.02 61.1928 1045.66 66.4237 1069.86 83.5368C1083.69 96.7405 1087.74 105.547 1090.74 122.849C1090.17 139.224 1097.22 153.315 1089.3 164.781C1081.38 176.247 1042.58 186.028 1016.94 186.075L946.74 201.8H892.022H850.983L755.586 214.248H626.71L552.552 201.8H472.275L329.719 230.301L306.32 255.198L301.28 260.561L293 279.44L301.28 299.424L329.719 313.838L440.956 326.287L601.151 343.977H626.71H782.945L843.424 351.184L987.779 361.995L1108.74 372.478L1165.25 399.014C1209.07 419.059 1211.36 430.761 1178.93 452.412L1134.11 473.706L1089.3 495L957.5 592L782.945 668.5L544 683L354 718.5L231.5 787.5L177 839L293 1005.5L524.5 1019L700 1035H892.5H1075.5L1190 1060L1275.5 1132.5L1241.5 1195.5L1121 1325H1009H865L686.5 1356L564.5 1325L488 1279.5L354 1288.5L326 1325L134.5 1334L24 1418L40 1522.5L58 1588.5L267 1616.5V1481L407 1493L473 1588.5L623.5 1703.5L776.5 1720H913.5" stroke="#403737" strokeWidth="36" pathLength="100" strokeLinecap="round" /> </svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.