您的位置：首页 > Web前端 > JavaScript

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

2014-12-10 18:18 721 查看

先看下效果：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航