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

Question

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

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

我当前的代码和我尝试的速度：

<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.

另一种解决方案更为稳健，并且可以解释来自用户异常快速的 'hover toggling'。如果用户快速将鼠标悬停在元素上和鼠标外，该解决方案将停止并反转动画。这是我在任何具有速度的悬停状态上使用的。

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

...

Answer 2

如果你想为路径尺寸设置动画，我建议使用 Snap.svg。 Here's a simple example using snap.svg to animate the paths.

HTML

<!--add hover state data to div-->  
  <div class="g50" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
    <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
</div>
  
 <!--add hover state data to div-->
<div class="g50" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
    <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
</div>

JS

(function() {
    
    function init() {
        var speed = 250,
            easing = mina.easeinout;

        [].slice.call ( document.querySelectorAll( '.g50' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ),
            path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' )
                };

            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
        console.log(pathConfig.to);
            } );

            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }

    init();

})();

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

SVG animate path attribute "d" on hover with velocity or snap.svg

javascript

svg

velocity.js

HTML

JS