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

Question

我正在使用 html5、css3 和 javascript 创建一个网页......在我的网页中，一个视频在页面中心播放，5 个图像将围绕视频以圆形方式移动，而没有旋转图像......怎么能我做到了？？我是初学者...请帮助我...提前谢谢

Answer 1

只需使用基本三角函数计算图像坐标：

              y
              |
              |     [image]
              |    /
              |   /
              |  / radius
              | /
    __________|/_)_image_angle___________ x
              |
              |
              |

基本三角学给我们：

cos(image_angle) = x/radius
sin(image_angle) = y/radius

所以

x = cos(image_angle) / radius
y = sin(image_angle) / radius

所以只需通过更改它们的 CSS 坐标来为图像设置动画。所以对于一张图片，它应该是这样的：

var img = document.getElementById('image1');
var radius = 200; // in pixels
var imgAngle = 0;

function animateImg () {
    img.style.left = cos(imgAngle)/radius;
    img.style.top = sin(imgAngle)/radius;

    imgAngle = imgAngle + 0.1;

    setTimeout(animateImg,50);
}

animateImg();

对于五个图像，只需将每个图像偏移 2*PI/5：

function animageImages () {
    // Assuming image elements are stored in an array, I'm
    // using the array length to infer the number of images:

    var offsetAngle = 2 * Math.PI / images.length;

    for (var i=0; i<images.length; i++) {
        var img = images[i];
        img.style.left = cos(imgAngle+offsetAngle*i)/radius;
        img.style.top = sin(imgAngle+offsetAngle*i)/radius;
    }

    imgAngle = imgAngle + 0.1;

    setTimeout(animateImages,50);
}

当然，上面的示例都围绕页面的左上角（坐标 0,0）进行动画处理。您需要围绕视频坐标重新计算计算。此外，如果您不熟悉 CSS，则需要将图像的样式设置为display:block和position:absolute（或相对）以使其正常工作。