利用javascript实现在圆周上匀速划动的动画效果

先看下效果：

    

     aaarticlea/png;base64,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" alt="" />

圆心下的那个那个白圈的位置是光圈的起始位置，光圈所在的位置为终点位置。光圈从起始位置开始，沿着圆的轮廓匀速到终点位置。

在支持css3的情况下，可以利用css3做旋转效果来达到这种效果。具体思路为：

1）将光圈相对于圆进行绝对定位，设置光圈的绝对位置为上面所说的终点位置；

2）对圆设置一个旋转角度，如：transform: rotate(130deg)，此时，光圈也会改变位置，光圈旋转后的位置为上面所说的起点位置。

3）然后对圆设置transition，如：transition: transform .6s ease-out;这样会在0.6s内将光圈从起点位置旋转到终点位置。

在不支持css3的情况下，如IE9及IE9以下的浏览器，我使用的是javascript实现。具体思路为：

1）对圆心进行相对定位，对光圈进行绝对定位，设置圆的起始位置（在圆心的正下方）

2）以圆心为中心点，光圈的起始位置可以看做是-90读的地方，现在要将光圈从-90度到45度。做法就是通过不断的改变角度，从-90到45（这里需要使用定时器），根据每次的角度和圆的半径，首先获取弧度，再根据js中的Math对象的sin()和cos()获取光圈的x,y坐标（相对与圆心）。

3）根据每次得到的x,y坐标计算光圈的left,top值。由于角度是慢慢改变的，因此呈现的效果就是光圈从-90度到45度匀速划动。

实现的代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
    #box{
        width: 80px;
        height: 80px;
        background-color: limegreen;
        border-radius: 50%;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        padding-top: 1px;
    }

    #box .circle-dot{
        position: relative;
        margin-top: 39px;
        margin-left: 40px;
        width: 1px;
        height: 1px;
    }

    #box .circle-dot #light{
        position: absolute;
        width: 30px;
        height: 30px;
        background:url(images/light.png) no-repeat;
        left: -15px;
        top: 25px;
    }
    </style>
</head>
<body>
    <div id="box">
        <div class="circle-dot">
            <dev id="light"></dev>
        </div>
    </div>
<script>
   window.onload=function(){
        var light = document.getElementById("light");
        var circle = document.getElementById("box");
        rotate(light,circle);
        //js控制光圈划动
        function rotate(ele,circle){
            var r = circle.clientWidth/2;
            var rotate = -91;
            var timer = setInterval(step,10);
            function step(){
                rotate += 3;
                var a = 2*Math.PI/360*rotate;
                if(rotate == 44){
                    clearInterval(timer);
                }
                var x = r * Math.cos(a)-15; //光圈宽高为30，减去15是让光圈的中心在圆周上
                var y = -r * Math.sin(a)-15;
                ele.style.left=x+"px";
                ele.style.top=y+"px";
            }
        }
   }
</script>
</body>
</html>