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

Question

<分区>

Answer 1

只需使用基本三 Angular 函数计算图像坐标:

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

基本三 Angular 学给我们:

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(或 relative)才能正常工作.