第一种方法：分组法（推荐） <!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>video</title> <style>
第一种方法：分组法（推荐）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>video</title> <style> #playground{ border:3px solid #aaa; width: 1200px; height: 600px; margin: auto; } </style> <script src="two.js"></script> </head> <body> <div id="container"></div> <script> /*先画出太阳，太阳外的地球体系想要围着太阳转就要建一个地球组， 然后改变translation，调整小组旋转中心，知道新的原点坐标即旋转中心后 根据新的原点绘制地球组（地球，月球轨道，月球小组）； 月球小组围绕太阳旋转道理相同，以地球在太阳为原点的体系中调整月球小组的旋转 中心，即月球小组.translation调整为地球所在体系中的地球坐标(-200,0), 绘制月球小组，相对于地球而言，月球坐标为(-地球轨道坐标,0)； 巧用translation、坐标体系、相对思想；*/ var elem = document.getElementById('container'); var two = new Two({ width: 600, height: 600 }).appendTo(elem); //创建太阳 var sun = two.makeCircle(300,300,100); //sun.stroke="translation"; sun.noStroke(); sun.fill = '#e80'; //创建地球轨道 var earthOrbit = two.makeCircle(300,300,200); earthOrbit.noFill(); //创建地球(根据新的原点绘制) var earth = two.makeCircle(-200,0,50); earth.stroke = 'transparent'; earth.fill = '#18a'; //创建月球轨道 var moonOrbit = two.makeCircle(-200,0,80); moonOrbit.noFill(); //创建月球 var moon = two.makeCircle(-80,0,20); moon.noStroke(); moon.fill = '#cdf'; //创建月球组(月球+兔子+兔子轨道) var moonGroup = two.makeGroup(moon); moonGroup.translation.set(-200,0); //创建地球组（地球+月球小组+月球轨道） var earthGroup = two.makeGroup(earth,moonOrbit,moonGroup); //地球组绕着太阳转 => 地球组(0,0)应该在太阳的中心点 earthGroup.translation.set(300,300); //监听每次触发update two.bind('update',function(){ earthGroup.rotation += 1*Math.PI/180; moonGroup.rotation+=3*Math.PI/180; }); two.play();//每秒钟60次update </script> </body></html>第二种：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>video</title> <style> #playground{ border:3px solid #aaa; width: 1200px; height: 600px; margin: auto; } </style> <script src="two.js"></script> </head> <body> <div id="playground"></div> <script src="sun-earth-moon.js"></script> </body></html> var elem = document.getElementById('playground'); var two = new Two({ width: 800, height: 600 }).appendTo(elem); /*初始化变量*/ var padding = 100; var earthOrbit_r = 200; var earthOrbits = earthOrbit_r + padding;//圆心 var sun_r = 80; var group = two.makeGroup(); var earthAngle = 0; var earth_r=50; var distance=30; var moonAngle=0; /*获取转动目标的坐标变化量*/ function getPositons(angle,r){ return { x:r*Math.cos(angle * Math.PI / 180), y:r*Math.sin(angle * Math.PI / 180) }; } /*初始化太阳*/ var _sun = two.makeCircle(earthOrbits,earthOrbits,sun_r); _sun.fill = "red"; /*初始化地球轨道*/ var earthOrbit = two.makeCircle(earthOrbits,earthOrbits,earthOrbit_r); earthOrbit.noFill(); earthOrbit.linewidth = 2; earthOrbit.stroke = "#efefef"; group.add(earthOrbit); two.update(); /*初始化地球*/ var pos = getPositons(earthAngle,earthOrbit_r); var earth = two.makeCircle(earthOrbits + pos.x,earthOrbits + pos.y,earth_r); earth.stroke = "#444"; earth.linewidth = 3; earth.fill = "blue"; /*初始化月球轨道*/ var moonOrbit = two.makeCircle(earth.translation.x,earth.translation.y,earth_r + distance); moonOrbit.noFill(); moonOrbit.linewidth = 2; moonOrbit.stroke = "#ccc"; group.add(moonOrbit); /*初始化月球*/ var pos =getPositons(moonAngle,earth_r + distance); var moon = two.makeCircle(earth.translation.x + pos.x,earth.translation.y + pos.y,earth_r/4); moon.fill = "#474747"; /*绑定事件*/ two.bind('update',function (frameCount){ /*地球*/ var pos = getPositons(earthAngle++,earthOrbit_r); earth.translation.x = earthOrbits + pos.x; earth.translation.y = earthOrbits + pos.y; /*月球*/ var moonPos = getPositons(moonAngle+=5,earth_r + distance); moon.translation.x = earth.translation.x + moonPos.x; moon.translation.y = earth.translation.y + moonPos.y; /*月球轨道*/ moonOrbit.translation.x = earth.translation.x; moonOrbit.translation.y = earth.translation.y; }); two.play();
