一、大致流程：
1、首先引入two.js <script src="two.js"></script>
2、绘制太阳，地球轨道，地球，地球组合，使其能绕太阳旋转
3、绘制月亮轨道，月亮，月亮组合，使其能绕地球转
4，绘制兔子轨道，兔子，兔子组合，使其能绕月亮转
5、将月亮轨道，月亮组合加入到地球组合中，使其能随着地球绕太阳转
6、将兔子轨道，兔子组合加入到月亮组合中，使其能随着月亮绕地球转
二、注意点：
1、每个组合先实现在自己轨道上旋转。
2、加入上级组合后载返回修改轨道与组合坐标，改为与上级中心一致的xy坐标。
3、把最大的组合earthGroup写在最下面，每个后添加的小轨道组合都插入在前面，不然会出错。
4、每个轨道都设置填充透明色，不然里面的月亮，地球都显示不出来，被挡住了。
三、详细思路：
1、地球绕太阳转：
（1）先绘制sun在画布中心，
var sun=two.makeCircle(300,300,100);
（2）再绘制earchOrbit套在sun外面，
var earthOrbit=two.makeCircle(300,300,200);
earthOrbit.fill="transparent";
（3）再绘制earth在earchOrbit上，
var earth=two.makeCircle(100,300,50);
（4）再创建earthGroup，将earth加入到earchGroup中，并设置偏移earchGroup.translation.set(earchOrbit中心坐标);
var earthGroup=two.makeGroup(earth);
earthGroup.translation.set(300,300);
（5）返回修改earth坐标，因为earthGroup已偏移，故按照实际earth与earthGroup中心的距离来设置x,y坐标，
var earth=two.makeCircle(-200,0,50);1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)
（6）设置旋转函数，加入到two.on('update',function(){ })循环事件中，使地球能绕太阳（沿着earthOrbit）转起来
two.on('update',function(){
earthGroup.rotation+=1*Math.PI/180;
});
two.play();
2、月亮绕地球转
（1）先按照正常坐标，绘制月亮轨道moonOrbit，
var moonOrbit=two.makeCircle(100,300,80);
moonOrbit.fill="transparent";
（2）绘制moon
var moon=two.makeCircle(20,300,20);
（3）创建moonGroup，将moon加入其中，并设置偏移moonGroup.translation.set(moonOrbit中心坐标);
var moonGroup=two.makeGroup(moon);
moonGroup.translation.set(100,300);
（4）返回修改moon坐标，因moonGroup已偏移，故按照实际moon与moonOrbit中心的距离来设置xy坐标，
var moon=two.makeCircle(80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(80,0)
（5）设置旋转函数，使月亮能绕地球（沿着moonOrbit）转起来。
moonGroup.rotation+=3*Math.PI/180;
（6）要想实现月亮随着地球一起绕太阳转，需先把moonOrbit,moonGroup加入到earthGroup中，再修改moonOrbit,moonGroup的坐标，使其与earth中心一致。
var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后，改为(-200,0)
moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后，因画布中心已偏移到(300,300),故改为(-200,0)
3、兔子绕月亮转
（1）先按照正常坐标，绘制兔子轨道rabbitOrbit，
var rabbitOrbit=two.makeCircle(20,300,50);
（2）绘制兔子rabbit
var rabbit=two.makeCircle(20,250,10);
（3）创建rabbitGroup，将rabbit加入其中，并设置偏移rabbitGroup.translation.set(rabbitOrbit中心坐标);
var rabbitGroup=two.makeGroup(rabbit);
rabbitGroup.translation.set(20,300);
（4）返回修改rabbit坐标，因rabbitGroup已偏移，故按照实际rabbit与rabbitOrbit中心的距离来设置xy坐标，
var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)
（5）设置旋转函数，加入到two.on('update',function(){ })循环事件中，使兔子能绕月亮（沿着rabbitOrbit）转起来。
rabbitGroup.rotation+=6*Math.PI/180;
（6）要想实现兔子随着月亮一起绕地球转，需先把rabbitOrbit,rabbitGroup加入到moonGroup中，再修改rabbitOrbit,rabbitGroup的坐标，使其与moon中心一致。
var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为(-80,0,50)
rabbitOrbit.fill="transparent";
rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为(-80,0)
四、完整代码：
1、实现地球绕太阳转，完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
border:1px solid #ddd;
display:inline-block;
}
</style>
<script src="two.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
var params={width:600, height:600, type:Two.Types.svg};
var two= new Two(params).appendTo(d1);
//1. 太阳
var sun=two.makeCircle(300,300,100);
sun.fill="#aaf";
sun.stroke="transparent";
//2.地球轨道
var earthOrbit=two.makeCircle(300,300,200);
earthOrbit.fill="transparent";
earthOrbit.stroke="#aaa";
//3.地球
var earth=two.makeCircle(-200,0,50);
earth.fill="#aff";
earth.stroke="transparent";
//4.地球组
var earthGroup=two.makeGroup(earth);
earthGroup.translation.set(300,300);
two.on('update',function(){
earthGroup.rotation+=1*Math.PI/180;
});
two.play();
</script>
</body>
</html>
2、月亮绕地球转，随着地球绕太阳转，完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
border:1px solid #ddd;
display:inline-block;
}
</style>
<script src="two.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
var params={width:600, height:600, type:Two.Types.svg};
var two= new Two(params).appendTo(d1);
//1. 太阳
var sun=two.makeCircle(300,300,100);
sun.fill="#aaf";
sun.stroke="transparent";
//2.地球轨道
var earthOrbit=two.makeCircle(300,300,200);
earthOrbit.fill="transparent";
earthOrbit.stroke="#aaa";
//3.地球
var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eg,且eG偏移(300,300)后,改为(-200,0)
earth.fill="#aff";
earth.stroke="transparent";
//4.月球轨道
var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后，改为(-200,0)
moonOrbit.fill="transparent";
moonOrbit.stroke="red";
//5.月球
var moon=two.makeCircle(80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(80,0)
moon.fill="green";
moon.stroke="transparent";
//6.月球组
var moonGroup=two.makeGroup(moon);
moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后，因画布中心已偏移到(300,300),故改为(-200,0)
//7.地球组
var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
earthGroup.translation.set(300,300);
two.on('update',function(){
moonGroup.rotation+=3*Math.PI/180;
earthGroup.rotation+=1*Math.PI/180;
});/**/
two.play();
</script>
</body>
</html>
3、兔子绕月亮转，完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
border:1px solid #ddd;
display:inline-block;
}
</style>
<script src="two.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
var params={width:600, height:600, type:Two.Types.svg};
var two= new Two(params).appendTo(d1);
//1. 太阳
var sun=two.makeCircle(300,300,100);
sun.fill="#aaf";
sun.stroke="transparent";
//2.地球轨道
var earthOrbit=two.makeCircle(300,300,200);
earthOrbit.fill="transparent";
earthOrbit.stroke="#aaa";
//3.地球
var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)
earth.fill="#aff";
earth.stroke="transparent";
//8.兔子轨道
var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为(-80,0,50)
rabbitOrbit.fill="transparent";
//9.兔子
var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)
rabbit.fill="red";
//10.兔子组合
var rabbitGroup=two.makeGroup(rabbit);
rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为(-80,0)
//4.月球轨道
var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后，改为(-200,0)
moonOrbit.fill="transparent";
moonOrbit.stroke="red";
//5.月球
var moon=two.makeCircle(-80,0,20);//2.原(20,300),因mG偏移到(100,300),改为(-80,0)
moon.fill="green";
moon.stroke="transparent";
//6.月球组
var moonGroup=two.makeGroup(moon,rabbitGroup,rabbitOrbit);
moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后，因画布中心已偏移到(300,300),故改为(-200,0)
//7.地球组
var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
earthGroup.translation.set(300,300);
two.on('update',function(){
earthGroup.rotation+=1*Math.PI/180;
moonGroup.rotation+=3*Math.PI/180;
rabbitGroup.rotation+=6*Math.PI/180;
});/**/
two.play();
</script>
</body>
</html>
4、掌握规律后，很好写出随着环绕旋转的效果了，只要在前面加3个图形，再修改参数即可。现在加个兔子身上的小球。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
border:1px solid #ddd;
display:inline-block;
}
</style>
<script src="two.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
var params={width:600, height:600, type:Two.Types.svg};
var two= new Two(params).appendTo(d1);
//1. 太阳
var sun=two.makeCircle(300,300,100);
sun.fill="#aaf";
sun.stroke="transparent";
//2.地球轨道
var earthOrbit=two.makeCircle(300,300,200);
earthOrbit.fill="transparent";
earthOrbit.stroke="#aaa";
//3.地球
var earth=two.makeCircle(-200,0,50);//1.原(100,300),加入eG,且eG偏移(300,300)后,改为(-200,0)
earth.fill="#aff";
earth.stroke="transparent";
//11.兔子的小球轨道
var ballOrbit=two.makeCircle(0,-50,30);//9.原(20,250,30),加入rG后,改为rabbit的xy坐标(0,-50,30)
ballOrbit.fill="transparent";
//12.兔子的小球
var ball=two.makeCircle(0,-30,5);//8.原(20,220,5),加入bG后，改为(-30,0,5)
//13.兔子的小球组合
var ballGroup=two.makeGroup(ball);
ballGroup.translation.set(0,-50);//10.原(20,250),加入rG后,改为rabbit的xy坐标(0,-50)
//8.兔子轨道
var rabbitOrbit=two.makeCircle(-80,0,50);//6.原(20,300,50),加入mG后,改为改为moon的xy坐标(-80,0,50)
rabbitOrbit.fill="transparent";
//9.兔子
var rabbit=two.makeCircle(0,-50,10);//5.原(20,250,10),加入rG后,改为(0,-50,10)
rabbit.fill="red";
//10.兔子组合
var rabbitGroup=two.makeGroup(rabbit,ballGroup,ballOrbit);
rabbitGroup.translation.set(-80,0);//7.原(20,300),加入mG后,改为改为moon的xy坐标(-80,0)
//4.月球轨道
var moonOrbit=two.makeCircle(-200,0,80);//4.原(100,300)加入eG后，改为earth的xy坐标(-200,0)
moonOrbit.fill="transparent";
moonOrbit.stroke="red";
//5.月球
var moon=two.makeCircle(-80,0,20);//2.原(20,300),加入mG后,因mG偏移到(100,300),改为(-80,0)
moon.fill="green";
moon.stroke="transparent";
//6.月球组
var moonGroup=two.makeGroup(moon,rabbitGroup,rabbitOrbit);
moonGroup.translation.set(-200,0);//3.原(100,300),加入eG后，因画布中心已偏移到(300,300),改为earth的xy坐标(-200,0)
//7.地球组
var earthGroup=two.makeGroup(earth,moonGroup,moonOrbit);
earthGroup.translation.set(300,300);
two.on('update',function(){
earthGroup.rotation+=1*Math.PI/180;
moonGroup.rotation+=3*Math.PI/180;
rabbitGroup.rotation+=6*Math.PI/180;
ballGroup.rotation+=6*Math.PI/180;
});/**/
two.play();
</script>
</body>
</html>
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
