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

How to move an image in a circular motion without rotating it?

本文关键字：图像 移动 情况下 旋转      更新时间：2023-09-26

我需要在我的网站上有一个太阳图像和月亮图像，这两个图像在一天的大部分时间里都是隐藏的，但当它们显示的时候，它们将从左到右进行圆周运动。

我有一段代码，上面写着白天或晚上要实现的百分比，我只需要知道如何在不旋转图像的情况下以圆周运动的方式移动图像。

css部分：

  1. 将css位置设置为绝对
  2. 根据三角法设置x和y坐标（css顶部和左侧）

三角测量：

基本上你想绕半个圆，圆周率为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);

好的。

我刚刚为自己计算出了圆周运动，它非常简单。你可以取一个半径、一个角度和一些简单的数学来确定某个物体的位置。所以…

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);
}

你应该得到一个完整的圆圈。只要根据需要重新构建数学，你就可以开始了。

相关文章：