八荒启

八荒启·交互动画

Web特效025—用 Canvas 2D 做Web特效的定义与边界：这支画笔能做到哪一步Canvas 2D 常被说成网页上的一支画笔，可真正开始做特效时，问题很快就来了：它画完的圆为什么不能像 DOM 元素一样直接拖动？擦开一层雾面玻璃，为什么只画一张模糊图片还不够？画布尺寸、设备像素比和每帧重绘，又会把性能推到哪一步？本文以“擦开带有水珠的雾面玻璃，露出清晰产品画面”为贯穿案例，先界定 Canvas 2D 是什么、负责什么，再用路径、图片、离屏画布、合成模式和低分辨率遮罩拆解这个效果。我们还会解释即时模式带来的对象管理成本，为什么大面积模糊与逐像素更新不能随手塞进动画循环，以及何时该让 D

八荒启·交互动画

# Web特效020—让 Web 特效真正动起来：时间循环应该怎么接一个静态图形只需要绘制一次，但网页特效要持续运动，就必须让浏览器不断重复执行一套有节奏的计算流程。时间循环就是连接“上一帧状态”和“下一帧画面”的核心机制：浏览器通过 requestAnimationFrame() 提供绘制时机，JavaScript 根据两帧之间的时间间隔计算 deltaTime，更新粒子的位置、速度、透明度和生命周期，再把最新状态交给 Canvas 或 WebGL 绘制。如果忽略时间单位、直接按帧数移动对象，特效就会因为设备刷新率不同而出现快慢不一致；如果不限制异常的时间间隔，页面切后

八荒启·交互动画

Web特效019-Web特效的定义与边界核心算法手写一遍：先跑起来，再谈高级效果本文围绕一个核心问题展开：面对 Web 特效的定义与边界，怎样不依赖现成库，亲手把一个最小可运行的核心算法写出来。文章将从输入数据、状态保存和逐帧更新开始，逐步实现位置计算、时间推进、边界处理、粒子创建与失活回收，再把这些结果交给 Canvas 2D 绘制。重点不是堆叠复杂效果，而是通过一条能运行、能观察、能修改的最小链路，理解算法如何从公式变成浏览器中的真实画面，并为后续加入噪声、碰撞、混合和性能优化建立可靠基础。

八荒启·交互动画

Web特效011—Web特效的定义与边界为什么忽快忽慢：时间、频率与采样的秘密时间是 Web 特效里最容易被忽略、却决定运动是否自然的变量。一个动画并不是“每帧移动固定距离”这么简单：浏览器的刷新频率、设备性能和当前负载都会让相邻帧之间的间隔发生变化。如果把位移直接写成每帧加 1，帧率下降时动画就会变慢；如果忽略采样频率，快速运动还可能出现跳跃、闪烁或漏看。本文将从时间间隔（delta time）、帧率与刷新频率的关系出发，解释为什么动画应根据经过的真实时间更新状态；再进一步介绍采样、插值、固定时间步长和时间平滑等方法，说明它们如何影响运动的稳定性、响应速度与视觉连续性。同时，文章

八荒启·交互动画

Web特效06——WebGL深挖：顶点着色器和片元着色器到底在干什么上一篇我们把Canvas2D、WebGL、WebGPU三个原生API的抽象层级摆清楚了，也用一个最简三角形的demo，摸了一遍WebGL"写着色器→编译→绑定→绘制"的完整流程。但那个demo刻意做得极简——颜色是写死的，位置也是写死的，真正做特效需要的东西，都被我们一笔带过了。这一篇就沿着这条线往下挖：顶点着色器和片元着色器到底是怎么分工协作的、attribute/uniform/varying这几种数据传递方式各自解决什么问题、JS里的数据怎么通过uniform实时传进shader、让画面动起来。裁

我是有底线的