HTML5/CSS3 - 如何制作“无限”旋转的背景 - 360度全景图

Question

我有一张包含城市全景 360 度视图的 JPG 图像（9000 像素乘以 1000 像素）。我需要创建一个页面，其中包含无限旋转的背景——为用户提供类似于旋转网络摄像头的印象。

第一部分——从图像左侧向右滚动非常简单——只需使用 jQuery.animate(...)。但是如何在图像完成 359 度旋转后无缝返回到图像开始处（用户不会注意到“跳跃”或类似的东西）？

可能有网上的一些例子吗？

我只针对 HTML5/CSS3（webkit）浏览器，并且可以使用最新的 jQuery。

谢谢。

- avs099

---

使用canvas可以吗？这里是一个草稿：http://jsfiddle.net/yQMAG/。 - pimvdb

哇！看起来很有前途。这是为PlayBook平板电脑设计的 - 我希望画布能在那里工作。你能把它变成一个答案吗？ - avs099

Answer 1

旋转背景的主要思路是绘制两张图片：一张位于(x, 0)，另一张位于(x - w, 0)，其中w是图片的宽度。您可以随着时间的推移增加x，并在x === w时重置x = 0。由于第二个图像与第一个图像的位置完全相同，因此您不会在视觉上看到此重置。在重置后，您可以重新开始，使旋转效果看起来无限循环。

（我使用两个图像，假设容器的宽度 <= 图像的宽度。）

您可以使用以下内容：

• Canvas：http://jsfiddle.net/yQMAG/。这种动画在我的机器上有点卡顿。
• CSS3动画：http://jsfiddle.net/k5Bug/。

- pimvdb

Answer 2

您可以通过使用CSS3动画而不是jQuery来完成此操作。我假设城市背景图像已设置为在容器上无缝重复-x。

您设置关键帧以使背景图像动画的宽度与可重复图像相同，并告诉它无限循环且没有延迟。例如，我的漂浮云图像宽度为1456像素并重复x轴。

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

确保你设置 @-webkit-keyframes、@-moz-keyframes、@-o-keyframes 和 -webkit-animation、-moz-animation、-o-animation 相同，以覆盖Firefox、Safari和Chrome的情况。

http://jsfiddle.net/JQjGZ/

- sgoldman

Answer 3

有一种解决方案被称为“图像拼接”，人们已经制作了插件来实现。您可以尝试使用以下插件：http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/，该插件适用于移动设备。另外，您还可以尝试使用http://spritespin.ginie.eu/examples.html插件。

- xivo

Answer 4

如果你只针对 Webkit 浏览器，你可以仅使用 CSS3 来实现这一点。CSS3 内置了动画支持。通过在 iteration-count 属性中指定“infinite”，你的动画将永远持续下去，直到永远...你懂的 ;-)

@-webkit-keyframes rotateEndlessly
{
    from 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

img 
{
    -webkit-animation-name: rotateEndlessly;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

}

当然，还有你HTML中的图像:

<img src="image.jpg" alt="image" />

- J.P.

---

+1；这是有趣的东西。就此而言，这是一个像OP想要的图像旋转的示例：http://jsfiddle.net/k5Bug/。（它比画布方式旋转更平滑。） - pimvdb

但是有一个非常明显的“跳跃”。我能不能让它像@pimvdb的解决方案一样工作？ - avs099

Answer 5

你可以尝试使用背景位置和jQuery动画函数进行操作，可以参考以下示例：

http://jsfiddle.net/DG8PA/3/

使用无限背景并从0动画到背景的宽度，在完成事件中将背景位置设置为0并再次触发动画。

- rfranr

Answer 6

你可以使用CSS动画来实现这样的“环顾四周”效果 - 非常适合视差！

不必添加多个图像并对它们的left等进行动画处理，只需设置一个背景并对其background-position进行动画处理即可：

#bgscroll {  
    background:url(/*some nice seamless texture*/);
    -moz-animation-duration: 13s;  
    -moz-animation-name: bgscroll;
    -moz-animation-iteration-count: infinite;
}  
@-moz-keyframes bgscroll{  
    from {background-position: 0 0;}
    to   {background-position: 100% 0;}  
} 

这将适用于新的Gecko / Chromium浏览器（带有调整的供应商前缀）; fiddled

- Oleg