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

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

2024-08-07 06:54:45   218人阅读

      先看下效果：

     

    
    
  

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

 

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

 

 

 

 

 

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


联系
我们