在实际开发中我们经常需要为应用添加一些趣味性的交互反馈以提升用户体验。“摇一摇”功能就是一个经典案例它常见于抽奖、刷新、获取随机内容等场景。本文将以一个名为“来杯萌茶摇一摇”的趣味应用为背景从零开始详细讲解如何在移动端 Web 应用中实现一个完整的、可感知设备物理摇动的交互功能。我们将使用 HTML5 提供的DeviceMotionEventAPI 来监听设备的加速度变化通过 JavaScript 计算摇动强度并配合 CSS 动画实现视觉反馈。整个过程不仅涉及核心 API 的调用还包括事件节流、动画控制、状态管理以及跨浏览器兼容性处理等工程细节。无论你是前端新手想了解传感器 API 的使用还是有一定经验的开发者希望完善一个健壮的摇一摇功能这篇文章都将提供一条清晰的实现路径和排错指南。1. 理解 DeviceMotionEvent如何让网页感知设备运动在实现“摇一摇”之前必须理解其底层依赖设备运动事件。这并非通过监听鼠标或触摸事件实现而是依赖于设备内置的加速度计和陀螺仪传感器。1.1 DeviceMotionEvent 与 DeviceOrientationEvent 的区别两者都是 HTML5 中与设备传感器相关的 API但用途不同初学者容易混淆。DeviceOrientationEvent提供设备在物理空间中的朝向信息即设备相对于地球坐标系的旋转角度。它返回alpha绕 Z 轴旋转、beta绕 X 轴旋转、gamma绕 Y 轴旋转等属性。常用于指南针、全景看房等需要方向感的场景。DeviceMotionEvent提供设备在物理空间中的加速度信息包括线性加速度和旋转速率。这正是我们检测“摇动”所需要的。它返回acceleration不考虑重力的加速度、accelerationIncludingGravity包含重力的加速度和rotationRate旋转速率等属性。对于“摇一摇”我们主要关注accelerationIncludingGravity对象下的x,y,z属性。它们分别代表了设备在三个轴向上所受到的加速度单位为 m/s²其中重力加速度约 9.81 m/s²也被计算在内。当设备静止且屏幕朝上平放时x和y接近 0而z接近 9.81。1.2 摇动检测的基本原理摇动的本质是设备加速度的剧烈变化。我们无法直接获得“摇动”这个事件但可以通过计算连续两次获取的加速度数据之间的差值即变化率来判断。一个简单的算法是在devicemotion事件触发时获取当前时刻的加速度(ax, ay, az)。与上一次事件触发时的加速度(lx, ly, lz)进行比较。计算三个轴向加速度变化量的平方和delta (ax-lx)^2 (ay-ly)^2 (az-lz)^2。如果delta超过一个预设的阈值SHAKE_THRESHOLD则认为发生了一次有效的摇动。为了避免在一次持续摇动中触发数百次事件需要加入一个“冷却时间”SHAKE_TIMEOUT在触发一次后等待一段时间再允许下一次触发。1.3 安全与权限要求出于隐私和安全考虑现代浏览器对传感器 API 的访问有严格限制HTTPS 协议在大多数现代浏览器中DeviceMotionEvent和DeviceOrientationEvent仅在安全上下文即 HTTPS 或 localhost下可用。在 HTTP 页面上相关 API 可能无法工作或返回空数据。用户手势部分浏览器要求必须在用户主动交互如触摸、点击后才能开始监听传感器事件。这意味着你不能在页面加载后立即监听而需要在某个按钮的click事件回调中开始监听。权限 API一些浏览器如 Chrome未来可能引入更明确的权限请求需要调用Permissions API来申请accelerometer等权限。了解这些限制对后续开发和问题排查至关重要。2. 环境准备与项目结构我们将创建一个标准的移动端 Web 项目。为了快速看到效果我们将在本地 localhost 环境下进行开发。2.1 开发环境清单你需要准备以下环境一台电脑用于编写代码。一个现代浏览器推荐 Chrome、Edge 或 Safari用于桌面端初步调试。一部智能手机用于真机测试。iOS 和 Android 均可。本地 Web 服务器因为涉及文件访问直接双击打开 HTML 文件file://协议可能导致某些 API 行为不一致。建议使用一个简单的本地服务器。选项一推荐如果你安装了 Node.js可以使用http-server或live-server。选项二使用 Python 内置命令python -m http.server 8000Python 3或python -m SimpleHTTPServer 8000Python 2。选项三使用 VS Code 的 Live Server 插件。2.2 项目目录与文件创建一个名为shake-for-tea的文件夹并建立如下结构的文件shake-for-tea/ ├── index.html # 主页面 ├── style.css # 样式文件 ├── script.js # 逻辑文件 └── assets/ # 资源目录可选 ├── tea-cup.png # 茶杯图片 └── shake-sound.mp3 # 摇动音效可选3. 构建基础页面与样式首先我们构建一个简单的视觉界面包含一个茶杯图片和提示文字。3.1 HTML 结构 (index.html)!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno title来杯萌茶摇一摇/title link relstylesheet hrefstyle.css link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css /head body div classcontainer header h1i classfas fa-mug-hot/i 来杯萌茶/h1 p classsubtitle摇一摇手机随机生成一杯特色萌茶/p /header main !-- 茶杯容器用于承载动画 -- div classtea-cup-container idteaCupContainer img srcassets/tea-cup.png alt萌茶杯 classtea-cup idteaCup div classbubble bubble-1/div div classbubble bubble-2/div div classbubble bubble-3/div /div !-- 状态与结果展示 -- div classstatus idstatus请用力摇晃手机/div div classresult idresult p你摇到了span idteaName--/span/p p classtea-desc idteaDescription描述信息将在这里显示/p /div !-- 控制按钮 -- div classcontrols button idstartBtn classbtn btn-primary i classfas fa-play/i 开始摇动检测 /button button idsimulateBtn classbtn btn-secondary i classfas fa-random/i 模拟摇动桌面测试 /button button idresetBtn classbtn btn-outline i classfas fa-redo/i 重置 /button /div !-- 调试信息开发时可见 -- details classdebug-info summary调试信息/summary p加速度 (含重力): span idaccelDatax:-, y:-, z:-/span/p p摇动强度: span idshakePower0/span/p p最后更新: span idlastUpdate-/span/p /details /main footer p基于 DeviceMotionEvent API 实现 | 请确保在 HTTPS 或 localhost 环境下使用/p /footer /div script srcscript.js/script /body /html关键点说明meta nameviewport确保移动端正确缩放和布局。tea-cup-container作为茶杯和气泡动画的父容器我们将对其应用摇动动画。#startBtn由于权限限制我们需要一个按钮让用户主动启动摇动监听。#simulateBtn为在桌面浏览器无加速度计测试功能我们提供一个模拟按钮。.debug-info折叠区域用于实时显示加速度和摇动强度数据便于调试。3.2 基础样式 (style.css)* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; color: #333; } .container { width: 100%; max-width: 500px; background-color: rgba(255, 255, 255, 0.95); border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); padding: 30px; text-align: center; } header { margin-bottom: 30px; } header h1 { color: #2d3436; font-size: 2.5rem; margin-bottom: 10px; } header .subtitle { color: #636e72; font-size: 1.1rem; } .tea-cup-container { position: relative; width: 200px; height: 200px; margin: 30px auto; /* 动画将作用于这个容器 */ transition: transform 0.1s ease-out; } .tea-cup { width: 100%; height: 100%; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); } /* 气泡样式 */ .bubble { position: absolute; background-color: rgba(173, 216, 230, 0.7); border-radius: 50%; opacity: 0; } .bubble-1 { width: 20px; height: 20px; bottom: 40px; left: 50px; } .bubble-2 { width: 15px; height: 15px; bottom: 60px; right: 60px; } .bubble-3 { width: 25px; height: 25px; bottom: 30px; right: 40px; } .status { font-size: 1.3rem; font-weight: 600; color: #0984e3; margin: 20px 0; min-height: 1.8em; } .result { background: #dfe6e9; border-radius: 16px; padding: 20px; margin: 25px 0; text-align: center; } #teaName { font-size: 1.8rem; font-weight: bold; color: #d63031; display: block; margin-top: 5px; } .tea-desc { margin-top: 10px; color: #636e72; font-size: 1rem; line-height: 1.5; } .controls { display: flex; flex-direction: column; gap: 15px; margin: 30px 0; } .btn { padding: 18px 24px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; } .btn-primary { background: linear-gradient(90deg, #74b9ff, #0984e3); color: white; } .btn-primary:active { transform: scale(0.98); background: linear-gradient(90deg, #0984e3, #74b9ff); } .btn-secondary { background: #00b894; color: white; } .btn-secondary:active { background: #00a085; transform: scale(0.98); } .btn-outline { background: transparent; color: #636e72; border: 2px solid #b2bec3; } .btn-outline:active { background: #dfe6e9; } .debug-info { margin-top: 30px; border-top: 1px dashed #ddd; padding-top: 20px; text-align: left; font-size: 0.9rem; color: #666; } .debug-info summary { cursor: pointer; font-weight: bold; margin-bottom: 10px; } .debug-info p { margin: 5px 0; font-family: monospace; } footer { margin-top: 30px; font-size: 0.85rem; color: #888; border-top: 1px solid #eee; padding-top: 20px; }至此一个静态的、响应式的界面已经完成。接下来我们将注入核心的交互逻辑。4. 实现摇动检测核心逻辑这是整个应用的核心我们将所有 JavaScript 代码写入script.js文件。4.1 定义常量与状态变量首先定义算法所需的阈值、冷却时间以及记录状态所需的变量。// script.js // 摇动检测参数 const SHAKE_THRESHOLD 800; // 摇动强度阈值值越大需要摇动越剧烈 const SHAKE_TIMEOUT 1000; // 冷却时间毫秒在此时间内不重复触发 const SHAKE_DATA_LIFETIME 150; // 传感器数据有效期用于计算时间差 // 状态变量 let lastUpdate 0; // 上一次事件触发的时间戳 let lastX 0; // 上一次的加速度 x let lastY 0; // 上一次的加速度 y let lastZ 0; // 上一次的加速度 z let isShaking false; // 当前是否正在摇动 let shakeTimeoutId null; // 冷却定时器 ID let motionPermissionGranted false; // 是否已获得权限并开始监听 // DOM 元素引用 const startBtn document.getElementById(startBtn); const simulateBtn document.getElementById(simulateBtn); const resetBtn document.getElementById(resetBtn); const statusEl document.getElementById(status); const teaCupContainer document.getElementById(teaCupContainer); const teaCup document.getElementById(teaCup); const teaNameEl document.getElementById(teaName); const teaDescEl document.getElementById(teaDescription); const accelDataEl document.getElementById(accelData); const shakePowerEl document.getElementById(shakePower); const lastUpdateEl document.getElementById(lastUpdate); // 模拟数据一个萌茶列表 const teaList [ { name: 茉莉奶绿喵, desc: 清香茉莉与醇厚牛乳的完美结合顶上还有一只小猫爪棉花糖 }, { name: 波波芋泥熊熊, desc: 绵密芋泥挂壁黑糖波波沉底杯壁上趴着一只憨憨的巧克力小熊。 }, { name: 星空葡萄啵啵, desc: 梦幻紫色渐变底部是手剥巨峰葡萄果肉顶部是芝士星云奶盖。 }, { name: 桂花酒酿小圆子, desc: 温润的酒酿搭配糯叽叽的小圆子撒上金秋桂花暖胃又暖心。 }, { name: 薄荷巧克力冰沙, desc: 清凉薄荷与浓郁巧克力的冰沙交响曲点缀着脆脆的巧克力豆。 }, { name: 樱花草莓云朵, desc: 春季限定盐渍樱花与草莓果酱的酸甜搭配顶上是轻盈的云朵奶油。 } ];4.2 初始化与权限请求由于安全限制我们需要在用户手势点击按钮后才能尝试监听设备运动事件。// 启动摇动检测 function startShakeDetection() { if (typeof DeviceMotionEvent.requestPermission function) { // iOS 13 等设备需要显式请求权限 DeviceMotionEvent.requestPermission() .then(permissionState { if (permissionState granted) { window.addEventListener(devicemotion, handleDeviceMotion); motionPermissionGranted true; updateStatus(摇动检测已开启开始摇晃吧, success); startBtn.disabled true; startBtn.innerHTML i classfas fa-check/i 检测中...; } else { updateStatus(需要授权设备运动权限才能使用摇一摇功能。, error); } }) .catch(console.error); } else { // 非 iOS 13 或已支持的环境直接添加监听 // 但仍需确保在用户手势后调用这里由按钮点击触发符合要求 window.addEventListener(devicemotion, handleDeviceMotion); motionPermissionGranted true; updateStatus(摇动检测已开启开始摇晃吧, success); startBtn.disabled true; startBtn.innerHTML i classfas fa-check/i 检测中...; } } // 更新状态提示 function updateStatus(message, type info) { statusEl.textContent message; statusEl.style.color type success ? #00b894 : type error ? #d63031 : #0984e3; } // 为开始按钮绑定事件 startBtn.addEventListener(click, startShakeDetection);4.3 核心摇动检测算法这是handleDeviceMotion函数的实现它处理原始的加速度数据并判断是否发生摇动。// 处理设备运动事件 function handleDeviceMotion(event) { const acceleration event.accelerationIncludingGravity; if (!acceleration) { console.warn(无法获取加速度数据。); return; } const { x, y, z } acceleration; const currentTime Date.now(); // 更新调试信息 accelDataEl.textContent x:${x?.toFixed(2) || -}, y:${y?.toFixed(2) || -}, z:${z?.toFixed(2) || -}; lastUpdateEl.textContent new Date().toLocaleTimeString(); // 忽略无效数据或数据更新过快 if ((currentTime - lastUpdate) SHAKE_DATA_LIFETIME) { return; } const timeDiff currentTime - lastUpdate; lastUpdate currentTime; // 计算本次与上次的加速度差值 const deltaX x - lastX; const deltaY y - lastY; const deltaZ z - lastZ; // 保存当前值供下次计算使用 lastX x; lastY y; lastZ z; // 计算摇动强度加速度变化量的平方和并考虑时间因子进行标准化 const speed (deltaX * deltaX deltaY * deltaY deltaZ * deltaZ) / (timeDiff * timeDiff) * 10000; shakePowerEl.textContent speed.toFixed(2); // 如果强度超过阈值且不在冷却期内则触发摇动 if (speed SHAKE_THRESHOLD !isShaking) { triggerShake(); } }4.4 触发摇动后的处理当检测到有效摇动后我们需要执行一系列动作触发视觉反馈、播放音效可选、生成随机结果并进入冷却期。// 触发一次摇动 function triggerShake() { isShaking true; updateStatus(检测到摇动正在生成萌茶..., success); // 1. 触发视觉动画 startShakeAnimation(); // 2. 播放音效可选需要用户交互后 // playShakeSound(); // 3. 生成随机萌茶 setTimeout(() { const randomTea teaList[Math.floor(Math.random() * teaList.length)]; teaNameEl.textContent randomTea.name; teaDescEl.textContent randomTea.desc; updateStatus(恭喜你摇出了一杯「${randomTea.name}」, success); stopShakeAnimation(); }, 800); // 动画持续时间 // 4. 设置冷却期防止连续触发 if (shakeTimeoutId) clearTimeout(shakeTimeoutId); shakeTimeoutId setTimeout(() { isShaking false; updateStatus(可以继续摇动啦, info); }, SHAKE_TIMEOUT); }4.5 实现视觉与交互动画动画能极大提升反馈感。我们通过 CSS 变换和类名切换来实现。// 开始摇动动画 function startShakeAnimation() { teaCupContainer.classList.add(shaking); // 触发气泡动画 document.querySelectorAll(.bubble).forEach(bubble { bubble.style.animation floatUp 1s ease-out forwards; }); } // 停止摇动动画 function stopShakeAnimation() { teaCupContainer.classList.remove(shaking); // 重置气泡动画 document.querySelectorAll(.bubble).forEach(bubble { bubble.style.animation ; // 短暂延迟后移除内联样式以便下次重新触发 setTimeout(() bubble.style.animation null, 50); }); } // 模拟摇动用于桌面测试 simulateBtn.addEventListener(click, () { if (!motionPermissionGranted) { updateStatus(请先点击“开始摇动检测”按钮。, error); return; } triggerShake(); }); // 重置按钮 resetBtn.addEventListener(click, () { teaNameEl.textContent --; teaDescEl.textContent 描述信息将在这里显示; updateStatus(请用力摇晃手机, info); stopShakeAnimation(); if (shakeTimeoutId) clearTimeout(shakeTimeoutId); isShaking false; });现在我们需要在style.css末尾补充动画相关的样式/* 摇动动画 */ keyframes shake { 0%, 100% { transform: translateX(0) rotate(0deg); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-1deg); } 20%, 40%, 60%, 80% { transform: translateX(5px) rotate(1deg); } } .tea-cup-container.shaking { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } /* 气泡上浮动画 */ keyframes floatUp { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px) scale(1.2); } }4.6 处理页面可见性变化当用户切换标签页或最小化浏览器时应暂停传感器监听以节省资源。// 页面可见性变化处理 document.addEventListener(visibilitychange, () { if (document.hidden) { // 页面隐藏移除监听 window.removeEventListener(devicemotion, handleDeviceMotion); if (motionPermissionGranted) { updateStatus(页面不在前台检测已暂停, info); } } else if (motionPermissionGranted) { // 页面再次显示重新添加监听注意iOS可能需要重新请求 window.addEventListener(devicemotion, handleDeviceMotion); updateStatus(摇动检测恢复, success); } });至此核心功能已全部实现。你可以将项目文件部署到本地服务器如http://localhost:8000然后在手机浏览器中访问进行测试。5. 运行验证与真机调试5.1 本地运行步骤在项目根目录shake-for-tea下启动一个本地 HTTP 服务器。# 使用 Python如果已安装 python -m http.server 8000 # 或使用 Node.js 的 http-server需全局安装 npm install -g http-server # http-server -p 8000确保你的手机和电脑在同一个局域网下。在电脑上打开命令行查看本机 IP 地址如192.168.1.100。在手机浏览器中访问http://你的电脑IP:8000例如http://192.168.1.100:8000。点击“开始摇动检测”按钮根据提示授权iOS 会弹出对话框。用力摇晃手机观察茶杯动画和随机生成的萌茶结果。5.2 预期结果与调试正常情况点击按钮授权后状态变为“摇动检测已开启”。摇晃手机茶杯会左右晃动并伴有气泡上浮动画随后显示随机生成的萌茶名称和描述。控制台无错误。调试面板点击页面底部的“调试信息”可以展开查看实时的加速度数据和计算出的摇动强度。这有助于你调整SHAKE_THRESHOLD参数。在桌面端你可以点击“模拟摇动”按钮来测试动画和逻辑。5.3 关键验证点权限请求在 iOS Safari 或某些安卓浏览器上必须看到权限弹窗并点击“允许”。HTTPS/Localhost确保访问地址是localhost或127.0.0.1而非file://路径。传感器数据在调试面板中acceleration数据应随手机移动而变化。静止时z轴应接近9.81。阈值调整如果感觉摇动太灵敏或不灵敏在script.js中调整SHAKE_THRESHOLD的值增大或减小。6. 常见问题排查清单在实际开发和使用中你可能会遇到以下问题。请按顺序排查。问题现象可能原因检查与解决方案点击按钮无反应无权限弹窗1. 页面未通过 HTTPS 或 localhost 访问。2. 浏览器不支持或默认禁止。3. iOS 版本低于 13。1. 确认访问地址是http://localhost:8000或https://开头。2. 尝试使用 Chrome、Safari 等现代浏览器。3. 对于旧版 iOS可能需要在Settings Safari Motion Orientation Access中开启。已授权但摇晃手机无反应1. 摇动强度未达到阈值。2. 事件监听未成功添加。3. 手机传感器故障或浏览器兼容性问题。1. 打开调试面板观察摇动强度数值。用力摇晃看数值是否超过SHAKE_THRESHOLD默认800。可适当调低阈值。2. 在浏览器开发者工具的 Console 中检查是否有 JS 错误。3. 尝试在其他网页测试传感器搜索“device motion test”。桌面浏览器“模拟摇动”有效但真机无效真机未成功监听devicemotion事件。1.最重要确保在真机上点击了“开始摇动检测”按钮并授权。2. 检查真机浏览器 Console远程调试是否有错误。3. 确认手机没有开启省电模式或限制浏览器后台运行。动画卡顿或不流畅1. CSS 动画性能问题。2. JS 计算过于频繁阻塞主线程。1. 使用transform和opacity进行动画性能最好。我们已使用transform。2. 我们的handleDeviceMotion函数中已通过SHAKE_DATA_LIFETIME进行了节流避免高频计算。iOS 上第一次摇动后再次摇动无效iOS 的节能策略或页面生命周期导致监听中断。1. 确保页面在前台未被最小化。2. 监听visibilitychange事件并在页面重新显示时重新绑定事件我们的代码已实现。3. 考虑在triggerShake函数冷却期结束后检查监听是否仍在。摇动触发过于频繁SHAKE_THRESHOLD设置过低或SHAKE_TIMEOUT冷却时间太短。1. 适当提高SHAKE_THRESHOLD的值。2. 适当增加SHAKE_TIMEOUT的值例如改为1500毫秒。7. 生产环境最佳实践与扩展方向将“摇一摇”功能投入实际项目时需要考虑更多细节。7.1 增强健壮性优雅降级在script.js开头检查浏览器是否支持DeviceMotionEvent。if (!(DeviceMotionEvent in window)) { updateStatus(抱歉您的设备或浏览器不支持摇一摇功能。, error); startBtn.disabled true; startBtn.textContent 设备不支持; // 可以隐藏摇动相关UI或提供替代交互如点击按钮 }参数调优SHAKE_THRESHOLD和SHAKE_TIMEOUT应根据目标用户群如儿童、老年人和具体场景如游戏、工具进行 A/B 测试来最终确定。错误边界在handleDeviceMotion中加入try...catch防止因意外数据格式导致整个脚本崩溃。性能监控在devicemotion事件处理函数中避免执行耗时操作如大量 DOM 操作、复杂计算。我们的动画通过 CSS 实现与 JS 主线程分离是较好的实践。7.2 扩展功能设想音效反馈在triggerShake函数中增加声音播放。注意大多数浏览器要求音频播放必须在用户手势触发后可以将音频初始化放在按钮点击事件中。震动反馈使用navigator.vibrate()API 在摇动时触发手机震动增强体验。同样需要注意用户手势和权限。摇动模式识别通过分析加速度数据的时间序列可以识别不同的摇动模式如上下摇、左右摇、画圈对应不同的功能。与后端结合将摇动作为一个触发动作向服务器发送请求获取真实的奖品、内容或完成某个业务逻辑如签到。数据记录与分析记录用户摇动的次数、强度和时间用于分析用户参与度。7.3 安全与隐私提醒明确告知在功能开始前通过 UI 文字明确告知用户即将请求“运动传感器”权限并解释用途如“用于摇一摇抽奖”提升授权通过率。权限状态管理缓存用户的权限选择下次访问时无需重复请求对于支持Permissions API的浏览器可以查询accelerometer权限状态。数据不上传本示例中所有传感器数据均在客户端处理未发送到服务器。在实际应用中如果确需上传必须告知用户并获得明确同意且数据应匿名化处理。通过以上步骤我们不仅实现了一个有趣的“摇一摇”应用更深入理解了移动端传感器 API 的使用范式、兼容性处理和性能优化要点。下次当你需要为 H5 活动页增加一个吸引用户的交互时这套经过验证的代码框架和排查思路可以直接派上用场。