Question

我需要在我的网站上有一个太阳图像和月亮图像，这些图像将在一天中的大部分时间被隐藏，但是当它们是时候展示时，它们将从左边开始以圆周运动进行。向右走。

我的代码说明了实现白天或黑夜的百分比，我只需要知道如何在不旋转图像的情况下以圆周运动移动图像。

Answer 1

css part：

将css位置设为绝对
根据三角法

三角：

基本上你想要半圈，pi度为0％，零度为100％，所以它就像获得圆坐标（即x =中心+半径* cos（角度））但唯一复杂的部分是你需要扭转角度：PI *（1％）

var centerX = document.body.offsetWidth / 2;   // center of screen
var centerY = document.body.offsetHeight / 2;
var radiusX = document.body.offsetWidth / 3;   // radius 1/3 screen
var radiusY = document.body.offsetHeight / 3;
var angle = Math.PI * (1-percent);
var x = centerX + radiusX * Math.cos(angle);
var y = centerY + radiusY * Math.sin(angle);

Answer 2

确定。

我刚为自己想出了圆周运动，这非常简单。您可以采用半径，角度和一些简单的数学运算来确定某些东西的位置。所以......

var body   = document.getElementsByTagName("body")[0],
    radius = 100, // Some radius here
    max    = 50;  // max number of generations we want (half a circle)
for (var i = 1; i <= max * 2; i++) {
    var div                   = document.createElement("div"),
        angle                 = Math.PI * (i / max);
    div.style.backgroundColor = "#000";
    div.style.borderRadius    = div.style.height = div.style.width = "8px";
    div.style.left            = ((Math.sin(angle) * radius) + radius) + "px";
    div.style.position        = "absolute";
    div.style.top             = ((Math.cos(angle) * radius) + radius) + "px";
    body.appendChild(div);
}

你应该得到一个完整的循环。只需根据需要去除并重建数学，你就应该好好去。

如何在不旋转的情况下以圆周运动移动图像？

2 个答案: