SVG-анимация с SMIL

Question

У меня есть некоторые вопросы о работе с анимацией SVG с улыбкой и сменой файлов с помощью javascript/jquery otf.

Вот что я уже пробовал:

HTML/XML:

 <svg version="1.1" id="story_animation_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve" style="background-color:#4B4542;"> 

      <g id="story_1"> 
       <path id="story_1_1" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,100z"> 
        <animate id="story_1_1_1" 
          attributeName="d" 
          from="M200,100l0,0" to="M200,100l0,380" dur="1s" 
          begin="0s;story_1_1_2.end" 
          end="" 
        /> 
        <animate id="story_1_1_2" 
          attributeName="d" 
          from="M200,100l0,380" to="M200,100l0,0" dur="1s" 
          begin="story_1_1_1.end" 
          end="" 
        /> 
       </path> 
       <path id="story_1_2" style="fill:none; stroke:#fff; stroke-width:2;" d="M200,500z"> 
        <animate id="story_1_2_1" 
          attributeName="d" 
          from="M200,500l0,0" to="M200,500l0,-380" dur="1s" 
          begin="story_1_1_1.begin+1s;story_1_2_2.end" 
          end="" 
        /> 
        <animate id="story_1_2_2" 
          attributeName="d" 
          from="M200,500l0,-380" to="M200,500l0,0" dur="1s" 
          begin="story_1_2_1.end" 
          end="" 
        /> 
       </path> 
      <g/> 

      <g id="story_2"> 
       <path id="story_2_1" style="fill:none; stroke:#fff; stroke-width:2; stroke-dasharray:795.8291015625,795.8291015625; stroke-dashoffset:795.8291015625;" d="M200,100l86,50l-172,100l172,100l-172,100l86,50"> 
        <animate id="story_2_1_1" 
          attributeName="stroke-dashoffset" 
          from="795.8291015625" to="-795.8291015625" dur="2s" 
          begin="" 
          calcMode="spline" 
          keySplines=".28 .25 .265 .25" 
          keyTimes="0;1" 
          end="" 
        /> 
        <animate id="story_2_1_2" 
          attributeName="stroke-dashoffset" 
          from="795.8291015625" to="0" dur="1s" 
          begin="" 
          calcMode="spline" 
          keySplines=".28 .25 .265 .25" 
          keyTimes="0;1" 
          end="" 
        /> 
       </path> 
      <g/> 

     </svg> 

JS/JQuery:

на в этом случае нажатие клавиши события выполните следующие действия:

document.getElementById('story_1_1_1').attributes[ 5 ].value = ''; 

document.getElementById('story_1_1_1').attributes[ 6 ].value ='story_1_1_1.end'; 

document.getElementById('story_1_2_1').attributes[ 6 ].value ='story_1_2_1.end'; 

document.getElementById('story_2_1_1').attributes[ 5 ].value= 'story_1_1_2.end;story_2_1_1.end'; 

почитаемых Результат:

Я хотел бы достичь:

• , имеющий цикл анимации работает постоянно анимировать
• на триггер событий (например, нажмите, нажмите, ...) завершите текущую анимацию в конце текущей итерации
• в конце первой анимации запустите вторую (- повторите для более анимации) (- в идеале делать то же самое наоборот: переходе от анимации 2 до 1)

Фактический результат:

Что происходит до сих пор:

• анимация 1 петля отлично работает
• при нажатии клавиши:
• корпус 1 (вы нажали, а верхняя линия идет вниз):
  • Он работает
• корпус 2 (вы нажали, а верхняя линия идет вверх) :
  • еще анимация одна итерация больше и затем останавливается

Я открыт для разных подходов и/или идей о том, как это сделать. SMIL казался, по крайней мере, вначале быстрым и легким способом, а также с точки зрения производительности на мобильных устройствах он отлично работает. Возможно, css3 анимация лучше в этом случае?

Как это исправить?

Answer 1

Это жесткий один ... Я возился с ним здесь:

$(window).keypress(function(e) {//spacebar trigger 
    if (e.keyCode === 0 || e.keyCode === 32) { 
     $('#story_1_1_1, #story_1_1_2, #story_1_2_1, #story_1_2_2').attr('end', 'story_2_1_1.begin'); 
     $('#story_2_1_1').attr('begin', '0s;story_2_1_2.end'); 
    } 
}); 

https://jsfiddle.net/kt7gax2a/2/