<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
top: 200px;
left: 200px;
border-radius: 50%;
width: 0;
height: 0;
border-top: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
border-bottom: 30px solid yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="last"></div>
<script>
var divs = document.getElementsByTagName('div');
circleMove({
//*为必须写
'obj':divs[0],//哪个元素*
'yuanxin':[200,200],//圆周运动圆心*
'r':200,//半径*
'looptime':2000,//一圈时间*
'degree':0,//开始角度
'dirction':1//默认为1正方向 -1方向 运动反向
});
circleMove({
//*为必须写
'obj':divs[2],//哪个元素*
'yuanxin':[200,200],//圆周运动圆心*
'r':100,//半径*
'looptime':2000,//一圈时间*
'degree':0,//开始角度
'dirction':1//默认为1正方向 -1方向 运动反向
});
//中间小球自传
var deg =0;
setInterval(function(){
for (var i = 0; i < divs.length; i++) {
divs[i].style.transform='rotate('+ -1*deg +'deg)';
}
deg +=7;
if (deg>=360) {
deg=0;
}
},20)
// 运动函数
function circleMove(argsJSON){
//获取旋转对象
var o =argsJSON.obj;
//圆心
var a =argsJSON.yuanxin[0];
var b =argsJSON.yuanxin[1];
//半径
var r=argsJSON.r;
//运动方向
var dirction =argsJSON.dirction||1;
//信号量,当前的角度,0度就是12点钟方向。瞬时针
var degree =argsJSON.degree||0;
//每帧运动多少时间,毫秒
var interval =20;
//运动一周时间
var looptime =argsJSON.looptime;
//计算一圈的帧数
var loopframes =looptime/interval;
//一圈360度,计算每帧的度数
var degreeDelta = 360/loopframes;
//核心定时器
setInterval(function(){
//每次旋转多少度
degree+=degreeDelta*dirction;
if (degree>=360) {
degree=0;
}
go(degree);
},interval)
//没走一次,都相当于设置盒子的left和top值
function go(degree){
o.style.left = a + r*Math.sin(degreeToRad(degree))+'px';
o.style.top= b - r*Math.cos(degreeToRad(degree))+'px';
}
角度转化为弧度
function degreeToRad(degree){
return degree*Math.PI/180 ;
}
}
</script>
</body>
</html>
css3 3D圆周运动
最新推荐文章于 2024-08-04 18:58:23 发布