如何用JavaScript为SVG变换添加平滑过渡动画？

当然可以实现平滑过渡，以下是几种常用方法：

方法1：CSS过渡（推荐，代码简洁易维护） #

通过CSS控制SVG的transform属性，并添加transition实现平滑动画，同时用class切换状态：

修改后的CSS #

#button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}

#svgID {
  transition: transform 0.3s ease; /* 0.3s是动画时长，ease是缓动曲线，可自定义 */
  transform-origin: center; /* 设置旋转中心为SVG中心，避免偏移 */
}

#svgID.rotated {
  transform: rotate(45deg);
}

修改后的JavaScript #

function rotate() {
  const svg = document.getElementById("svgID");
  svg.classList.toggle("rotated");
}

点击按钮时，通过切换rotated类触发CSS过渡，实现平滑旋转效果。

方法2：SVG原生动画元素 #

利用SVG内置的<animateTransform>元素实现动画，无需依赖CSS：

修改后的HTML（SVG部分） #

<svg id="svgID"
     width="100%"
     height="100%"
     viewBox="0 0 142.40739 142.40991"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs id="defs6" />
  <path id="rect234" ... /> <!-- 保留原path内容不变 -->
  <!-- 添加旋转动画，71.2是SVG viewBox的中心坐标（142.4/2） -->
  <animateTransform
    id="rotateAnim"
    attributeName="transform"
    type="rotate"
    from="0 71.2 71.2"
    to="45 71.2 71.2"
    dur="0.3s"
    begin="indefinite"
    fill="freeze" />
</svg>

修改后的JavaScript #

function rotate() {
  const anim = document.getElementById("rotateAnim");
  const svg = document.getElementById("svgID");
  
  // 判断当前旋转状态，切换动画方向
  if (svg.getAttribute("transform") === "rotate(45 71.2 71.2)") {
    anim.setAttribute("from", "45 71.2 71.2");
    anim.setAttribute("to", "0 71.2 71.2");
  } else {
    anim.setAttribute("from", "0 71.2 71.2");
    anim.setAttribute("to", "45 71.2 71.2");
  }
  anim.beginElement();
}

这种方法适合纯SVG场景，不需要额外CSS支持。

方法3：JavaScript手动控制动画（自由度高） #

使用requestAnimationFrame逐帧更新旋转角度，可自定义动画曲线和速度：

修改后的JavaScript #

const svg = document.getElementById("svgID");
let currentAngle = 0;
let targetAngle = 0;
let animationId = null;

function updateRotation() {
  // 计算角度差值，添加缓动效果
  const diff = targetAngle - currentAngle;
  currentAngle += diff * 0.1; // 0.1是缓动系数，值越大动画越快
  
  // 应用旋转，指定中心坐标
  svg.setAttribute("transform", `rotate(${currentAngle} 71.2 71.2)`);
  
  // 当角度接近目标值时停止动画
  if (Math.abs(diff) < 0.1) {
    currentAngle = targetAngle;
    svg.setAttribute("transform", `rotate(${currentAngle} 71.2 71.2)`);
    cancelAnimationFrame(animationId);
    animationId = null;
    return;
  }
  animationId = requestAnimationFrame(updateRotation);
}

function rotate() {
  targetAngle = currentAngle === 0 ? 45 : 0;
  if (!animationId) {
    updateRotation();
  }
}

这种方法适合需要精细控制动画过程的场景，比如自定义缓动函数、添加额外动画效果等。

内容的提问来源于stack exchange，提问作者Simplicissimus