前几天做大屏的项目，产品要求边框要动起来，知道是要画svg的路径，但是之前都没画过啊，于是我就问ai说你按照我要求的线做出来，我就把svg丢给它，让它去画，但ai一直偷懒，只画了一部分的线，完全不能按照我要求的路径画。
我想那没辙，于是就让它给我推荐几个svg的路径动画网站，推了几个都不太会用，要么配置一堆全英文不知道从何下手，要么就是达不到我的要求。找了一圈都没找到合适的产品。
所以最终就自己用SvgPathEditor网站一点一点的画反复修改，最终结合ai实现动画效果实现了下图的效果。但真的挺麻烦的，花了我一整天的时间画出了四条流动的线，对应的上下左右，因为位置还不太一样，所以没办法完全的镜像。
昨天突发奇想说那要是让ai自己做一个ai的路径动画生成器会做成什么样，毕竟目前我市面上没看到说比较符合我功能的网站，就想着让ai去做一个。
你别说，效果真是出乎我预期。要是这些功能让我来做，没个几天真做不出来。
这是成品的网站体验地址，有需要的可以体验试试看。用的是vercel部署的，国内可能打不开，需要挂个梯子。 www.monsterxwx.top/#/svg-anima…
整体感觉是真不错，基本完美的达到了我要的要求。这要是之前用这个画能省下我不少时间。目前这个支持画连续的折线。一点一点连起来一下子就可以把路径画出来了。
后续甚至还可以让它再加一个支持画曲线的功能，是真不错。
下面说一下是怎么通过沟通让ai一步步变成最终这个样子的。也是经历了好多轮的结果才形成最终比较完美的成品。
一开始我只是简单的用一句话描述我想要的，而且为了方便测试我直接是让它生成html方便我预览。
当然，这第一版基本上是没办法用，首先大一点的svg直接就溢出屏幕了，也不支持拖动。而且画完预览没有任何的夏效果，于是开始让它改。
这一版生成的就好很多了。支持缩放了，但是我发现只是用画笔的画根本画不出精确的直线。于是继续让它改。
它直接命名了v2的版本，可以画出直线了。我本身的功能需求是画多个直线动画效果按顺序播放嘛，现在这版只能分批播放，其次就是选择画笔的大小我完全没办法确定，只能一点点试试看是多大的画笔。只能继续让它改。
于是v3版本多了个播放模式的切换，用来满足我的需求，同时笔触也增加了预览功能。它很好的实现了这两个功能，但是问题又来了，这个目前只能播放一次呀，我是想让它循环播放的啊，于是继续提需求。
我要求它把上传的样式改了，实在是丑，然后再加个循环播放
这一次上传的样式好看多了，也支持拖拽上传了，ai实在是太懒了，只有我提了的它才会做，现在也加入了速度曲线。
但是又又又出问题了，它循环播放变成了单独的循环，太诡异了，重新让它调整
在对话轮次增多的情况下代码开始出现点问题了，这版的上传没办法点击，问它才知道多了个;
它升级成了v5.1的版本，已经解决了上传的问题，我测试了它循环的效果还是有问题。继续让它改。
由于这时的上下文token数也是比较多了，也比较卡了，于是我新开了一个会话。我把上一版的完整html代码丢给它，继续让它改。
这一版动画预览问题是解决了，但又出现个新的问题
我导出的svg莫名带上了黑色的背景，跟原本的svg不一样了。继续让它改。
这5.3的版本并没有解决成功
它可能理解错了我的意思，我又重复说了一次。
5.4的版本它解决了这个问题，并且还增加了一键去黑的功能。
预览没问题，导出依旧是黑色，我也是醉了，之前的循环动画本来它会清空再渲染的，这次又出问题了。继续让它改。
这版完美的解决了上面的问题。但是！这ai又偷懒了，它偷偷把速度曲线去掉了两种，只保留了两种，然后右下角的缩放和模式是静态的，继续让它改。
到这一版其次已经算可以了，该解决的问题都解决了。然后试了一下发现导出的svg跟原先的位置不一样。于是继续问它。
v5.7它把那个自己加的边距去掉了就正常了。
感觉对话又有点长了，于是我又从重新开了个对话。因为我发现单纯一个个画直线还是不够优雅，我现在想要连线工具一次性画出来。
下图红色的是我用这个画的，挺好用的，这次没出啥叉子，其他功能也正常。到这一步我觉得已经满足画线的需求了。所以我就决定这个作为终版了。
最终我让它把html转成了vue3+unocss的写法，这样更方便我后续的修改，也是一次就全部完成了。就是开头地址的最终效果了。
本文到这就结束了，历经多轮对话最终确实是改成了我想要的效果，这个功能如果让我自己做可能需要蛮久的，实现起来还真没有它这么完美。Gemini 3Pro确实还是好用的，准确性上比其他的ai都强很多。
然后这个网站的所有工具都是用Gemini 3Pro写的，有需要的可以去试试。 www.monsterxwx.top/#/home
