[英]CSS Animation webkit transform rotate: why start from 0 all the time
I hope someone can help me with this issue, I create a jsfiddle with my example. 我希望有人可以帮助我解决这个问题,我用示例创建了一个jsfiddle。
Brief: I would like to rotate an "orange dart" in a circle every time the user click on a link. 简介:每当用户单击链接时,我都希望将“橙色飞镖”旋转成一个圆圈。 As you can see it's working well, the only boring issue is that the "orange dart" start his rotation from 0deg instead to start from the last degree.
如您所见,它运作良好,唯一无聊的问题是“橙色飞镖”从0deg开始旋转,而不是从最后一个度数开始。
PS: In Firefox is not giving this trouble. PS:在Firefox中,不会给这个麻烦。 Part of the code:
部分代码:
HTML 的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>
JS JS
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/ http://jsfiddle.net/kibray/z02jtcf0/5/
360deg等于0deg,所以如果您说要从360开始,它将以0开始并且是正确的,最后一个度是359
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.