javascript - 使用 element.animate() 对曲线上的元素进行动画处理

Question

我需要通过如下所示的路径对元素的翻译进行动画处理：

De Casteljau 曲线示例

现在我正在使用一个requestAnimationFrame回调来计算De Casteljau曲线上的位置，然后通过内联 CSS 设置元素位置translate3d()。这很有效，尽管与 CSS 动画相比
，它的性能更差并且非常冗长。

当目标仅在运行时已知时， Web 动画似乎是一个很好的新选项来为元素设置动画，但我找不到任何东西来修改起点和终点之间的动画。

是否可以使用来完成上述操作element.animate()，或者它是否比 CSS 动画更可定制？

score 0 · Accepted Answer

使用 Web Animation API，您可以使用motion-path属性：

更多信息和现场示例：

1 回答 1