我有一个 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，以便我有更好的控制它，是否有一种简单的方法可以做到这一点，或者我必须学习如何做到这一点？
如果我正确理解您想要实现的目标，则每个路径的第一个动画应立即运行，第二个动画仅在新页面加载时运行。如果是这种情况，您可以明确地执行此操作。
为最早的第二个动画设置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();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句