CSS动画webkit转换旋转：为什么从0开始始终

我希望有人能帮助我解决这个问题，我用我的例子创建了一个jsfiddle。CSS动画webkit转换旋转：为什么从0开始始终

简要说明：每次用户点击一个链接时，我想旋转一个“橙色飞镖”。正如你可以看到它运作良好，唯一无聊的问题是“橙色飞镖”从0deg开始他的旋转，而不是从最后一个学位开始。

PS：在Firefox中不会给这个麻烦。代码部分：

HTML

<div id="dart"></div> 

<span class="btn js_update1">1</span> 
<span class="btn js_update2">2</span> 
<span class="btn js_update3">3</span> 
<span class="btn js_update4">4</span> 
<span class="btn js_update5">5</span> 
<span class="btn js_update6">6</span>

to_degree = 0; 
var arc_params = { 
center: [218,218], 
radius: 177,  
start: 360, 
end: 0, 
dir: -1 
} 

$('.js_update1').on('click', function() { 

from_degree = to_degree; 
to_degree = 0; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 360; 
    if (arc_params.start > 360 ) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 360; 

}); 
$('.js_update2').on('click', function() { 
from_degree = to_degree; 
to_degree = 60; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 300; 
    if (arc_params.start > 300 ) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 300; 
}); 
$('.js_update3').on('click', function() { 
from_degree = to_degree; 
to_degree = 120; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 240; 
    if (arc_params.start > 240 ) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 240; 

}); 
$('.js_update4').on('click', function() { 
from_degree = to_degree; 
to_degree = 180; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 180; 
    if (arc_params.start > 180 ) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 180; 

}); 
$('.js_update5').on('click', function() { 
from_degree = to_degree; 
to_degree = 240; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 120; 
    if (arc_params.start > 120 ) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 120; 

}); 
$('.js_update6').on('click', function() { 
from_degree = to_degree; 
to_degree = 300; 
startChange('freccia_orange',from_degree,to_degree); 
arc_params.end = 60; 
    if (arc_params.start > 60) 
    { 
     arc_params.dir = -1; 
    } 
    else { 
     arc_params.dir = 1; 
    } 
$("#dart").animate({path : new $.path.arc(arc_params)},980);//end: 0 

arc_params.start = 60; 

});

http://jsfiddle.net/kibray/z02jtcf0/5/

来源

2014-08-28 Marco G.

你应该养成这样的习惯正确地声明所有变量。使用“strict”模式会有所帮助，因为解析器会抱怨缺少'var'声明。 – Pointy 2014-08-28 15:29:30

另外，你的jsfiddle不起作用。它需要jQuery（易于修复）以及用于获取'$ .path'的任何库。 – Pointy 2014-08-28 15:31:30

@Pointy，谢谢你的提示，无论如何脚本正在这[link]（http://jsfiddle.net/kibray/z02jtcf0/4/） – 2014-08-30 13:46:49

360deg等于0deg所以如果你说在360开始，将在0开始，并将于正确，最后的学位是359

来源

2014-08-28 15:37:34

我知道你的意思，但即使改变这个价值，我仍然在Chrome中具有相同的行为。 – 2014-08-30 13:47:49

CSS动画webkit转换旋转：为什么从0开始始终

回答

相关问题