svg复古胶片快门动画用三片弧形path绕中心旋转开合，css@keyframes控制0%闭合、50%开启抖动、100%复位，配合暗角、色偏与防连点交互实现机械感。
在 H5 页面中用 SVG 实现复古胶片相机快门开合动画，核心是用 <path></path> 模拟快门叶片的旋转运动，并结合 CSS 或 SMIL 动画控制其开合节奏。关键不在于画得多逼真，而在于抓住“三片弧形叶片绕中心旋转闭合”这一典型机械快门（如 Copal 镜间快门）的视觉特征。
SVG 结构：用 path 拼出三片可动快门叶片
快门通常由 3～5 片对称弧形叶片组成，动画时它们同步从中心向外旋转展开（开启），再向内旋转收拢（闭合）。建议用 3 片简化实现：
- 每片用一个
<path></path>描述扇形轮廓（起点→弧线→终点→闭合），通过transform="rotate(0 50 50)"设置绕中心（50,50）旋转锚点 - 三片初始角度错开 120°（0°、120°、240°），保证对称；闭合时统一转到 ±30° 范围，留出中心小孔；开启时转到 ±90° 以外，完全露出画面区
- 把所有叶片包裹进一个
<g id="shutter"></g>组，方便统一控制
动画实现：用 CSS @keyframes 控制旋转时序
比 SMIL 更兼容、更易调试。给 #shutter > path 统一加动画，注意三点：
- 用
transform-origin: 50px 50px确保绕 SVG 中心旋转（需设 viewBox="0 0 100 100"） - 关键帧定义：0% → 叶片闭合（如 rotate(-25)），50% → 完全开启（rotate(-90)），100% → 回到闭合；时长建议 0.3s～0.4s，模拟真实快门干脆感
- 加
transform-box: fill-box兼容 Safari，避免旋转偏移
增强复古感：加噪点、色偏和机械卡顿
纯平滑旋转太数码。可叠加三层细节提升胶片味：
-
轻微抖动：在快门完全开启瞬间（50% 帧），给整个快门组加
translate(±0.3px, ±0.2px)随机偏移 -
边缘暗角：在 SVG 外层叠一个
<radialgradient></radialgradient>蒙版，中心透明、四周渐变黑（opacity 0.15～0.2） -
胶片色偏：快门开启时，给下方预览图（或背景）临时加
filter: sepia(0.3) contrast(1.1) brightness(0.95)
触发与交互：绑定点击并防连点
用户点击相机按钮时播放一次快门动画，需避免快速连点导致动画错乱：
- 用 JavaScript 监听按钮 click，调用
shutterEl.getAnimations().forEach(a => a.cancel())清除旧动画 - 然后添加新动画类：
shutterEl.classList.add('shutter-open');，动画结束后用animationend移除该类 - 加 300ms 节流：设置
isAnimating = true，动画结束才重置，期间忽略点击
