4

我想将一个简单的 SVG 路径变形为另一个。我想使用 JavaScript 来控制何时发生这种情况。

这是我创建的 JSFiddle 的链接，作为我正在尝试做的简化示例：http: //jsfiddle.net/brentmitch/RqRjq/

这是示例使用的基本代码：

function makeEgg() {
    var svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgContainer.setAttribute("version", "1.1");
    svgContainer.setAttribute("width", "142.308px");
    svgContainer.setAttribute("height", "142.308px");
    svgContainer.setAttribute("id", "curvecontainer");
    svgContainer.setAttribute("x", "0px");
    svgContainer.setAttribute("y", "0px");
    var eggPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    eggPath.setAttribute("id", "eggpath");
    eggPath.setAttribute("d", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
    eggPath.setAttribute("fill", "GoldenRod");
    svgContainer.appendChild(eggPath);
    document.getElementById('svgcontainer').appendChild(svgContainer);
}

function changeToArrow() {
    var animateEggPath = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
    animateEggPath.setAttribute("id", "egganimation");
    animateEggPath.setAttribute("xlink:href", "#eggpath");
    animateEggPath.setAttribute("attributeType", "XML");
    animateEggPath.setAttribute("attributeName", "d");
    animateEggPath.setAttribute("from", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
    animateEggPath.setAttribute("to", "M126.308,95.154c0,39.297-17.333-28.667-39.769-28.667S16,134.451,16,95.154S50,12,71.154,12   S126.308,55.856,126.308,95.154z");
    animateEggPath.setAttribute("dur", "4s");
    animateEggPath.setAttribute("fill", "freeze");
}

function resetToEgg() {
    var animations = document.getElementById('egganimation');
    document.getElementById('eggpath').removeChild(animations);
}

使用 SVG，它制作了一个鸡蛋，将其变形为一个箭头，然后通过删除动画节点来重置它。我遇到的问题是动画只能在第一次工作。当我尝试重置它并再次运行它时，它不再动画了。它只是立即变成箭头。我必须重新加载/刷新浏览器窗口才能再次制作动画。

我知道 Raphael JavaScript 库非常适合这种动画，但我想做的只是一个简单的变形。我的访问者将主要使用移动设备，所以我想避免加载一个库只是为了做这个简单的动画。

4

2 回答 2

3

动画在时间线上运行。动画时间基本上从 0 开始，然后当您运行动画时，它会运行到 4 秒。当您删除并重新添加动画时，您不会重置时间线，因此动画从 4 秒开始运行，这是结束点。您可以通过像这样调用 setCurrentTime 来重新启动时间线......

function resetToEgg() {
    var animations = document.getElementById('egganimation');
    document.getElementById('eggpath').removeChild(animations);
    curvecontainer.setCurrentTime(0);
    document.getElementById('arrowbutton').style.display = "inline";
    document.getElementById('resetbutton').style.display = "none";
}
于 2013-04-07T07:36:37.100 回答
0

好的，首先代码有点乱，所以我没有花很多时间检查每一行，如果我错过了重要的事情，我会道歉。

因为您对我的初始功能makeEgg()让changeToArrow()我独自一人。

我从以下位置修改了前两行resetToEgg()：

var animations = document.getElementById('egganimation');
document.getElementById('eggpath').removeChild(animations);

到

var animations = document.getElementById('curvecontainer');
document.getElementById('svgcontainer').removeChild(animations);

这样它就删除了 svg 元素。接下来我添加了，makeEgg();以便重置鸡蛋

这是功能齐全的版本http://jsfiddle.net/berodam/hArrb/

于 2013-04-07T02:54:26.403 回答