javascript – 使用jquery动画SVG的填充？

2019年7月20日 230次阅读

我正在尝试使用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');
  });
});

谢谢你的时间！

最佳答案 一种方法是使用CSS转换(*),但你需要填充：透明而不是fill：none,如下面的(1)：

JS Fiddle 1

$(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'});
  });
  
})
<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>

您还可以使用.animate()功能提供的回调功能

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

其中“完成是动画完成后调用的函数,每个匹配元素调用一次”,我们可以在这里调用另一个使用CSS transition动画元素填充的函数,如下所示：

JS Fiddle 2

$(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'});
  }

})
<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>

或者你也可以用Snap.svg来支持IE9,而IE10及以上版本支持IE转换 – 使用它的animate()(*)函数,但当我试图传递animFill(‘transparent’)或animFill(‘none’)它将颜色默认为黑色而不是透明.因此,我使该函数为填充和填充不透明度(2)设置了动画,因此它可以用于转换颜色或填充不透明度.如下：

JS Fiddle 3

$(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);
}
<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>

————————————————– ——————————

(*)对于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)通过使用填充不透明度,我们只控制填充的不透明度,如果我们使用不透明度,整个元素将作为填充和描边受到影响.并且还有用于控制笔画不透明度的笔画不透明度.

点赞