电波工坊 DIANBO KEYNOTE · 主演讲稿 01 / 10
开源 Web 动效引擎 三年迭代 · 第 3 个大版本 2026 夏季发布

电波v3.0

把动效还给直觉

内核 21.4 KB gzip 零运行时依赖 Apache-2.0
按 → 开始今晚的故事

ADMIT ONE · 发布会入场券

2026.08.20 周四 19:30

上海 · 西岸穹顶 GATE 4

NO. 000117凭本券入场 · 全程直播

操作提示：← → 方向键、滚轮或左右滑动翻页；底部贴纸可直达任意一页，Home / End 跳到首尾。

电波工坊 DIANBO 议程 02 / 10

今晚 36 分钟，讲四件事

中场不休息，提问集中在最后
全程回放明早上传官网

CH.01 · 痛点

动效为什么这么难写

关键帧地狱、性能悬崖、跨端割裂——三道老伤疤逐一撕开，先把问题说透再谈药方。

09 分钟
CH.02 · 新引擎

重写的三层内核

可视化时间轴、物理弹簧、手势绑定、低端机降级——四个新特性全部现场真机演示。

12 分钟
CH.03 · 跑分

512 粒子基准

与两家商业引擎、原生 CSS 在同一台低端安卓上正面对比，测试脚本当场开源。

07 分钟
CH.04 · 上手与社区

六行代码迁移

旧项目 27 行动效改写成 6 行，再看社区一年里把这台引擎带到了哪里。

08 分钟
09 + 12 + 07 + 08 = 36 分钟 · 一分钟都不注水
电波工坊 DIANBO 第 01 章 · 痛点 03 / 10
CHAPTER 01 / PAIN

动效为什么这么难写

2026 年 3 月，我们向社区发出问卷，收回 417 份有效回答：71.2% 的工程师把「动效」票选为最不愿接手的需求，平均每支团队为一个复杂转场返工 2.8 次。不是大家不会写——是工具在让写的人受苦。这一章，我们把三道最深的伤疤摆到台面上。

关键帧地狱 性能悬崖 跨端割裂
三道伤疤，下一页逐个撕开 →
电波工坊 DIANBO 第 01 章 · 痛点 04 / 10

三道老伤疤

每一道，你的团队大概率都疼过。

伤疤 1关键帧地狱

/* bounce.css —— 全文 200 行，这是第 173–178 行 */
@keyframes shake-7 {
0%, 11%, 23% { transform: translateX(-4px); }
6%, 17%, 29% { transform: translateX(4px); }
100% { transform: none; }
}

想改一个回弹幅度，要在 200 行关键帧里手改 7 处百分比——改完还得从头肉眼回归一遍，谁改谁加班。

伤疤 2性能悬崖

单帧 41.6ms · 掉到 24fps

0ms超出预算 24.9ms41.6ms

一次布局抖动让单帧耗时冲到 41.6ms，帧率从 60fps 直坠 24fps——而用户的手指，还停在屏幕上等它跟手。

伤疤 3跨端割裂

Webkeyframes iOSUIKit 弹簧 安卓Interpolator

同一段回弹，三端三套写法、三套参数，永远对不齐——可设计稿只有一份，验收的眼睛也只有一双。

设计走查会上最常听到的一句话：「安卓这边为什么弹得不一样？」

电波工坊 DIANBO 第 01 章 · 痛点 05 / 10

16.7ms

一帧的全部家当

在 60fps 的世界里，每一帧只有 16.7ms。引擎多吃一毫秒，留给业务逻辑的就少一毫秒——所以 v3.0 的头号目标不是「更炫」，而是把毫秒还给你。

≥ 60fps，是底线不是彩蛋

实测条件：同页 512 粒子转场 · Moto G31（4GB）· Chrome 126 · 30 秒均值。

主渲染耗时 · 复杂转场实测

电波 v2.4（上一代）8.9ms

电波 v3.0（本次发布）3.2ms

0标尺 = 整帧预算，对两条横条同时生效16.7ms

阶段拆解v2.4v3.0
样式重算3.1ms0.9ms
布局3.6ms1.1ms
绘制与合成2.2ms1.2ms
合计8.9ms3.2ms

省下 5.7ms：留给业务逻辑的预算从 7.8ms 涨到 13.5ms。

电波工坊 DIANBO 第 02 章 · 新引擎 06 / 10

重写的内核，四个新特性

全部已进 v3.0 正式版，不是路线图。

可视化时间轴编辑器STUDIO

拖拽即改参数，改完直接导出生产代码。设计师标注的 480ms，工程师拿到手就是 480ms，不再靠口头对齐。

物理弹簧参数SPRING

stiffness: 320 / damping: 22，一组参数三端同解。回弹手感从此有了可以写进验收单的数字。

手势绑定 APIGESTURE

wave.gesture() 把拖拽速度直接馈入动画初速：松手瞬间无缝接管，消灭那 0.1 秒的死区感。

低端机一键降级DEGRADE

degrade: 'auto' 检测到低内存机型时自动关闭粒子与模糊，保帧率、不保花活——花活可以少，掉帧不能有。

电波工坊 DIANBO 第 03 章 · 跑分 07 / 10

512 粒子基准，四引擎同台

同一台低端机，同一段路径动画，越高越好。

条件：同屏 512 个 SVG 粒子沿贝塞尔路径运动 · Moto G31（4GB）· Chrome 126 · 30 秒均值复测脚本已开源：dianbo-bench 仓库一键复现

电波工坊 DIANBO 第 04 章 · 上手与社区 08 / 10

迁移只要六行

同一段卡片回弹，两个时代的写法。

v2.x 旧写法 · legacy.css + legacy.js共 27 行

01/* legacy.css —— 卡片入场回弹 */
02@keyframes card-in {
03 0% { transform: translateX(0) rotate(0); }
04 60% { transform: translateX(252px) rotate(7.2deg); }
05 80% { transform: translateX(236px) rotate(5.4deg); }
06 100% { transform: translateX(240px) rotate(6deg); }
07}
08.card.run {
09 animation: card-in 480ms cubic-bezier(.34, 1.56, .64, 1) forwards;
10 will-change: transform;
11}

⋯⋯ 此处省略 16 行：legacy.js 加监听、手算超调量、动画结束后清 will-change ⋯⋯

−78% 代码

v3.0 新 API · main.js仅 6 行

01import { wave } from '@dianbo/core';
02
03wave('#card')
04 .spring({ stiffness: 320, damping: 22 })
05 .to({ x: 240, rotate: 6 })
06 .play();

两边参数逐项对得上：位移 240px、旋转 6°、超调 5%（252 = 240 × 1.05）。27 行到 6 行是逐行数出来的 −77.8%，贴纸上四舍五入；改写由迁移工具 dianbo-codemod 自动完成。

电波工坊 DIANBO 第 04 章 · 上手与社区 09 / 10

引擎是我们写的，路是社区踩出来的

四张票据，v2 发布至今一年的账。

GITHUB STAR

24,317

颗星

近 30 天新增 +2,183，v3 预告片发布当晚冲上趋势榜首位。

CONTRIBUTORS

183

位贡献者

覆盖 29 个国家与地区，v3.0 里 41.6% 的合入来自核心团队之外。

WEEKLY DOWNLOADS

962,540

次周下载

npm 周下载环比 +23.4%，距离周百万只差最后一脚油门。

DISCORD

11,206

名成员

昨夜同时在线 1,874 人，#showcase 频道每天都有新的整活现场。

数据截至 2026-08-12 · 统计口径与原始面板公开于官网 /stats 页，欢迎审计。

电波工坊 DIANBO 谢幕 10 / 10
DIANBO v3.0 · SHIP IT

把动效还给直觉

官方文档

dianbo.dev/docs

十分钟教程 · 迁移指南 · API 全集

在线试玩

play.dianbo.dev

浏览器里直接跑，零安装上手

这份幻灯片本身，就是用电波 v3.0 排版与驱动的——现在按 Home 键，从头再看一遍。
主讲 林晚舟 · 2026.08.20 · 上海西岸穹顶 GATE 4

电波工坊 DIANBO APACHE-2.0 开源