最近，我们的设计小伙伴让我在按钮上加上一点动画效果，我做了两版都不太符合他的想法，他想要的是：按钮底部有渐变色的波浪无限循环往右流动的效果，这个描述太模糊了不好量化，于是我想干脆vibe一个参数可调的可视化工具，让设计自己去调吧。所以这篇文章就是简单记录下这个过程，没有什么原理向的东西。
最开始我是尝试尽可能把这个动画描述清楚，想看看codex的生成效果怎么样。不知道是不是我的prompts不够精准，尝试了几轮，生成的效果都不理想，于是打算另辟蹊径。
于是我在 CodePen 里搜索了 wave，找到了 一个还不错的波浪效果。
我让codex基于这个代码，把黑白条纹换成我想要的粉橙黄三色渐变。为了调整好整个动画的初始状态，我让codex把SVG改成初始不播放动画，通过右上角按钮控制播放/暂停。初始状态的调整其实也没那么顺利，需要调整好合适的波形、渐变色要连贯不能有断层、渐变色和波形的相对位置也要调整好，这里还涉及到波峰横坐标的数学计算。经过几轮调试，得到了这个版本。
接下来是把涉及的参数做成可配置化面板，其实从这一步开始，后面就顺利很多了。对于哪些参数是可量化的，其实我自己也不是很清楚，但是codex这里几乎是一次成功的，效果还不错，包括审美也还OK，于是得到这个版本。
接下来是在页面上绘制了一个默认样式按钮、把按钮的大小也参数化。然后发现按钮太小不方便查看效果还加了个按钮缩放功能。最好功能调整完成后为了方便到处设置，提供了3种导出方式：预览代码、复制代码、下载HTML。最终版本。
最后贴下设计给出的最终版本。
整个过程大约花费半天时间，其实以结果来看，为了实现一个按钮效果花费这么多时间算是效率挺低了，属于是为了碟醋包了顿饺子。这么做主要是用时间成本换沟通成本了，如果设计想要很多个类似的但不同参数的效果，那么这么做的收益就大很多了。