光流动效果怎么做？从概念到落地的全流程拆解

很多设计师之一次听到“光流动”都会问：它到底是光在动，还是光把物体照亮后产生的视觉错觉？答案是——两者皆有。光流动本质上是光源位移+材质反射+人眼暂留共同作用的结果。只要抓住这三点，就能把抽象概念变成可落地的设计。

之一步：明确光流动的三种常见形态

• 线性扫光：像机场跑道灯一样，光斑沿着固定轨迹匀速滑过。
• 脉冲扩散：中心点亮起后，亮度呈水波纹状向外衰减。
• 体积光束：空气中悬浮微粒被照亮，形成可见的“光柱”在移动。

自问：为什么网页上常用线性扫光而少用体积光束？
答：体积光束需要粒子系统，对性能不友好；线性扫光用CSS遮罩即可实现，移动端也能流畅跑。

第二步：用CSS做线性扫光，只需三行关键代码

.sweep {
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  background-size: 200% 100%;
  animation: sweep 2s infinite linear;
}
@keyframes sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

把这段代码贴到按钮或卡片上，就能得到一个从左到右的扫光。如果想让光更柔和，把#fff换成rgba(255,255,255,0.4)。

第三步：WebGL里做脉冲扩散，用噪声纹理驱动

WebGL的片元着色器里，用一张Perlin噪声图做遮罩：

float pulse =  *** oothstep(0.0, 1.0, sin(u_time - length(uv - 0.5) * 5.0));
gl_FragColor = vec4(color, pulse * opacity);

这里的length(uv - 0.5)把像素到中心的距离变成扩散半径，乘以5.0控制速度，sin函数让亮度周期性起伏。

光流动动画原理是什么？从物理到算法的底层逻辑

物理层：光为什么看起来在“流动”？

人眼的视觉暂留约0.1秒，当光源在0.05秒内移动超过0.5°视角，大脑就会把前后两帧光斑连成一条线。电影24fps就能让画面连贯，光流动同理。

算法层：如何用数学描述一条“光带”？

把光斑简化为高斯分布的亮度函数：

I(x,t) = I₀·exp(-((x-vt)²)/(2σ²))

• v：光斑移动速度
• σ：光斑宽度
• t：时间

在代码里，只要每帧更新t，就能让光斑平滑滑动。

性能层：为什么CSS动画比 *** 定时器更流畅？

浏览器对CSS animation做了合成层优化，光斑移动只触发repaint，不回流； *** 定时器容易掉帧，尤其移动端。

实战：把光流动嵌进产品，提升点击率的三个场景

场景一：电商大促按钮

把扫光做在按钮文字上层，扫光周期1.5秒，扫过瞬间点击率提升12%。注意扫光宽度不要超过按钮宽度的30%，否则会喧宾夺主。

场景二：数据可视化流光线条

在折线图上方叠加一条0.3秒延迟的流光，用户会觉得数据“实时更新”。实现时用SVG的stroke-dashoffset做路径动画，性能优于Canvas重绘。

场景三：暗黑模式下的呼吸光

在卡片边缘加一圈2px的脉冲光，亮度在0.2~0.8之间循环，既提示可点击，又不刺眼。暗黑场景下，纯白光换成蓝紫光更护眼。

避坑指南：光流动常见误区与解决方案

误区一：光斑太大导致信息被遮挡

解决：把光斑透明度降到0.3以下，或改用叠加模式mix-blend-mode: screen，只提亮不覆盖。

误区二：移动端掉帧

解决：开启硬件加速transform: translateZ(0)，并把动画作用在独立图层，减少重绘区域。

误区三：色弱用户看不见

解决：在光流动之外再加形状变化（如按钮轻微放大2%），多通道提示。

进阶：把光流动做成设计系统Token

在Figma里建一个“LightFlow”样式库：

• 扫光角度：统一45°或90°，保持品牌一致性
• 扫光时长：微交互0.8s，氛围动效2.5s
• 缓动函数：用ease-in-out，避免急停

开发侧用CSS变量封装：

:root {
  --light-sweep-duration: 1.5s;
  --light-sweep-color: rgba(255,255,255,0.6);
}

这样设计师改数值，前端不用重新打包。