在html画布中沿路径移动对象[重复]

Question

我想在其中移动一个圆圈的路径。

圆圈沿着路径完成移动后，它应该会消失。

对于圆的动画，我在画布中使用 requestAnimationFrame() 方法。

Answer 1

要使用 CSS 沿路径为 DOM 对象设置动画，您需要了解 CSS Motion Path 模块 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path

类似地，要沿 SVG 对象中的路径为对象设置动画，您需要接受 SVG 元素 - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

在 元素中实现类似的结果需要大量工作。您需要创建路径，然后随着时间的推移沿该路径绘制坐标，然后在每个 RequestAnimationFrame 的适当坐标处绘制圆圈。这是可行的，但您可能希望借助画布和/或动画库让您的生活更轻松。

• GreenSock GSAP 有一个 MotionPath 插件，您应该可以使用它来获取沿路径的坐标，然后您可以使用它在画布上绘制圆圈 - https://greensock.com/motionpath/

• Scrawl-canvas [免责声明：我编写了这个库] 使沿路径的动画效果尽可能简单。请参阅此 CodePen 以获取演示代码 - https://codepen.io/kaliedarik/pen/MWadEwm

  示例代码：

    scrawl.makePolyline({
        name: 'my-polyline',
        pins: [[10, 10], ['20%', '90%'], [120, 'center']],
        mapToPins: true,
        method: 'draw',
    });