Question

我正在尝试使用jQuery来动画我的SVG的路径，然后在第一个动画完成后，使用持续时间和缓动函数为SVG的填充设置动画。

这可能吗？

$(function() {
  $('svg').hover(function() {
    $(this).find('.social-circle').stop()
      .animate({'stroke-dashoffset': 0}, 1000, 'easeOutBounce')
      .css('fill', '#f4321e');
      console.log('on');
  }, function() {
    $(this).find('.social-circle').stop()
      .animate({'stroke-dashoffset': 900}, 1000, 'easeOutBounce')
      .css('fill', 'none');
  });
});

谢谢你的时间！

Answer 1

一种方法是使用CSS转换^（*），但，您需要使用fill:transparent代替fill:none，如下^（1）：

JS Fiddle 1

＆＃13;

$(function() {
  
  $('svg').hover(function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 0}, 1000)
      .css({'fill': 'red', 'transition': 'fill 1s'});
    console.log('on');
  }, function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 900}, 1000)
      .css({'fill': 'transparent', 'transition': 'fill 1s'});
  });
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="orange" class="social-circle" />
</svg>

＆＃13;

此外，您还可以使用.animate()函数提供的回调函数

.animate( properties [, duration ] [, easing ] [, complete ] )

其中＆＃34; complete是动画完成后调用的函数，每个匹配元素调用一次＆＃34;，我们可以调用另一个动画填充的函数像这样使用CSS transition 的元素：

JS Fiddle 2

＆＃13;

$(function() {

  $('svg').hover(function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 0}, 1000, animateFill('red'))
    console.log('on');
  }, function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 900}, 1000, animateFill('transparent'))
  });


  function animateFill(theColor) {
    $('svg').find('.social-circle').css({'fill': theColor, 'transition': 'fill 1s'});
  }

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="orange" class="social-circle" />
</svg>

＆＃13;

另外，您可以使用Snap.svg - 支持 IE9 + ，同时 IE10 及支持CSS转换，效果相同 - 使用 animate() ^（*）函数，但当我尝试传递animFill('transparent')或animFill('none')时，默认颜色为黑色而不是透明的。因此，我使该函数为fill和fill-opacity ^（2）设置了动画，因此它可以用于转换颜色或填充不透明度。如下：

JS Fiddle 3

＆＃13;

$(function() {
  $('svg').hover(function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 0}, 1000, animFill('red', 1));
    console.log('on');
  }, function() {
    $('svg').find('.social-circle').stop()
      .animate({'stroke-dashoffset': 900}, 1000, animFill('red', 0))
  });
});

function animFill(theColor, theOpacity) {
  Snap('svg').select('.social-circle')
    .animate({'fill': theColor,'fill-opacity': theOpacity}, 1000);
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="orange" class="social-circle" id="social" />
</svg>

＆＃13;

----------------------------------------------- ---------------------------------

^（*） 对于CSS转换和Snap.svg动画，您可以像jQuery一样使用缓动。对于CSS，它可以像这样：

完成

transition: fill 1s ease-out

对于Snap.svg，可以通过mina()方法设置缓动，与上面相同：

element.animate({'fill':theColor, 'fill-opacity':theOpacity}, 1000, mina.easeout);

^（1） 为简单起见，我删除了缓动。

^（2） 使用fill-opacity我们只控制fill的不透明度，如果我们使用opacity，整个元素将是受影响为fill和stroke。还有stroke-opacity来控制中风的不透明度。

使用jquery为SVG的填充设置动画？

1 个答案:

----------------------------------------------- ---------------------------------