SVG Egg Morph Animation

Question

Я хотел бы превратить один простой путь 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, это делает яйцо, превращает его в стрелку, а затем сбрасывает его, удаляя одушевленный узел. Проблема, с которой я сталкиваюсь, - это анимация, которая работает только в первый раз. Когда я пытаюсь перезагрузить его и запустить его снова, он больше не оживляет. Он просто сразу превращается в стрелку. Мне нужно перезагрузить/обновить окно браузера, чтобы снова сделать анимацию.

Я знаю, что библиотека JavaScript Raphael является удивительной для такого рода анимации, но все, что я хочу сделать, это простой морф. Мои посетители будут в основном использовать мобильные устройства, поэтому я бы хотел не загружать библиотеку, чтобы сделать эту простую анимацию.

Answer 1

Анимации работать на временной шкале. Время анимации в основном начинается с 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"; 
} 

Answer 2

Хорошо, поэтому, прежде всего, код немного грязный, поэтому я не тратил много времени на каждую линию, и я приговариваю, если я пропустил что-то важное.

Потому что ваша начальная функция 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/