bézier路径上的Animate元素

Question

我希望在bézier路径上为div设置动画，如下图所示。用javascript可以实现吗？请注意，两个点（白色）相对于浏览器视口（如果用户将屏幕拉得更宽，则两个点将彼此更远）。

Answer 1

我不了解javascript，但我可以帮助一点点。请考虑以下图像：

在cubic-bezier计时函数中，cubic-bezier(a,b,c,d)前两个值是值a,b是第一个句柄（粉红色）和c,d的坐标第二个句柄的坐标（蓝色）。

现在在你的情况下，纵坐标是已知的。假设两个句柄的纵坐标 1.5 ，函数将为cubic-bezier( x1, 1.5, x2, 1.5)

对于横坐标，假设您将{strong>第1点放在10vw（视口宽度），将第2点放在90vw（{{ 1}} abscissa是timing function end），然后不需要JS，你只需删除 vw 并除以100vw。该函数将是100）。

JS

但是，如果它相对于视口的左右两侧，那么就找到了横纹。以下需要在JS中完成：

1. 1 的横坐标只是( 0.1, 1.5, 0.9, 1.5) 2 的横坐标为distance from left。
2. 将每个视口的宽度除以。 （在px中）
3. 插入相应的点＆＃39;立方贝塞尔函数中的横坐标。

<强> EG： 将窗口视为 500px 宽。考虑左边的点1 100px ，点2 是右边的100px。因此，对于 x1 ， x2 中插入的值 100/500 ，对于 x2 ， 400/500 。该函数将为(Width of viewport) - Distance from right