简体   繁体   English

CSS Animation Webkit变换旋转:为什么总是从0开始

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM