为什么只显示最后一个我的 svg 动画？

问题描述

我目前正在开发一个二叉搜索树可视化工具，所以动画功能是为了让最新的插入节点在找到正确位置时沿着分支向下移动。每次二叉树插入函数需要向下另一个分支时都会调用动画函数，它传入父节点圆svg和当前节点圆svg的坐标，它应该从一个到另一个进行转换分别，并且总的来说它应该为沿着分支移动的节点设置动画。但它只向下移动最后一个分支，这告诉我坐标值是正确的，只是第一个动画没有显示。

控制台打印“进度完成！”如果我运行 3 个动画，则语句 3 次，这告诉我它们似乎正在运行，只是瞬间。我正在使用 JS 来操作 svg 元素。此外，如果我将持续时间更改为更长的时间，我会得到意想不到的结果，例如移动节点出现在树的根部，并且在最后一个连续动画完成之前根本不会移动，然后一切都会卡入到位。

此外，移动节点 (animNode) 在每次完成从父节点到子节点的过渡动画时都会被删除，如果必须向下移动另一个分支，则会创建另一个 animNode 以从当前节点开始并向下移动到下一个节点。动画功能在这里：

    let startTime = 0;
    const totalTime = 2000; // 1000ms = 1s
    const animateStep = (timestamp) => {
        if (!startTime) startTime = timestamp;

        // progress goes from 0 to 1 over 2s
        const progress = (timestamp - startTime) / totalTime;

        // change circle cx and cy values to move diagonally
        animNode.setAttributeNS(null,'cx',parentNodeCxInt + (diffX * progress));
        animNode.setAttributeNS(null,'cy',(parentNodeCyInt - 20) + (diffY * progress));
        // do the same for the text but x and y instead of cx and cy
        animText.setAttributeNS(null,'x',parentNodeCxInt + (diffX * progress));
        animText.setAttributeNS(null,'y',(parentNodeCyInt - 20) + (diffY * progress));

        if (progress < 1) {
            window.requestAnimationFrame(animateStep);
            console.log("progress happening");
        }
        else if (isFinalMove) {
            console.log("progress complete!");
            // delete the animating Node and text
            animNode.remove();
            animText.remove();
            // create the permanent node in it's correct place
            createNodeInDOM(currNode,0);
        }
        else {
            console.log("progress complete!");
            // delete the animating Node and text
            animNode.remove();
            animText.remove();
        }
    }
    window.requestAnimationFrame(animateStep);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）