SVG.js如何销毁历史动画 避免重复启动时元素缩放异常

重复操作后矩形持续缩小，核心是两处逻辑缺陷：

• 仅手动移除DOM上的transform属性，未同步重置svg.js内部维护的元素变换状态缓存。svg.js执行变换动画时不会实时从DOM属性读取当前状态，而是基于自身存储的变换矩阵计算后续动画值；手动删除DOM属性后，内部缓存仍保留上一次动画结束后的缩放状态，后续调用scale()会在残留状态基础上叠加变换，最终出现尺寸持续缩小的现象。
• 调用svgEle.timeline().finish()仅会将当前运行中的动画直接跳转到结束帧，不会清空时间线上已排队的动画任务、也不会销毁已注册的动画实例，新旧动画叠加会进一步导致状态计算混乱。

每次启动新动画、点击重置时，需要完成三个清理/重置动作：

1. 先停止元素上所有正在运行、排队等待的动画，彻底清空时间线
2. 主动调用svg.js的原生API重置元素变换状态到初始值，不要手动删除DOM属性
3. 再启动新的动画序列，保证动画从原始1:1尺寸的基准状态开始计算

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.10/dist/svg.min.js"></script>

<svg width="640" height="480" style="background: lightblue">
  <rect width="50" x="0" y="0" height="50" fill="#ff0000" id="svg_1"></rect>
</svg>

<div>
  <button id="testBtn">start</button>
</div>
<div style="margin-top: 30px;">
  <button id="testStop">restore</button>
</div>

<script>
var btn = document.getElementById('testBtn');
var stopBtn = document.getElementById('testStop');
var runner;
var startSize = 20,
  endSize = 80;
const startScale = startSize === 0 ? 0.001 : startSize / 100;
const endScale = endSize / 100;
var x = 0,
  y = 0,
  width = 50,
  height = 50;

const rect = document.getElementById('svg_1');
const svgEle = SVG(rect);

// 统一状态重置方法
function resetElement() {
  // 停止所有动画，清空时间线排队任务
  svgEle.timeline().stop();
  // 用svg.js原生API重置变换到初始状态，同步内部缓存与DOM表现
  svgEle.transform({scale: 1, x:0, y:0});
  svgEle.opacity(1);
}

btn.addEventListener('click', () => {
  // 启动新动画前先清理旧状态、旧动画
  resetElement();
  // 启动新动画序列，直接传入目标缩放比例即可
  runner = svgEle.animate().opacity(0)
    .animate().scale(startScale, startScale, x, y + height / 2)
    .animate().opacity(1)
    .animate({
      duration: 1500
    }).scale(endScale, endScale, x, y + height / 2);
})


stopBtn.addEventListener('click', () => {
  resetElement();
})
</script>

• 移除了原有错误的缩放比例换算逻辑：原代码中end = (endSize / 100) * (1 / start)的写法，本质是为了在已有缩放比例基础上叠乘得到目标值；只要每次将元素状态重置回初始1倍比例，直接传入目标缩放值即可，无需额外叠乘计算。
• 封装统一的resetElement方法：调用svg.js原生的timeline().stop()彻底停止所有动画（相比finish()清理更彻底，会直接清空排队的动画任务），再通过库提供的transform()API将元素状态重置回初始值，保证内部状态缓存和DOM表现完全一致，替代原有人工删除DOM属性的不可靠操作。
• 每次点击start启动新动画前先执行重置逻辑，从根源上避免旧动画、旧状态残留对新动画的计算产生干扰。

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