首页 > 代码库 > 利用javascript实现在圆周上匀速划动的动画效果

利用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 = -* Math.sin(a)-15;
                ele.style.left
=x+"px";
                ele.style.top
=y+"px";
            }
        }
   }
</script>
</body>
</html>

 

 

 

 

 

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