使用two.js生成的卫星环绕动画效果

jjfat 8年前

使用two.js生成的卫星环绕动画效果

two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现:

  • webgl
  • svg
  • 2d画布

使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Types.canvas, Two.Types.svg, or Two.Types.webgl

相关JS代码如下:

    var el = document.getElementById("main"),      two = new Two({      width: '800',      height: '600'      });      two.appendTo(el);             var earthAngle = 0,      moonAngle = 0,      distance = 30,      radius = 50,      padding = 100,      orbit = 200,      offset = orbit + padding,      orbits = two.makeGroup();             var earthOrbit = two.makeCircle(offset, offset, orbit);      earthOrbit.noFill();      earthOrbit.linewidth = 2;      earthOrbit.stroke = "#EFEFEF";      orbits.add(earthOrbit);      two.update();             var pos = getPositions(earthAngle++, orbit),      earth = two.makeCircle(pos.x + offset, pos.y + offset, radius);      earth.stroke = "#444";      earth.linewidth = 3;      earth.fill = "#CCCCCC";             var moonOrbit = two.makeCircle(earth.translation.x, earth.translation.y, radius + distance);      moonOrbit.noFill();      moonOrbit.linewidth = 2;      moonOrbit.stroke = "#ccc";      orbits.add(moonOrbit);      var pos = getPositions(moonAngle, radius + distance),      moon = two.makeCircle(earth.translation.x + pos.x, earth.translation.y + pos.y, radius / 4);      moonAngle += 5;      moon.fill = "#474747";                           two.bind("update", function (frameCount) {      var pos = getPositions(earthAngle++, orbit);      earth.translation.x = pos.x + offset;      earth.translation.y = pos.y + offset;             var moonPos = getPositions(moonAngle, radius + distance);      moon.translation.x = earth.translation.x + moonPos.x;      moon.translation.y = earth.translation.y + moonPos.y;      moonAngle += 5;      moonOrbit.translation.x = earth.translation.x;      moonOrbit.translation.y = earth.translation.y;      });             function getPositions(angle, orbit) {      return {      x: Math.cos(angle * Math.PI / 180) * orbit,      y: Math.sin(angle * Math.PI / 180) * orbit      };      }      two.play();

来源:使用two.js生成的卫星环绕动画效果