八荒启-交互动画

八荒启·交互动画

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特效008—一个 `getContext(‘webgl‘)`，浏览器到底交出了什么？上一节我们已经知道，Canvas 2D、WebGL 和 WebGPU 都可以借助同一个 <canvas> 元素显示图形，但它们从画布中拿到的“绘图工具”并不是一回事。当代码写下 canvas.getContext("webgl") 时，浏览器到底交给了 JavaScript 什么？它是一个真正的 GPU 对象，还是一套负责转发命令的接口？它和前面熟悉的 Canvas 2D Context 有什么区别，又为什么一旦选定 WebGL，就不能随意切换回 2D？本文将从这行代码开始，拆开 WebGL Contex

八荒启·交互动画

机器人仿真实践(第0卷)——003机器人定义与发展史：从零实现本文进入“从零实现”阶段。我们不再只停留在机器人的定义、发展历史和数学物理概念上，而是从一个最简单的虚拟机器人开始，把位置、姿态、速度、加速度、转向和运动控制真正写进程序，让机器人从静止状态一步步“动起来”。通过亲手实现这个最小机器人模型，我们将把前面学过的数学与物理知识第一次连接到代码中，并建立“状态 → 时间推进 → 状态更新 → 运动结果”的基本仿真思维，为后续传感器、控制算法、ROS 2 与专业机器人仿真打下基础。

八荒启·交互动画

机器人仿真实践(第0卷)——002机器人定义与发展史：数学/物理原理机器人为什么能够移动、转向、保持平衡，并准确到达目标位置？如果继续向机器人内部深入，会发现这些能力最终都建立在数学和物理规律之上。本文从机器人的数学与物理基础出发，认识坐标、位置、姿态、速度、加速度、力、力矩、质量与惯性等核心概念，并初步理解向量、矩阵、三角函数以及牛顿力学在机器人中的作用，建立“现实运动如何转化为数学模型”的基本认识，为后续运动学、动力学、控制、SLAM、路径规划及机器人仿真打下基础。

八荒启·交互动画

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

八荒启·交互动画

Web特效01—什么是渲染什么是渲染？你可以把渲染想象成"翻译"：计算机脑子里想的从来不是"一朵花"，而是一堆坐标、颜色、数字。但屏幕这块"画布"只认一件事——每一个小格子(像素)该涂什么颜色。渲染，就是把计算机脑子里那些冷冰冰的数字，一格一格"翻译"成你眼睛能看懂的画面。你在屏幕上看到的每一张图、每一帧动画，背后都是这场"数字翻译成像素"的运算在悄悄进行。而 WebGL 和 Shader，就是让这场翻译工作直接交给 GPU 来做，做得又快又海量。当然，WebGL和shader是后话，我们当前系列会逐个讲解。

我是有底线的