贝塞尔路径上的动画元素
Animate element on bézier path
我想在贝塞尔路径上为 div 设置动画，如下图所示。 javascript 这可能吗？请注意，两个点（白色）是相对于浏览器视口的（如果用户将屏幕拉得更宽，则两个点将彼此远离）。
我不知道javascript，但我可以提供一点帮助。考虑下图：
在cubic-bezier计时函数中，cubic-bezier(a,b,c,d)前两个值是值a,b是第一个句柄（粉色）的坐标和c,d是第二个手柄（蓝色）.
的坐标
现在在你的情况下，纵坐标是已知的。假设两个手柄的纵坐标都是1.5，函数就是cubic-bezier( x1, 1.5, x2, 1.5)
对于横坐标，假设你把点1放在10vw（viewport-width）和点2在90vw处（timing function end横坐标是100vw），那么就不需要JS了，只需要去掉vw除以100。函数将是 ( 0.1, 1.5, 0.9, 1.5)).
JS
但是如果是相对于viewport的左右两边，那就要找横坐标了。以下需要在 JS 中完成：
- 1 的横坐标将只是
distance from left.
2的横坐标为(Width of viewport) - Distance from right.
- 分别除以视口的宽度。 （以像素为单位）
- 在三次贝塞尔函数中插入对应点的横坐标。
EG:
考虑 window 为 500px 宽。考虑 point 1 距离左边 100px 并且 point 2 距离右边 100px。因此，对于 x1 和 400/500，三次贝塞尔函数中插入的值将为 100/500对于 x2。该函数将是 cubic-bezier(0.2, y1, 0.8, y2)
我想在贝塞尔路径上为 div 设置动画，如下图所示。 javascript 这可能吗？请注意，两个点（白色）是相对于浏览器视口的（如果用户将屏幕拉得更宽，则两个点将彼此远离）。
我不知道javascript，但我可以提供一点帮助。考虑下图：
在cubic-bezier计时函数中，cubic-bezier(a,b,c,d)前两个值是值a,b是第一个句柄（粉色）的坐标和c,d是第二个手柄（蓝色）.
现在在你的情况下，纵坐标是已知的。假设两个手柄的纵坐标都是1.5，函数就是cubic-bezier( x1, 1.5, x2, 1.5)
对于横坐标，假设你把点1放在10vw（viewport-width）和点2在90vw处（timing function end横坐标是100vw），那么就不需要JS了，只需要去掉vw除以100。函数将是 ( 0.1, 1.5, 0.9, 1.5)).
JS
但是如果是相对于viewport的左右两边，那就要找横坐标了。以下需要在 JS 中完成：
- 1 的横坐标将只是
distance from left.
2的横坐标为(Width of viewport) - Distance from right. - 分别除以视口的宽度。 （以像素为单位）
- 在三次贝塞尔函数中插入对应点的横坐标。
EG:
考虑 window 为 500px 宽。考虑 point 1 距离左边 100px 并且 point 2 距离右边 100px。因此，对于 x1 和 400/500，三次贝塞尔函数中插入的值将为 100/500对于 x2。该函数将是 cubic-bezier(0.2, y1, 0.8, y2)