如何用anime.js制作路径动画，以手写happy birthday为例

使用 Anime.js 制作路径动画可以让你创建各种炫酷的动画效果。下面是一个简单的使用 Anime.js 制作“Happy Birthday”手写路径动画的例子。

手写happy birthday

1.创建一个 HTML 网页，并在页面中添加一个 SVG 元素，具体可参考以下代码片段

2. 定义运动路径 在 SVG 文件中，找到要进行路径动画的元素。在这种情况下，我们选择 Happy Birthday 的文字部分。在 SVG 元素中，每个路径都有唯一的 ID 属性，因此可以使用 Anime.js 的 `path()` 方法根据 ID 属性引用路径。

3. 创建 Anime.js 动画 在 JavaScript 文件中，我们引入 Anime.js 库，并使用 `anime()` 方法来创建路径动画。首先，我们需要定义每个元素的起始状态和结束状态。在这个例子中，我们让每个元素的位置、旋转角度和透明度随时间变化。然后，我们使用 `path()` 方法将路径与元素绑定。最后，我们使用 `duration` 设置动画的持续时间。

// Happy Birthday 文字元素选择器

 const paths = document.querySelectorAll('#p-h, #p-a, #4. 在页面加载时触发动画

最后，将创建的动画序列通过 `autoplay: false` 参数禁用自动播放。在需要启动动画的时候，可以使用 Anime.js 库提供的 `play()` 方法来手动启动动画。

完成上述步骤后，就可以制作出一个流畅、有趣的 Happy Birthday 的路径动画效果了。