twoを使用します.jsによって生成された衛星周回アニメーション効果

ソース:GBin1.com

two.jsは、図面とアニメーションの効果を実現するためのクラスライブラリであり、3つのフロントエンド図面の実現をサポートしています.

webgl

svg

dキャンバス

このクラスライブラリを使用すると、この3つの異なる実装を簡単にサポートできます.パラメータを設定するだけです.Two.Types.canvas, Two.Types.svg, or Two.Types.webgl
以下、twoを用いる.jsによって生成されるアニメーション効果:
http://www.gbtags.com/gb/debug/592abb4d-6449-4654-a824-0232c0c3b110.htm
関連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();

サイトアドレス:http://jonobr1.github.io/two.js
via 極客ラベル
ソース:twoを使用します。jsによって生成された衛星周回アニメーション効果