Web 互动体验
53 个实验、七个分类,每次运行一个演示。按名称或 API 搜索,选择实验、亲手交互并复制核心代码。所选实验保存在 URL 中,切换语言时仍会保留。
探索
- 动效与物理 · 12: 弹簧、交错、关键帧、预设、重力、惯性、时间线、序列、进度控制、状态、数值与圆形物理。
- 触控与手势 · 7: 按压、拖动吸附、惯性、同时手势、指针跟随、图片缩放和重排。
- 滚动与布局 · 9: 纵向和横向/RTL 滚动、视口入场、键控条目、布局、自动尺寸、共享布局、折叠页头和嵌套滚动。
- 视觉效果 · 12: 线性/径向/锥形渐变、粒子、彩纸、模糊、玻璃、形状、SVG 绘制、液态图片、图像效果、显示/隐藏、闪光和加载指示器。
- 文字与符号 · 3: 按词/字动画、滚动数字及分层符号效果。
- 面板与导航 · 5: 底部面板、交互弹窗、共享导航、交互返回及相册返回,包括缩略图已被移除的情况。
- 设备与浏览器 · 5: 旋转和重力传感器、触觉反馈、键盘观察与跟随、播放和生命周期检查。
实际运行的内容
所有预览使用现有的实验性 Jolt Web 运行时。只挂载所选实验。离开视口后暂停其 scope,返回时重新创建。切换演示或离开页面会释放监听器、效果与 DOM 所有权。调整窗口尺寸会重建几何边界。网站及系统的减少动态效果设置仍受尊重。
代码片段展示核心集成,假设 DOM 引用已经挂载。API 指南说明结构要求、生命周期和限制。共享导航只改变本地演示场景,应用仍负责路由。Vue 适配器见 Web 集成。本次网站更新不改变引擎或原生 API。
传感器只在明确操作后请求权限,且收到真实读数后才显示活动。不兼容或被拒绝的设备会显示相应状态。触觉请求只报告浏览器是否接受,不能确认实际振动。桌面键盘通常报告遮挡为零,请在兼容手机上尝试。玻璃和图像效果显示真实后端。减少动态效果可能阻止播放。
真实浏览器录屏
已审核的原生参考
这些已有的原生录屏与 Web 预览分开标注。链接中的 API 指南还包含其他原生参考及平台限制。
检查与覆盖
运行 npm run docs:check-playground、npm run docs:check-media 和 npm run docs:build。启动网站后运行 JOLT_SITE_URL=http://127.0.0.1:5184 npm run docs:test-playground。检查涵盖 Chromium 与 WebKit 中的全部实验,以及手势、键盘、屏幕尺寸、语言、减少动态效果及清理。若公开 Web 方法缺少演示或明确的宿主责任,覆盖检查会失败。这衡量的是覆盖情况,而非所有浏览器的兼容性。