如何无依赖实现SVG扑克牌折角翻转动画及交互优化？

核心需求回顾 #

• 已手动实现SVG扑克牌折角2D效果，但效果生硬，需添加动画、支持调整折角尺寸/角度，避免硬编码坐标
• Version 1遗留问题：
  • 折角无法跟随鼠标位置（仅能计算x/y偏移量）
  • 无法实现完整卡牌翻面效果
• Version 2现状：借助<marker>将翻面卡牌定位在旋转<line>末端，但仍需计算红点位置创建<clip-path>

针对Version 1的优化：鼠标跟随折角+完整翻面 #

1. 鼠标跟随折角实现 #

无需硬编码坐标，通过监听SVG的mousemove事件实时计算折角位置：

• 获取SVG元素的getBoundingClientRect()，将鼠标客户端坐标转换为SVG内部坐标
• 以卡牌边缘比例为判断条件，识别鼠标是否靠近目标折角区域（例：右下角触发区设为卡牌宽度/高度的后20%范围）
• 动态生成折角路径，实时更新path元素的d属性：

<path id="corner-fold" fill="#ccc" d="" />

JS逻辑示例：

const svg = document.querySelector('svg');
const cardW = 200; // 卡牌宽度
const cardH = 300; // 卡牌高度
const foldRatio = 0.2; // 折角占卡牌的比例，可动态调整
const foldSize = Math.min(cardW, cardH) * foldRatio;

svg.addEventListener('mousemove', (e) => {
  const rect = svg.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  let d = '';

  // 判断是否触发右下角折角
  if (x > cardW - foldSize && y > cardH - foldSize) {
    // 生成折角路径：从右下角到鼠标水平投影点，再到鼠标垂直投影点，最后闭合
    d = `M ${cardW} ${cardH} L ${x} ${cardH} L ${cardW} ${y} Z`;
  }
  document.getElementById('corner-fold').setAttribute('d', d);
});

2. 完整卡牌翻面效果实现 #

通过SVG的<animateTransform>结合元素显隐，实现平滑翻面过渡：

• 准备卡牌正面（#card-front）和反面（#card-back）元素，反面初始隐藏
• 触发翻面时，让正面沿y轴收缩消失，反面同步淡入显示：

<g id="card-container">
  <rect id="card-front" width="200" height="300" fill="#fff" stroke="#000" />
  <rect id="card-back" width="200" height="300" fill="#000" stroke="#fff" opacity="0" />
  
  <!-- 正面收缩动画 -->
  <animateTransform 
    xlink:href="#card-front"
    attributeName="transform"
    type="scale"
    from="1 1" to="0 1"
    dur="0.5s"
    begin="click"
    fill="freeze" />
  
  <!-- 反面淡入动画 -->
  <animate 
    xlink:href="#card-back"
    attributeName="opacity"
    from="0" to="1"
    dur="0.5s"
    begin="click"
    fill="freeze" />
</g>

若要实现折角到完整翻面的连贯过渡，可将翻面动画的begin属性关联到折角动画的结束事件（例：begin="corner-fold-animation.end"）。

针对Version 2的优化：自动计算clip-path红点位置 #

无需手动计算坐标，通过SVG的getPointAtLength()方法自动获取旋转line的末端点：

• 定义旋转<line>元素并设置id="fold-line"
• 在JS中获取线条总长度，通过getPointAtLength()提取末端坐标，以此生成clip-path的控制点：

const foldLine = document.getElementById('fold-line');
const foldSize = 30; // 折角尺寸，可动态调整
const clipPath = document.getElementById('fold-clip');

function updateClipPath() {
  const lineLength = foldLine.getTotalLength();
  const endPoint = foldLine.getPointAtLength(lineLength);
  // 生成clip-path用的圆形控制点
  clipPath.innerHTML = `<circle cx="${endPoint.x}" cy="${endPoint.y}" r="${foldSize}" />`;
}

// 每次line旋转后调用该方法更新clip-path
updateClipPath();

通用动画优化技巧 #

• 给折角路径添加过渡动画，让折角变化更平滑：

#corner-fold {
  transition: d 0.2s ease;
}

• 用变量控制折角尺寸与角度，支持动态调整：

// 调整折角尺寸比例
function setFoldRatio(ratio) {
  foldSize = Math.min(cardW, cardH) * ratio;
}

// 调整折角旋转角度（以卡牌右下角为旋转中心）
function setFoldAngle(angle) {
  document.getElementById('corner-fold').setAttribute('transform', `rotate(${angle} ${cardW} ${cardH})`);
}

内容的提问来源于stack exchange，提问作者Danny 'Quest' Engelman