Two.js实现卫星环绕动画效果
Two.js实现卫星环绕动画效果
呵呵闯 发表于1年前
Two.js实现卫星环绕动画效果
  • 发表于 1年前
  • 阅读 76
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

第一种方法:分组法(推荐)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>video</title>
  <style>
     #playground{
      border:3px solid #aaa;
      width: 1200px;
      height: 600px;
      margin: auto;
     }
     
  </style>
  <script src="two.js"></script>
 </head>
 <body>
    <div id="container"></div>
    <script>
    /*先画出太阳,太阳外的地球体系想要围着太阳转就要建一个地球组,
    然后改变translation,调整小组旋转中心,知道新的原点坐标即旋转中心后
    根据新的原点绘制地球组(地球,月球轨道,月球小组);
    月球小组围绕太阳旋转道理相同,以地球在太阳为原点的体系中调整月球小组的旋转
    中心,即月球小组.translation调整为地球所在体系中的地球坐标(-200,0),
    绘制月球小组,相对于地球而言,月球坐标为(-地球轨道坐标,0);
    巧用translation、坐标体系、相对思想;*/
    var elem = document.getElementById('container');
    var two = new Two({ width: 600, height: 600 }).appendTo(elem);
    //创建太阳
    var sun = two.makeCircle(300,300,100);
    //sun.stroke="translation";
    sun.noStroke();
    sun.fill = '#e80';
    //创建地球轨道
    var earthOrbit = two.makeCircle(300,300,200);
    earthOrbit.noFill();
    //创建地球(根据新的原点绘制)
    var earth = two.makeCircle(-200,0,50);
    earth.stroke = 'transparent';
    earth.fill = '#18a';
    //创建月球轨道
    var moonOrbit = two.makeCircle(-200,0,80);
    moonOrbit.noFill();
    //创建月球
    var moon = two.makeCircle(-80,0,20);
    moon.noStroke();
    moon.fill = '#cdf';
    //创建月球组(月球+兔子+兔子轨道)
    
    var moonGroup = two.makeGroup(moon);
    moonGroup.translation.set(-200,0);
    //创建地球组(地球+月球小组+月球轨道)
    var earthGroup = two.makeGroup(earth,moonOrbit,moonGroup);
    //地球组绕着太阳转 => 地球组(0,0)应该在太阳的中心点
    earthGroup.translation.set(300,300);
    //监听每次触发update
    two.bind('update',function(){
      earthGroup.rotation += 1*Math.PI/180;
      moonGroup.rotation+=3*Math.PI/180;
    });
    two.play();//每秒钟60次update
    </script>
 </body>
</html>

第二种: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>video</title>
  <style>
     #playground{
      border:3px solid #aaa;
      width: 1200px;
      height: 600px;
      margin: auto;
     }
  </style>
  <script src="two.js"></script>
 </head>
 <body>
    <div id="playground"></div>
    <script src="sun-earth-moon.js"></script>
 </body>
</html>
    var elem = document.getElementById('playground');
    var two = new Two({ width: 800, height: 600 }).appendTo(elem);
    /*初始化变量*/
    var padding = 100;
    var earthOrbit_r = 200;
    var earthOrbits = earthOrbit_r + padding;//圆心
    var sun_r = 80; 
    var group = two.makeGroup();
    var earthAngle = 0;
    var earth_r=50;
    var distance=30;
    var moonAngle=0;
    /*获取转动目标的坐标变化量*/
    function getPositons(angle,r){
      return {
        x:r*Math.cos(angle * Math.PI / 180),
        y:r*Math.sin(angle * Math.PI / 180)
      };
    }
    /*初始化太阳*/
    var _sun = two.makeCircle(earthOrbits,earthOrbits,sun_r);
    _sun.fill = "red";
    /*初始化地球轨道*/
    var earthOrbit = two.makeCircle(earthOrbits,earthOrbits,earthOrbit_r);
    earthOrbit.noFill();
    earthOrbit.linewidth = 2;
    earthOrbit.stroke = "#efefef";
    group.add(earthOrbit);
    two.update();
    /*初始化地球*/
    var pos = getPositons(earthAngle,earthOrbit_r);
    var earth = two.makeCircle(earthOrbits + pos.x,earthOrbits + pos.y,earth_r);
    earth.stroke = "#444";
    earth.linewidth = 3;
    earth.fill = "blue";
    /*初始化月球轨道*/
    var moonOrbit = two.makeCircle(earth.translation.x,earth.translation.y,earth_r + distance);
    moonOrbit.noFill();
    moonOrbit.linewidth = 2;
    moonOrbit.stroke = "#ccc";
    group.add(moonOrbit);
    /*初始化月球*/
    var pos =getPositons(moonAngle,earth_r + distance);
    var moon = two.makeCircle(earth.translation.x + pos.x,earth.translation.y + pos.y,earth_r/4);
    moon.fill = "#474747";
     /*绑定事件*/
      two.bind('update',function (frameCount){
        /*地球*/
        var pos = getPositons(earthAngle++,earthOrbit_r);
        earth.translation.x = earthOrbits + pos.x;
        earth.translation.y = earthOrbits + pos.y;
        /*月球*/
        var moonPos = getPositons(moonAngle+=5,earth_r + distance);
        moon.translation.x = earth.translation.x + moonPos.x;
        moon.translation.y = earth.translation.y + moonPos.y;
        /*月球轨道*/
        moonOrbit.translation.x = earth.translation.x;
        moonOrbit.translation.y = earth.translation.y;
      });
      two.play();

 

共有 人打赏支持
粉丝 3
博文 51
码字总数 11620
×
呵呵闯
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: