javascript - 贝塞尔路径上的动画元素

Question

我想要在贝塞尔路径上为 div 制作动画，如下图所示。这可以用 JavaScript 实现吗？请注意，这两个点(白色)是相对于浏览器视口(viewport)而言的(如果用户将屏幕拉得更宽，这两个点将彼此远离)。

Answer 1

我不懂 JavaScript，但我可以提供一点帮助。考虑下图:

在三次贝塞尔曲线计时函数中，cubic-bezier(a,b,c,d)前两个值是值 a,b是第一个 handle (粉红色) 和 c,d 的坐标是第二个 handle (蓝色)的坐标。

现在就你的情况而言，坐标是已知的。假设两个 handle 的坐标均为1.5，则函数将为 cubic-bezier( x1, 1.5, x2, 1.5)

对于横坐标，假设您将点 1 放置在 10vw (视口(viewport)宽度)和 90vw 处的点 2 ( timing function end 横坐标是 100vw )，那么对 JS 没有要求，只需删除 vw 并除以 100 。该函数将是 ( 0.1, 1.5, 0.9, 1.5) )。

JS

但如果相对于viewport的左右两侧，则要求横坐标。需要在 JS 中完成以下操作:

1. 1 的横坐标将是 distance from left .
   2 的横坐标将为 (Width of viewport) - Distance from right .
2. 将每个值除以视口(viewport)的宽度。 (以像素为单位)
3. 将对应点的横坐标插入三次贝塞尔函数中。

EG:考虑窗口的宽度为500px。假设点 1 距离左侧 100 像素，点 2 距离右侧 100 像素。因此，插入三次贝塞尔函数的值对于 x1 将为 100/500，对于 x2 则为 400/500 。该函数将是 cubic-bezier(0.2, y1, 0.8, y2)