我想在贝塞尔曲线上为div设置动画，如下图所示。使用JavaScript可以吗？请注意，两个点（白色）相对于浏览器视口（如果用户将屏幕拉得更宽，则两个点将彼此远离）。
最佳答案
我不懂javascript，但我可以提供一些帮助。考虑下图：
在三次贝塞尔定时函数中，cubic-bezier(a,b,c,d)的前两个值是a,b是第一个手柄（粉红色）的坐标，而c,d是第二个手柄（蓝色）的坐标。
现在以您的情况为例，纵坐标是已知的。假设两个手柄的坐标均为1.5，则函数为cubic-bezier( x1, 1.5, x2, 1.5)
对于横坐标，假设将点1放置在10vw（视口宽度），将点2放置在90vw（timing function end横坐标是100vw），那么对JS并没有要求，您只需删除大众，然后除以100。该功能为( 0.1, 1.5, 0.9, 1.5)）。
JS
但是如果它相对于视口的左侧和右侧，则找到横坐标。在JS中需要完成以下工作：
横坐标1就是distance from left。
横坐标2将为(Width of viewport) - Distance from right。
用视口的宽度除以每个宽度。 （以像素为单位）
将相应点的横坐标插入三次方贝塞尔函数。
例如：
考虑该窗口为500px宽。考虑点1是从左边100px，点2是从右边100px。因此，在三次方贝塞尔函数中插入的值对于x1将为100/500，对于x2将为400/500。该功能将是cubic-bezier(0.2, y1, 0.8, y2)
关于javascript - 贝塞尔曲线路径上的动画元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27846300/