氧化还原反应（交互动画）-2026-2027学年高一上学期化学必修第一册

氧化还原反应·电子转移交互动画 —— 完整流程 ================================================ 一、启动与说明 1. 打开 03_氧化还原反应（交互动画）.html，显示标题与核心概念。 2. 顶部图例与说明： - 还原剂（蓝）：失电子 → 化合价升高 → 被氧化 - 氧化剂（红）：得电子 → 化合价降低 → 被还原 - 价电子（金色小球）：可在原子间拖拽，是电子转移的载体 3. 工具栏提供三个操作： - 「切换反应模式」：在 离子化合物（电子得失） 与 共价化合物（电子偏移）之间切换 - 「自动演示」：由程序自动完成一次正确的电子转移 - 「重置」：恢复初始状态重新演练 二、场景呈现（以离子化合物 Na + Cl₂ → 2NaCl 为例） 1. 画布左侧：钠原子 Na - 原子核 + 内层电子环（2,8）+ 最外层 1 个金色价电子（可拖拽） - 角色：还原剂 2. 画布右侧：氯原子 Cl - 原子核 + 内层电子环（2,8）+ 最外层 7 个金色价电子（可拖拽） - 角色：氧化剂 3. 价电子默认在各自原子的外层轨道上轻微浮动，提示其“可活动”。 4. 底部信息面板实时显示：各原子化合价（初始 0）、角色、电荷、转移状态。 三、正确交互（电子转移 —— 得失） 1. 用户用鼠标按住 Na 最外层的价电子，开始拖拽。 2. 拖拽时，从电子位置向对面氧化剂 Cl 画出半透明虚线箭头（→），提示正确方向； 若反向拖向 Na，则箭头变红，提示方向错误。 3. 将电子拖到 Cl 原子范围内并松开鼠标： - 触发“电子转移”动画：电子沿一条向上拱起的抛物线箭头轨迹，从 Na 飞向 Cl。 - 轨迹上动态绘制金色箭头，明确标明“还原剂 → 氧化剂”的转移方向。 4. 动画结束后状态更新： - Na 失去 1e⁻ → 变为 Na⁺（核显示 +1），化合价 0 → +1（升高），标记“还原剂·被氧化”。 - Cl 得到 1e⁻ → 最外层补齐为 8 电子稳定结构（核显示 −1），化合价 0 → −1（降低），标记“氧化剂·被还原”。 5. 底部面板刷新，出现“失 1e⁻ / 得 1e⁻”对照与化合价升降说明。 四、多样性交互（共价化合物 H₂ + Cl₂ → 2HCl —— 偏移） 1. 切换到共价模式：左侧 H 原子（1 个价电子，还原剂），右侧 Cl 原子（7 个价电子，氧化剂）。 2. 共价键不是整体电子转移，而是“共用电子对偏向”电负性更大的 Cl。 3. 用户拖拽 H 的价电子靠近 Cl 并松手后： - 电子停留在两核之间的“共用区”，但明显偏向 Cl 一侧； - 画布画出 H—Cl 键线，标注“电子对偏向 Cl：H 显 +1，Cl 显 −1”； - 角色判定与得失一致：H 升高（还原剂）、Cl 降低（氧化剂），强调“偏移”而非“得失”。 4. 同一套拖拽机制，但概念层面区分“得失”与“偏移”，体现交互多样性。 五、错误操作与严重性警示（核心要求） 1.【方向错误】把氧化剂（Cl）的价电子拖向还原剂（Na）： - 红色警告横幅：“方向错误！电子不能从氧化剂流向还原剂，否则化合价升降关系颠倒，违背氧化还原本质。” - 画布轻微抖动以强化警示；电子返回原位。 2.【目标无效】将电子拖到空白处或其它无关位置后松开： - 黄/红色提示：“未连接到有效目标原子，电子已返回原位。”电子平滑飞回起点。 3.【超额/重复误触】对已经完成的体系继续强行拖拽： - 提示“体系已完成电子转移，请重置后再试”，避免错误叠加。 4.【错误累积警示】累计错误操作达到 3 次： - 弹出严重警示弹窗（红框）：“⚠ 危险！持续的反向/无效拖拽会破坏电子守恒，氧化还原反应将无法发生。请记住：还原剂（失电子·化合价升高）→ 氧化剂（得电子·化合价降低）。”需手动确认关闭。 5.【乱点原子】点击原子核（非价电子）仅高亮该原子信息，不触发转移，避免误动作。 六、完成与复盘 1. 电子转移达标（按演示单元完成 1 次正确转移）后，画布标记生成物（NaCl / HCl）。 2. 因果式展示： - 还原剂 Na（蓝）：失 e⁻ → 化合价升高 → 被氧化 - 氧化剂 Cl（红）：得 e⁻ → 化合价降低 → 被还原 3. 列出“化合价升降 ↔ 电子得失（偏移）”对应表，强化“化合价升降本质=电子转移”的结论。 4. 提供「重置」重新演练；「切换反应模式」体验得失/偏移两种多样性场景。 七、技术实现要点 - 采用 HTML5 Canvas + requestAnimationFrame 渲染循环，暗色实验风格。 - 鼠标事件：mousedown 拾取价电子 / 选中原子；mousemove 拖拽；mouseup 落点判定； 并兼容 touch 事件以支持触屏。 - 电子转移用二次贝塞尔曲线轨迹 + 箭头绘制，方向由“失电子原子 → 得电子原子”确定。 - 状态机维护每个原子的电荷、化合价、角色与转移计数，实时驱动 UI 文本与配色（蓝=还原剂、红=氧化剂）。 - 错误计数触发分级警示（提示 → 警告 → 严重弹窗），明确错误操作的严重性。 $null