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

-1

我正在使用html5，css3和javascript创建一个网页...在我的网页中，一个视频在页面中央播放，其中5个图像将以圆形方式围绕视频移动，而图像不会旋转...我怎么能做到这一点？如何在不旋转图像的情况下以圆形运动移动图像？

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

基本三角给我们：

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

我是一个初学者...请帮我...日Thnx提前

来源

2013-03-06 Riyaz Sherif

只需计算图像使用基本三角坐标因此，

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每个图像/ 10：

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（或相对）才能使其工作。

来源

2013-03-06 14:04:25 slebetman

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

回答

相关问题