rAF中CSS动画方向和无限迭代次数的等价物

Question

我是requestAnimationFrame的新手，并试图了解如何开发使用CSS Keyframe Animation完成的东西。

详细地说，我可以使用CSS执行以下操作

 let curve = document.querySelector('#curve') let dot = document.querySelector('#dot'); let d = curve.getAttribute('d'); dot.style.setProperty('--mp', '"' + d + '"')

 #dot { offset-path: path(var(--mp)); animation: move 3000ms infinite alternate ease-in-out; } @keyframes move { 100% { offset-distance: 100%; } }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <g> <circle id="dot" r="10" cy="0.5" cx="0.5" style="fill: #dd1819; "></circle> </g> <path id="curve" d="M 29.928125,119.32884 C 59.868756,78.85387 99.789596,30.283895 138.66049,30.104515 c 80.46172,-0.37133 90.87185,137.794285 140.7729,129.699295 40.35037,-6.54568 49.90105,-80.94994 86.53937,-78.86548 33.24073,1.89117 22.2547,70.77048 73.14399,70.77048 39.92084,0 58.65264,-56.66496 99.80211,-56.66496 49.90105,0 69.86147,80.94995 99.8021,48.56997" style="fill: none; stroke:black; stroke-width: 1;" /> </svg>

animation-direction: alternate; 确保它来回播放和animation-iteration-count: infinite; 确保它在无限循环中运行。

我试图了解是否可以在rAF中实现相同的目标。 这是我到目前为止尝试过的

 let u = 0; let time = 3000; let start = performance.now(); let curve = document.querySelector('#curve') let totalLength = curve.getTotalLength(); let dot = document.querySelector('#dot'); const temp = []; const move1 = () => { let p = curve.getPointAtLength(u * totalLength); dot.setAttribute("transform", `translate(${px}, ${py})`); if (u < 1) { u = (performance.now() - start) / time temp.push(p); requestAnimationFrame(move1) } }; move1();

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <g> <circle id="dot" r="10" cy="0.5" cx="0.5" style="fill: #dd1819; "></circle> </g> <path id="curve" d="M 29.928125,119.32884 C 59.868756,78.85387 99.789596,30.283895 138.66049,30.104515 c 80.46172,-0.37133 90.87185,137.794285 140.7729,129.699295 40.35037,-6.54568 49.90105,-80.94994 86.53937,-78.86548 33.24073,1.89117 22.2547,70.77048 73.14399,70.77048 39.92084,0 58.65264,-56.66496 99.80211,-56.66496 49.90105,0 69.86147,80.94995 99.8021,48.56997" style="fill: none; stroke:black; stroke-width: 1;" /> </svg>

上面的rAF动画大概相当于

#dot {
    offset-path: path(var(--mp));
    animation: move 3000ms 1 forwards linear;
}

有什么方法可以实现在CSS中可以完成的事情

Answer 1

关于使用requestAnimationFrame(…)的一些事情：

1. 最佳实践是使用requestAnimationFrame提供给回调的时间戳参数。 无需在函数内部调用performance.now() 。 但是如果你这样做了，一定要在动画之前做，否则动画将缺乏任何潜在的帧速率下降在速度较慢的 PC 尤其是手机上。

   回调方法被传递一个参数，一个类似于performance.now()返回的 DOMHighResTimeStamp ，它指示当前时间（基于从时间开始以来的毫秒数）。

2. 获取给定的时间戳并从中获取您需要的内容。 （这通常使用外部变量作为配置来完成。）我在动画的哪个迭代中？ 这次迭代进展到什么程度了？

3. 这种方法是有效的，但不是最好的：最佳做法是只保存动画的最后一次、最后一个 requestID（由requestAnimationFrame(…)返回）和最后一个状态（ iterationWithFraction ）。 然后在每一步中比较上一次和现在的时间，并将标准化的进度添加到状态中。 然后相应地更新动画。
   总是比较第一个时间戳start可能会导致非常混乱的错误。 （想象一下time设置为2000中期动画。）

4. 如果要结束动画，请查看cancelAnimationFrame(requestID) 。

 let time = 3000; let start = performance.now(); let curve = document.querySelector('#curve') let totalLength = curve.getTotalLength(); let dot = document.querySelector('#dot'); let d = curve.getAttribute('d'); const step = (timestamp) => { // get current time normalized with "time" (2s passed = 0.6666, 3s passed = 1, 4s passed = 1.33333, ...) const iterationWithFraction = (timestamp - start) / time; // get current iteration as an integer const iteration = Math.floor(iterationWithFraction); // get current moment in iteration let fraction = iterationWithFraction % 1; // if iteration odd: invert fraction to get the desired alternation if (iteration % 2 == 1) fraction = 1 - fraction; // if you want an easing effect, you can do something like this now fraction = fraction<.5 ? 2*fraction**2 : -1+(4-2*fraction)*fraction; // do your animation const point = curve.getPointAtLength(fraction * totalLength); dot.setAttribute("transform", `translate(${point.x}, ${point.y})`); // get next AF as the last thing of the function requestAnimationFrame(step); }; step(performance.now());

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <g> <circle id="dot" r="10" cy="0.5" cx="0.5" style="fill: #dd1819; "></circle> </g> <path id="curve" d="M 29.928125,119.32884 C 59.868756,78.85387 99.789596,30.283895 138.66049,30.104515 c 80.46172,-0.37133 90.87185,137.794285 140.7729,129.699295 40.35037,-6.54568 49.90105,-80.94994 86.53937,-78.86548 33.24073,1.89117 22.2547,70.77048 73.14399,70.77048 39.92084,0 58.65264,-56.66496 99.80211,-56.66496 49.90105,0 69.86147,80.94995 99.8021,48.56997" style="fill: none; stroke:black; stroke-width: 1;" /> </svg>

Answer 2

不需要 CSS 或 JavaScript（我确实喜欢 JavaScript 和 Web 组件）

要添加缓动，请参阅：

• 在 SVG 中缓和 animateMotion

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines

 <svg viewBox="0 0 640 720" xmlns="http://www.w3.org/2000/svg"> <path id="PATH" stroke="black" fill="none" d="m30 119c30-40 70-89 109-89 81 0 91 138 141 130 40-7 50-81 87-79 33 2 22 71 73 71 40 0 59-57 100-57 50 0 70 81 100 49" /> <circle r="10" fill="red"> <animateMotion dur="5s" keyPoints="0;1;0" keyTimes="0;.7;1" calcMode="linear" repeatCount="indefinite"> <mpath href="#PATH" /> </animateMotion> </circle> </svg>