HTML5/CSS3 - 如何制作“无尽”旋转背景 - 360 度全景答案

【问题标题】：HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panoramaHTML5/CSS3 - 如何制作“无尽”旋转背景 - 360 度全景
【发布时间】：2012-06-25 13:51:30
【问题描述】：

我有一张 JPG 图像，其中包含 360 度城市景观（9000 像素 x 1000 像素）。我需要创建一个具有无限旋转背景的页面 - 例如，给用户一个旋转网络摄像头的印象。

第一部分 - 从左到右滚动图像非常简单 - 只需使用 jQuery.animate(...)。但是我怎样才能无缝返回到图像的开头（在完成 359 度转弯之后），这样用户就不会注意到“跳跃”或类似的东西？

网上大概有例子吗？

我只针对 HTML5/CSS3 (webkit) 浏览器，我可以使用最新的 jQuery。

谢谢。

【问题讨论】：

用画布好吗？这是草稿：jsfiddle.net/yQMAG.
哇！看起来很有希望。这是用于 PlayBook 平板电脑的 - 我希望画布在那里工作。你能回答一下吗？

标签： jquery css html jquery-animate

【解决方案1】：

旋转背景背后的主要思想是绘制两张图像：一张在(x, 0)，另一张在(x - w, 0)，w 是图像的宽度。随着时间的推移，您可以增加x，一旦x === w 重置x = 0。您不会在视觉上看到此重置，因为第二张图像与第一张图像位于完全相同的位置。重置后，你可以重新开始，让旋转看起来无穷无尽。

（假设width of container <= width of image，我使用两张图片。）

你可以使用例如：

画布：http://jsfiddle.net/yQMAG/。这个动画在我的机器上有点生涩。
CSS3 动画：http://jsfiddle.net/k5Bug/.

【讨论】：

【解决方案2】：

您可以使用 CSS3 动画在不使用 jquery 的情况下做到这一点。我假设城市背景图像设置为在容器上无缝地重复-x。

您将关键帧设置为以可重复图像的宽度为背景图像设置动画，并告诉它无限循环而没有延迟。例如，我的飘云图像是 1456 px 宽并且重复 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 设置为相同，以涵盖 FF、Safari 和 Chrome。

http://jsfiddle.net/JQjGZ/

【讨论】：

【解决方案3】：

有一些他们称之为“图像拼接”的解决方案，人们为此制作了插件。

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

这个也适用于移动设备。 http://spritespin.ginie.eu/examples.html

【讨论】：

【解决方案4】：

你可以玩背景位置和jquery动画功能，看例子：

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

在完成事件中获取一个无限的背景并从 0 到背景宽度设置背景位置为 0 并再次触发动画。

【讨论】：

【解决方案5】：

如果您只针对 webkit-browsers，您可以单独使用 CSS3 完成此操作。 CSS3 内置了对动画的支持。通过使用迭代计数属性指定“无限”，您的动画将永远持续下去，并且......您明白了;-)

@-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" />

【讨论】：

+1;那是有趣的东西。值得一提的是，这是 OP 想要的图像旋转示例：jsfiddle.net/k5Bug。（它比画布方式旋转更平滑。）
但有一个非常明显的“跳跃”。我可以让它类似于@pimvdb 的解决方案吗？

【解决方案6】：

您可以使用CSS animations 来实现这种“环视”效果——非常适合视差！

您可以设置一个背景并为其background-position 设置动画，而不是添加多个图像并为其left 等设置动画：

#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

【讨论】：