悬停时捕捉 SVG 重复会减慢重复悬停时的速度答案

【问题标题】：Snap SVG repeat on hover slows on repeated hovers悬停时捕捉 SVG 重复会减慢重复悬停时的速度
【发布时间】：2017-01-25 11:57:03
【问题描述】：

有一个简单的 snap.svg 悬停旋转动画。 Cog 在悬停时旋转并在悬停时停止。

在第一次悬停时工作正常，但在重复悬停时，动画每次都会减慢（减半？）。不知道为什么会这样。

这是我目前拥有的：

<script> 
var cogs = Snap("#cogs");
var cog1 = cogs.select(".cog1");

cogs.hover(function cogs(){
cog1.stop().animate({ 'transform' : 'r-180,110,110' }, 5000, 
function(){ 
  cog1.attr({ transform: 'rotate(0 110 110)'});
})
cogs();
}, function() {
  cog1.stop(); 
});
</script>

https://jsfiddle.net/hpz19wrc/

【问题讨论】：

我想我已经弄清楚为什么动画在重新悬停时变慢了。当动画停止然后重新启动时，在时间（5000）内完成动画所需的旋转较少，因此速度变慢。需要重新考虑动画的工作原理。

标签： javascript animation svg snap.svg

【解决方案1】：

Just 和 TweenMax JS 库用于高级控制、平滑运动和性能！ https://jsfiddle.net/hpz19wrc/2/

// 
var tl = new TimelineMax(),
	cogs = Snap("#cogs"),
	cog1 = cogs.select(".cog1");

// aniamtion
tl.to(".cog1", 5, {
	rotation: 360 , 
	repeat: -1, 
	transformOrigin: 'center',
	ease: Power0.easeNone
});

// control
tl.pause();
cogs.hover(function(){
  tl.resume();
}, function() {
  tl.pause();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="cogs" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 220 220" enable-background="new 0 0 220 220" xml:space="preserve" >
 <g class="cog1">
    <path id="cog1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M179.9475,103.2739L213,81.7477l-7.3875-18.618
	l-37.8643,6.8216c-3.722-5.378-8.088-10.1617-13.0059-14.2094l8.1445-38.559L144.496,9.2431l-21.9643,31.6172
	c-6.2764-1.1463-12.7157-1.4435-19.2115-0.8207L81.8017,7l-18.6173,7.3878l6.8143,37.8514
	c-5.3779,3.7221-10.1612,8.0813-14.216,12.9994L17.218,57.0937L9.2786,75.4851l31.616,21.9579
	c-1.1464,6.2767-1.4647,12.7233-0.8421,19.2194L7,138.1889l7.3874,18.6178l37.8643-6.8216
	c3.722,5.3781,8.0881,10.1617,13.006,14.2093l-8.1446,38.5592l18.3908,7.9396l21.9642-31.6171
	c6.2765,1.1463,12.7301,1.4789,19.2259,0.8561L138.2265,213l18.6245-7.3947l-6.8286-37.8797
	c5.3779-3.7222,10.1543-8.0955,14.209-13.0136l38.5577,8.1379l7.9395-18.3915l-31.6162-21.965
	C180.2588,116.2167,180.5773,109.763,179.9475,103.2739z M110,137.9208c-15.4735,0-28.0173-12.5442-28.0173-28.0183
	S94.5265,81.8842,110,81.8842s28.0173,12.5442,28.0173,28.0183S125.4735,137.9208,110,137.9208z"/>
  </g>
</svg>

【讨论】：