利用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 >