利用javascript实如今圆周上匀速划动的动画效果

      先看下效果：

     

    

    

  

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

 

在支持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 >