javascript - SVG 动画路径属性 "d"悬停时速度或 snap.svg

Question

首先，我是 svg 的初学者，我在 Google 上找不到解决我的问题的好答案。我一直在尝试做的只是在悬停时为 svg 路径设置动画。

我已经下载并使用了snap.svg和velocity.js，所以如果你知道使用其中之一或展位的答案，请随意。

我当前的代码以及我尝试的速度:

<div class="g50">
    <svg class="curtain" viewBox="0 0 180 320" preserveAspectRatio="none">
        <path d="M 180,160 0,200 0,0 180,0 z"/>
    </svg>
</div>

<div class="g50">
    <svg class="curtain" viewBox="0 0 180 320" preserveAspectRatio="none">
        <path d="M 180,200 0,160 0,0 180,0 z"/>
    </svg>
</div>

JS:

$('.curtain').on('mouseenter', function(){
    $(this).find('path').velocity({ 'd': "m 180,34.57627 -180,0 L 0,0 180,0 z" });
});

JS fiddle 演示:

HERE

Answer 1

对此有两种解决方案。第一个非常简单，但如果用户快速进入和退出 SVG 元素，则会产生不需要的效果。从本质上讲，动画循环的时间太长；但是，如果用户随意将鼠标悬停在该元素上，它就可以正常工作。

Here's a demo with that solution .

另一种解决方案更加强大，可以解决用户异常快速的“悬停切换”问题。如果用户快速将鼠标悬停在元素内和外，此解决方案只会停止并反转动画。这就是我在任何具有速度的悬停状态下使用的方法。

You can view that solution here .

这是使用 JQuery 的 JavaScript 代码

...

var svg = $('.curtain');
var path = svg.find('path'); // define svg path
path.data({animating:false}); // add data for animation queue purposes

path.hover(function() { // mouse enter

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});

} else {  // begin default animation
$(this).velocity({fill: '#ffcc00'},{
  duration:500,
  begin: function(){
    path.data({animating:true});
  },
  complete: function(){
    path.data({animating:false});
  }
});

} // end of conditional statement
}, function() { // mouse exit

/*
if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly
*/

if (path.data('animating') === true){
path.velocity("stop", true).velocity('reverse',{ duration:300});
path.data({animating:false});


} else { // begin default animation

$(this).velocity({fill: '#000'},{
  duration:500,
  begin: function(){
    path.data({animating:true});
  },
  complete: function(){
    path.data({animating:false});
  }
});

} // end of conditional statement
}); // end of hover function

...