使用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生成的衛星環繞動畫效果