Javascript 动画线和图像 - 库

Question

我一直在研究一种同时为线条和图像设置动画的方法。

在此处查看 gif 示例：

但我找不到任何库可以轻松做到这一点。我曾尝试使用原始 javascript，但它太复杂且无法顺利运行。你有任何库可以完成 gif 中显示的动画吗？谢谢

Answer 1

可能第一个为这样的线条制作动画的示例来自Jake Archibald，他使用了带有随时间变化的虚线笔划长度的 SVG。这可能是您的垂直线的基础。稍作修改，它可以使用滚动位置而不是时间。

有一个专门用于这种线条动画技术的库，名为Vivus。

但是，如果您正在寻找功能更全面的 SVG 库，它可以为您提供更多选择，您可以查看 SnapSVG、Bonsai 和 Velocity。