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

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 transition ^(*)，但是您需要制作 fill:transparent 而不是 fill:none，如下面的⁽¹⁾:

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

其中“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 及更高版本支持CSS转换-使用其 animate() ^(*) 函数，但是当我尝试传递 animFill('transparent') 或 animFill('none') 时默认颜色为黑色而不是透明。所以我让函数为 fill 和 fill-opacity ⁽²⁾ 设置动画，这样它就可以用于过渡颜色或填充不透明度.如下:

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

⁽¹⁾ 为了简单起见，我删除了缓动。

⁽²⁾ 通过使用 fill-opacity 我们可以控制 fill 的不透明度，如果我们使用 opacity，整个元素将被影响为 fill 和 stroke。还有 stroke-opacity 也用于控制笔画的不透明度。