Geek Answers Handbook

SVG Egg Morph Animation

I would like to turn one simple SVG path into another. I would like to use JavaScript to control when this happens.

Here's a link to the JSFiddle I created as a simplified example of what I'm trying to do: http://jsfiddle.net/brentmitch/RqRjq/

This basic code uses an example:

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); }

Using SVG, he creates an egg, turns it into an arrow, and then discards it, removing the animated node. The problem I am facing is an animation that only works for the first time. When I try to reset and run it again, it no longer animates. It just immediately turns into an arrow. I need to reload / refresh the browser window in order to make the animation again.

I know the Raphael JavaScript library is amazing for this kind of animation, but all I want to do is a simple morph. My visitors will mainly use mobile devices, so I would like not to download the library to make this simple animation.

+4
source share
2 answers

Animation runs on a timeline. Animation time basically starts at 0, and then when you start the animation, it runs for up to 4 seconds. When you delete and re-add an animation, you do not reset the timeline so that the animation runs from 4 seconds, which is the end point. You can restart the timeline, though by calling setCurrentTime, so ...

 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"; }
+3
source

Well, therefore, first of all, the code is a bit messy, so I did not spend much time on each line, and I condemn if I missed something important.

Since your initial function is makeEgg() before changeToArrow() , I left them alone.

I changed the first two lines from resetToEgg() :

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

For

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

To remove an svg element. Then I added makeEgg(); so that the egg is reset

Here is a fully functional version of http://jsfiddle.net/berodam/hArrb/

0
source

More articles:


All Articles