javascript - 画像を回転させずに円を描くように画像を移動するには?

Question

私はhtml5、css3、およびjavascriptを使用してWebページを作成しています...私のWebページでは、ページの中央でビデオが再生され、その周りで5つの画像がビデオの周りを円形に移動しますが、画像は回転しません...どうすればよいですか私はこれを達成しますか?? 私は初心者です... plsは私を助けてくれます...thnx事前に

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 座標を変更して画像をアニメーション化するだけです。したがって、1 つの画像の場合、次のようになります。

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

5 つの画像の場合、各画像を 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:blockand position:absolute(または relative) に設定する必要があります。