Question

（为简洁起见，SVG已经简化）

我遇到了在悬停时执行的SVG动画的问题，然后在悬停发布时动画回到其初始状态。动画执行正常，但是当用户仅在元素上短暂悬停时，问题就出现了，因为悬停动画仍在执行，但重置动画同时开始执行，导致SVG的某些元素处于悬停状态，和其他人处于悬停释放状态。

基本上，我想要做的是，如果在动画完全执行之前释放悬停，则停止动画执行并动画回到初始状态。

这是我现在的JavaScript：

var newSvg = '';        

var s = Snap("#svg-container");

Snap.load('http://pathtofile.svg', function (f) {
    var g = f.selectAll('g');
    s.append(g);
    newSvg = s.group(s.selectAll('g'));
});

$('#container').mouseenter(function() {
    newSvg.stop();
    animate();
});
$('#container').mouseleave(function() {
    newSvg.stop();
    reset();
});


function animate() {
    newSvg.select('.screen-inner').animate({
        fill: '#d5e2af'
    }, 200);
    newSvg.select('.content-circles').attr({
        opacity: '1',
        fill: 'transparent',
        stroke: '#dda7d2'
    });
    newSvg.select('.circle-1').animate({
        'stroke-dashoffset': '0',
        opacity: '1'
    }, 450, mina.easeout);
    newSvg.select('.circle-2').animate({
        'stroke-dashoffset': '0',
        opacity: '1'
    }, 450, mina.easeout);
    newSvg.select('.circle-3').animate({
        'stroke-dashoffset': '0',
        opacity: '1'
    }, 450, mina.easeout);
}

function reset() {   
    newSvg.select('.screen-inner').animate({
        fill: '#222426'
    }, 200);     
    newSvg.select( '.circle-2' ).animate({
        'stroke-dashoffset': '44',
        'opacity': '0'
    }, 125);
    newSvg.select( '.circle-1' ).animate({
        'stroke-dashoffset': '44',
        'opacity': '0'
    }, 125);
    newSvg.select( '.circle-3' ).animate({
        'stroke-dashoffset': '44',
        'opacity': '0'
    }, 125);
}

我已经尝试过Snap的stop（） - 函数和jQuery stop（） - 以及clearQueue（） - 函数，但没有运气。

（简化）SVG如下所示：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<style type="text/css">
    .st1{fill:#B3B3B3;}
    .st3{fill:none;stroke:#B3B3B3;stroke-miterlimit:10;}
    .screen-inner{fill:#222426}
</style>
<g class="full">
    <g class="screen-inner" fill="#222426">
        <rect x="38.4" y="76.2" class="st0" width="222.4" height="111.2" />
        <path class="st1" d="M260.3,76.7V187H38.9V76.7H260.3 M261.3,75.7H37.9V188h223.4V75.7L261.3,75.7z"></path>
    </g>
    <g class="content-circles">
        <circle class="st3 circle-1" opacity="0" stroke-width="14px" stroke-dasharray="44" stroke-dashoffset="44" cx="92.8" cy="125" r="7" />
        <circle class="st3 circle-2" opacity="0" stroke-width="14px" stroke-dasharray="44" stroke-dashoffset="44" cx="149.6" cy="125" r="7" />
        <circle class="st3 circle-3" opacity="0" stroke-width="14px" stroke-dasharray="44" stroke-dashoffset="44" cx="206.2" cy="125" r="7" />
    </g>
</g>
</svg>

这个问题有解决方案吗？

Snap SVG动画不会在状态更改时重置

0 个答案: