Преобразование SVG в функцию jQuery

Question

У меня есть SVG

<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" fill="freeze" repeatCount="1"></animate>
    <animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.73s" fill="freeze" repeatCount="1"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.1s" fill="freeze" repeatCount="1"></animate>
    <animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.63s" fill="freeze" repeatCount="1"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="M 0 0 V 0 C 50 0 50 0 100 0 V 0 H 0;                         M 0 25 V 25 C 50 15 50 60 100 50 V 0 H 0;                         M 0 50 V 50 C 50 50 50 85 100 80 V 0 H 0;                         M 0 100 V 100 C 50 100 50 100 100 100 V 0 H 0" dur="0.4s" begin="0.2s" fill="freeze" repeatCount="1"></animate>
    <animate attributeName="d" values="M 0 0 C 50 0 50 0 100 0 V 100 H 0;                         M 0 25 C 50 15 50 60 100 50 V 100 H 0;                         M 0 50 C 50 50 50 85 100 80 V 100 H 0;                         M 0 100 C 50 100 50 100 100 100 V 100 H 0" dur="0.4s" begin="0.53s" fill="freeze" repeatCount="1"></animate>
  </path>
</svg>

Я пытаюсь использовать его в качестве перехода страницы, чтобы он покрывал весь экран до загрузки следующей страницы, но у меня проблема в том, что даже с SVGSVGELEMENT.getCurrentTime () я не могу остановиться это в правильном месте, и поэтому svg будет останавливаться в разных точках.

  $('.the_box').removeClass('loaded');
  $('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', function() {
    var svgDoc = $('.ccs svg');
    var animWatch = setInterval(function() {
      if (svgDoc[0].getCurrentTime() > 0.56 && !($('.the_box').hasClass('loaded'))) {
        svgDoc[0].pauseAnimations();
        console.log(svgDoc[0].getCurrentTime());
      } else if (svgDoc[0].getCurrentTime() > 0.56 && $('.the_box').hasClass('loaded')) {
        svgDoc[0].unpauseAnimations();
        $('.the_box').siblings('.slider-transition').html($('.the_box').html());
        $('.slider-transition').children('.slider-transition').unwrap();
        $('video').trigger('play');
        clearInterval(animWatch);
      }
    }, 10);
  });
  // $('#holder').load(function(){ var imgcount = $('#holder img').length; $('#holder img').load(function(){ imgcount--; if (imgcount == 0) { /* now they're all loaded, let's display them! */ } }); });
  $('.the_box').load(href + ' .slider-transition', function() {
    var svgDoc = $('.ccs svg');
    $(this).addClass('loaded');
    $('.woocommerce-product-gallery').each(function() {
      $(this).wc_product_gallery();
    });
    slideShowInit();
    initParalax();
  });

Даже с интервалом 10 (или даже 1) пауза будет происходить в совершенно разное время и, похоже, не сможет ее перехватить в нужный момент, поэтому я считаю, что лучше всего конвертировать svg в jQuery так, чтобы Я лучше контролирую это, есть ли простой способ сделать это или я должен научиться делать это?

Answer 1

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

Установите id="reveal" и begin="indefinite" для самой ранней из второй анимации и начните ее с $('#reveal')[0].beginElementAt(). Затем две другие анимации могут быть запущены с относительным временем начала: begin="reveal.begin+0.1s".

<svg class="svg_el" viewbox="0 0 100 100" preserveaspectratio="none">
  <path class="overlay_path">
    <animate attributeName="d" values="..." dur="0.4s" fill="freeze"></animate>
    <animate attributeName="d" values="...." dur="0.4s" begin="reveal.begin+0.2s" fill="freeze"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="..." dur="0.4s" begin="0.1s" fill="freeze"></animate>
    <animate attributeName="d" values="" dur="0.4s" begin="reveal.begin+0.1s" fill="freeze"></animate>
  </path>
  <path class="overlay_path">
    <animate attributeName="d" values="" dur="0.4s" begin="0.2s" fill="freeze"></animate>
    <animate id="reveal" attributeName="d" values="..." dur="0.4s" begin="indefinite" fill="freeze"></animate>
  </path>
</svg>

Для времени начала второй группы анимаций вам теперь нужно дождаться события загрузки. Если первая группа анимаций все еще работает, вы можете отложить время начала для второй. beginEvent запускает другие действия.

  $('.the_box').removeClass('loaded');
  var svgLoad = $.Deferred(), sliderLoad = $.Deferred();
  // first animations start immediatly after svg load
  $('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', svgLoad.resolve);
  $('.the_box').load(href + ' .slider-transition', sliderLoad.resolve);
  // wait for both load events
  $.when(svgLoad, sliderLoad).then(function() {
    var svgDoc = $('.ccs svg');
    // delay start time of second animations if load is earlier than 0.53s
    var startTime = Math.max(0.53, svgDoc[0].getCurrentTime());
    var reveal = $('#reveal');
    // link DOM change and video play to animation beginEvent
    reveal.on('beginEvent', function () {
        $('.the_box').siblings('.slider-transition').html($('.the_box').html());
        $('.slider-transition').children('.slider-transition').unwrap();
        $('video').trigger('play');
    });
    reveal[0].beginElementAt(startTime);
    $(this).addClass('loaded');
    $('.woocommerce-product-gallery').each(function() {
      $(this).wc_product_gallery();
    });
    slideShowInit();
    initParalax();
  });