是否可以使一个物体绕着另一个物体从后向前绕轨道运行?

我已经看到旋转动画可以在整个圆周上完成360度旋转,但是我想知道是否有可能以一定角度旋转。

我找不到任何可以做到这一点的资源,因此我提供了一个我想完成的图像示例。红线是绕蓝色圆圈旋转的物体。

非常感谢-非常感谢您的帮助!

javascript - 如何使物体从后往前运动?-LMLPHP

最佳答案

我以为我会用<canvas>写一个解决方案



var x, y, scale, state,  // Variables we'll use later.
    canvas = document.getElementById("canvas"), // Get the canvas,
    ctx = canvas.getContext("2d"),             // And it's context.
    counter = 0,          // Counter to increment for the sin / cos functions.
    width = 350,          // Canvas width.
    height = 200,         // Canvas height.
    centerX = width / 2,  // X-axis center position.
    centerY = height / 2, // Y-axis center position.
    orbit = {             // Settings for the orbiting planet:
      width: 150,         //   Orbit width,
      height: 50,         //   Orbit height,
      size: 10            //   Orbiting planet's size.
    };

canvas.width = width;   // Set the width and height of the canvas.
canvas.height = height;

function update(){
  state = counter / 75; // Decrease the speed of the planet for a nice smooth animation.
  x = centerX + Math.sin(state) * orbit.width;  // Orbiting planet x position.
  y = centerY + Math.cos(state) * orbit.height; // Orbiting planet y position.
  scale = (Math.cos(state) + 2) * orbit.size;  // Orbiting planet size.

  ctx.clearRect(0, 0, width, height); // Clear the canvas

  // If the orbiting planet is before the center one, draw the center one first.
  (y > centerY) && drawPlanet();
  drawPlanet("#f00", x, y, scale); // Draw the orbiting planet.
  (y <= centerY) && drawPlanet();

  counter++;
}

// Draw a planet. Without parameters, this will draw a black planet at the center.
function drawPlanet(color, x, y, size){
  ctx.fillStyle = color || "#000";
  ctx.beginPath();
  ctx.arc(x || centerX,
          y || centerY,
          size || 50,
          0,
          Math.PI * 2);
  ctx.fill();
}

// Execute `update` every 10 ms.
setInterval(update, 10);

<canvas id="canvas"></canvas>





如果要更改绕行行星的旋转方向,只需更换:

x = centerX + Math.sin(state) * orbit.width;
y = centerY + Math.cos(state) * orbit.height;


带有:

x = centerX + Math.cos(state) * orbit.width;
y = centerY + Math.sin(state) * orbit.height;
//                  ^ Those got switched.


可以通过在以下位置修改75来更改轨道速度:

state = counter / 75;

09-10 10:47
查看更多