为所有主流浏览器创建 css3 无限旋转

Posted

技术标签:

【中文标题】为所有主流浏览器创建 css3 无限旋转【英文标题】:Creating css3 infinite rotation for all major browsers 【发布时间】:2012-05-31 19:34:00 【问题描述】:

我使用 GWT (javascript) 和 CSS3 属性创建了一个无限旋转动画:我创建了一个计时器,它反复将“transform”属性设置为“rotate(currentVal + 360)”(适用于 webkit、opera、firefox、safari)。 问题是这种方法使用大约 10-15% CPU(在 chrome 上)和 20-25% 在 firefox(Intel Core2 Duo 1.8 GHz)上的 CPU,我不明白为什么。 是否有替代解决方案?(对于所有主要浏览器,不仅仅是 chrome 或 safari 让我们说......)还是我可能在这里做错了什么?

【问题讨论】:

看看使用 SVG 的 raphaeljs。这会减少 CPU 消耗... 酷!我为 GWT code.google.com/p/raphaelgwt 找到了这个。你会推荐它吗? :) 取决于你想用它做什么。如果您只想旋转图像,则可能不需要整个 raphaeljs-library。在这种情况下,您应该查看规格:w3.org/TR/SVG11 示例:upload.wikimedia.org/wikipedia/commons/4/4f/… 还有一个 jQuery-Plugin 提供旋转功能:code.google.com/p/jqueryrotate 抱歉,我将褒奖与答案混为一谈……见下文! 【参考方案1】:

目前 CSS3 还没有硬件加速,至少你测试的浏览器没有。 但是除了 CSS3 之外,还有其他几种旋转图像的可能性:

Raphaël-JavaScript Library Paper.js jQueryRotate(一个 jQuery 插件)

这些库与 SVG 一起使用,恕我直言,它的 CPU 消耗较少。 如果您只想旋转图像,则可能不需要整个 raphaeljs-library。在这种情况下,您应该查看规范:w3.org/TR/SVG11

现场示例: http://upload.wikimedia.org/wikipedia/commons/4/4f/Soccer_ball_animated.svg

【讨论】:

我没有使用 SVG 动画,因为 chrome/chromium 存在一个错误,其中某些元素的动画不会被触发(在某些奇怪的情况下 - ***.com/questions/9771335/…)。我相信他们修复了它:code.google.com/p/chromium/issues/detail?id=13585

以上是关于为所有主流浏览器创建 css3 无限旋转的主要内容,如果未能解决你的问题,请参考以下文章

为变换创建一个跨浏览器混合:旋转

使用 IE9 支持的 jQuery 旋转 div

旋转 div 元素

css3中怎么设置边滚动边旋转(我用的猎豹浏览器)

CSS3旋转替代?

CSS3 无限动画循环在谷歌浏览器 31.0.1650.57 中不起作用