【小demo】利用two.js绘制月亮围绕地球转，地球绕着太阳转

一原理
在Two.js中和Canvas、SVG都不同的有这么几个地方：
Two.js中所有的旋转都是以自己为中心
Two.js中的旋转不会累加
Two.js中不使用定时器，使用Two.play()方法，类似于Flash动画（但它的底层是有定时器的，该方法每秒钟调用60次two.update()方法）
二：注意点
1: two.js 中, 图像默认的旋转中心是该图形的定位点( 图形的中心点 )
2. 如果需要旋转多个图形 , 则需要将这些图形归为一组( var group = two.makeGroup(o1, o2, …, on) );
3. 分组之后 , 该组的旋转中心默认为画布左上角 , 即(0, 0)点;
4. 需要使用 group.translation.set(x, y); 平移旋转中心
5. 平移之后该组合中所有的图形的定位点都变为 (x, y) 需要重新进行定位
6. 如果一个组合里面还有一个需要旋转的图形(该例子中为地球组合中的月球) , 则先将月球单独归为一组, 使其绕地球旋转, 然后将地球,轨道,月球组 (注意: 这里是月球组 , 而不是单个月球) 归为一组 . 绕太阳旋转;
月球的最终定位由地球组决定.
三:先绘制一个简单的模型来说明动画原理

简单模型

使用Two.js创建圆形和矩形说明动画原理

 //创建一个2D绘图对象var two = new Two({width:800,height:400,type:Two.Types.svg}).appendTo(box);//画一个圆形和矩形——矩形定位点在矩形中心var c = two.makeCircle(-200,0,100);var r = two.makeRectangle(200,0,200,200);//创建小组，平移小组的原点var g = two.makeGroup(r,c);g.translation.set(400,200);g.rotation = 30*Math.PI/180;//动画原理：调用two.play()方法var deg = 0;two.on('update',function(){deg += 3;g.rotation = deg*Math.PI/180;});two.play();

效果：

旋转中：

月亮围绕地球转，地球绕着太阳转

js部分

 var two =new Two({width:600, height: 600}).appendTo(container);var sun = two.makeCircle(0,0,100);//太阳//makeCircle(a,b,c)a,b圆心坐标   c圆的半径rsun.fill = 'red';sun.stroke = 'transparent';//太阳轨道(地球)var sunOrbit = two.makeCircle(0,0,200);sunOrbit.fill = 'transparent';sunOrbit.stroke = '#ccc';//地球var earth = two.makeCircle(200, 0, 30);earth.fill = 'blue';earth.stroke = 'transparent';// 地球轨道(月亮)var earthOrbit = two.makeCircle(200, 0, 50);earthOrbit.fill = 'transparent';earthOrbit.stroke = '#ccc';//月亮var moon = two.makeCircle(50,0, 5);moon.fill = 'gold';moon.stroke = 'transparent';moon.rotation = 0;//月亮组：月球var moonGroup = two.makeGroup(moon);moonGroup.translation.set(200,0);//地球组var earthGroup = two.makeGroup(earth,earthOrbit,moonGroup);//太阳组var sunGroup = two.makeGroup(sun,sunOrbit,earthGroup);sunGroup.translation.set(two.width/2, two.height/2);//two.update();two.bind('update', function(){moonGroup.rotation += 1*Math.PI/180;//earthGroup.rotation += 1*Math.PI/180;// 每次旋转1° })two.play();//play()方法开启自动动画播放

效果：