在为数据看板进行设计作业的时候, 圆点形式的虚线属于那些出现频率非常高的视觉元素之一, 可是如果通过手动一帧一帧地来调整间距参数、调节圆点的大小, 这个过程真的是非常消耗人的耐心和精力, 在我开始运用人工智能辅助类的软件工具大约两年的时间之后, 我现在通常只需要花费三分钟的时间, 就可以快速生产出一套完全能够满足日常使用需求的圆点形式虚线设计方案了。
ai圆点虚线怎么做
现在来讲的话, 最省事儿的那个办法就是在Figma这个工具里面, 去安装一个AI的插件, 然后你在输入框里写上“生成8px间距的圆点虚线, 圆点直径3px”, 这样它就能直接给你弄出来一组SVG的代码。
我自己呢是试过在aicoin上面找的那些教程, 再去配合着GPT去写那个SVG里面的stroke-dasharray参数, 结果发现那样效果会更稳定一点的, 而且最关键的地方是, 它能非常把虚线段和圆点的那个两端衔接给处理好的, 压根儿就不会出现那种很难看的缺口情况。
核心内容就是两个参数, stroke-dasharray这个是用来控制线段的长度和间隔的, linecap这个是用来设置线帽形状的, 把它设为round就是圆点的意思, 把间隔设为0, 把线段长度设为你要的那个圆点直径, 这样就变成了一连串的圆点了, 这样理解起来特别直观。
圆点虚线动画用什么ai
如果你需要制作动态的动画效果, 那么请不要自己去编写CSS关键帧。你可以把刚才讲到的那个SVG文件, 直接投喂给Lottie平台的AI生成工具。在里面输入这样的描述文字, 也就是要求圆点沿着既定的路径做匀速运动, 并且明确指定移动的速度处于中等水平。
这样做的话, 系统便会直接为你输出对应的动画文件。我在这个上周为我的客户提供服务的时候, 我所打造的进度条动画就是采用这种技术手段所完成的, 相比于纯手动的方式, 它为我节省了超过半个下午的工作时间成本。
有一个很小的细节特别容易被忽略掉, 就是当圆点一直运动到了终点位置的时候, 它会呈现出一个非常突兀的消失状况, 所以必须要在路径的末端多留出两个圆点那么大的间距作为缓冲空间, 如果不这么去做的情况下, 那么整体的观看感受将会直接变得糟糕透顶。
以后要是再遇到那种需要画圆点或者虚线的请求，大家就把参数的具体描述写得清清楚楚明明白白的, 然后直接丢给智能工具去处理。毕竟它们产出来的结果会比让人工一点点手动去调整整整齐齐得多, 遇到这种该依靠机器来完成的活儿, 真的没必要非要自己硬撑着去做。
