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開始始終

回答

相關問題