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

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

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

使用这个类库，可以方便的支持这三种不同的实现，你只需要设置参数：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生成的卫星环绕动画效果