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

Question

我需要在我的网站上有一个太阳图像和月亮图像，它们在一天的大部分时间里都是隐藏的，但是当它们显示的时候，它们将从左边开始做圆周运动，然后向右完成。

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

Answer 1

CSS部分:

1. 将CSS位置设置为绝对位置
2. 根据三 Angular 函数设置 x 和 y 坐标(css 顶部和左侧)

三 Angular 函数:

基本上你想走半个圆，0% 的 pi 度和 100% 的 0 度，所以它就像获取圆坐标(即 x=center+radius*cos(angle))但唯一复杂的部分是您需要反转 Angular :PI*(1-percent)

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