css3加js做一个简单的3D行星运转效果实例代码

2020-05-01 09:56:58易采站长站整理

var n = 0; //定义一个标识,来判断当前是怎么运动的
PathArr.push({
a : $(item).parent().width() / 2,
b : $(item).parent().height() / 2
});

//变化x坐标,然后根据椭圆轨迹,获得y坐标,以达到运动的效果
function getEllopsePath (x, PathObj) {
x = x - PathObj.a;
var m;

n ? (judgeDirec[i] ? m = 1 : m = -1) : (judgeDirec[i] ? m = -1 : m = 1); //判断开根号求得的y值是否为负数,从而确定旋转方向
// if(judgeDirec[i]){
// n ? (m = judgeDirec[i]) : (m = judgeDirec[i]-2);
// }else{
// n ? (m = judgeDirec[i] - 1) : (m = judgeDirec[i] + 1);
// }
return Math.sqrt((1 - x * x / (PathObj.a * PathObj.a)) * PathObj.b * PathObj.b) * m + PathObj.b;
}

function moving () {
var x = parseInt($(item).css('left'), 10);
if(x == 2 * PathArr[i].a){ //到达轨迹的右零界点的时候x减小
n--;
}else if (x == 0) { //到达轨迹的左临界点的时候,x增加
n++;
}
n ? x++ : x--;
$(item).css({
'top' : getEllopsePath(x, PathArr[i]) + 'px',
'left' : x + 'px'
});
}

setInterval(moving, TimeArr[i]);
});
})(['#Saturn', '#earth', '#Venus', '#Neptune', '#Mercury', '#Jupiter', '#satellite', '#moon'], [40, 180, 240, 20, 120, 200, 30, 10]/*option默认为50毫秒*/, [1, 0, 0, 0, 1, 0, 1, 1]/*option 判断运动方向,0为顺时针,1为逆时针,默认为逆时针*/);

这里在实现星球运动的时候,有一些地方处理的不是很好,因为我是按照每隔一定的时间,让星球的left的位置变化,然后根据椭圆的公式,求出top的值。因为椭圆是不均匀的,所以这会使得星球的运动看起来时快时慢,因为他的top值,变化是不均匀的。

然后这里还有个地方需要注意下,就是Math.sqrt()这个方法开出来的值全是正数,而我们要让星球环绕一周,就需要在轨迹的左右两端动态的改变Math.sqrt()这个方法开出来的值的正负数。

下面附上一张效果图

demo下载:demo