如何在Figma网页原型中实现随机线条移动消失动画

该效果完全可以在Figma中实现，根据原型的还原度要求，可选择以下两种落地方法：

方案1：原生功能实现（无插件，适合快速原型） #

不需要额外安装工具，用Figma自带的原型交互就能做出接近的效果：

• 先绘制基础线条素材：用直线工具画15-30根长短、粗细、初始透明度不同的线条，每根线条单独占一个图层，初始位置统一放在画布可视区域外，作为动画的起始状态帧。
• 给单根线条配置动画：复制当前帧作为动画终点帧，在终点帧里把对应线条挪到画布另一侧的消失区域，同时把线条透明度调到0，轻微调整线条的角度/长度模拟移动中的形变。切回起始帧，选中线条在原型面板添加交互：触发条件选「页面加载后延迟」，动作选「智能动画」，缓动选线性，时长给1.5-4s的区间值。
• 错落参数避免同步：给每根线条设置不一样的延迟触发时间（比如从0s开始每根间隔0.1-0.5s不等）、不一样的移动路径、不一样的动画时长，不要所有线条参数统一，就能做出错落的随机感。
• 配置循环：在终点帧给整个页面添加交互，动画播放完成后自动跳回起始帧，跳转动画选「即时」，就能实现线条无限循环出现、移动、消失的效果。

方案2：插件辅助实现（高保真，接近真随机效果） #

Figma原生的动画路径是固定的，没法实现完全无规律的随机运动，要更高还原度可以借助插件：

• 用LottieFiles插件导入动效：如果有AE基础，可以先在AE里给线条形状添加湍流置换、路径关键帧、透明度关键帧，做出随机游走消散的效果，导出为Lottie JSON文件，直接通过插件导入Figma，设置为页面加载自动循环播放即可，视觉效果和参考站的前端实现效果几乎无差。
• 用Motion插件直接生成：不会AE的话可以安装Figma的Motion动效插件，给所有线条图层的位置、透明度属性添加随机表达式，设置好运动范围、透明度衰减规则，插件会自动生成无规律的移动、消失动画，不需要逐根线条手动K帧，效率更高。

提示：Figma作为原型设计工具，不支持直接编写JS生成真随机运动逻辑，以上方法都是视觉层面的高度模拟，完全可以满足原型演示的需求，如果要开发上线还是需要前端代码实现。

内容的提问来源于stack exchange，提问作者Kaira Wadhwa