Question

我有一个svg

select 
t1.t_id ,
t1.first_name,
t1.amount,
t1.parent_id,
t2.t_id ,
t2.first_name,
t2.amount,
t2.parent_id,
t3.t_id ,
t3.first_name,
t3.amount,
t3.parent_id,
t4.t_id ,
t4.first_name,
t4.amount,
t4.parent_id
from Transactions t1
left join Transactions t2
on t1.parent_id = t2.t_id
left join Transactions t3
on t2.parent_id = t3.t_id
left join Transactions t4
on t3.parent_id = t4.t_id;

我试图将其用作页面过渡，以便在下一页加载之前覆盖整个屏幕，但是我遇到的问题是，即使使用SVGSVGELEMENT.getCurrentTime（），我似乎也无法暂停它在正确的位置，因此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>

即使间隔为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();
  });

将SVG转换为jQuery函数

1 个答案: