Question

更新

现在测试了一些其他解决方案，并创造了一个小提琴。此小提琴中的代码是正确的，但某些浏览器无法显示动画。但是现在每个人都能看到我的表演杀手。 = D我希望这有助于找到更好的解决方案来创建这个动画！

经过几个小时的测试后，我无法提高我在Firefox 25或Internet Explorer 10中的性能。（Chrome目前使用15％的i7-CPU）在我的项目中，我有一个流畅的div-Container，它在当前显示屏上调整大小-解析度。这个div-Container有圆形边框（50％）并显示为圆圈（不完美，但这是另一个错误？！）。在这个div-Container中，我有一个高分辨率图像（2880px * 2880px），它根据div-Container的高度和宽度调整大小。 div-Container旋转无限，周围也有一个发光的脉冲效果。发光的脉冲效果（盒阴影）会改变颜色和宽度，并在流体div-Container周围显示为圆圈。

我尝试使用flash，jquery和GIF-Images重建这些效果。 Flash也存在这种高分辨率的性能问题。 jQuery的FPS很低，看起来不太好看。具有此分辨率的GIF图像会变大。

现在举一个例子：

HTML的标记

<div id="disk">
   <div id="pulse"></div>
</div>

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
 function upd() {
  var h = $("body").height();
  $("#disk").height(h / 1.5);
  $("#disk").width(h / 1.5);
            }
  upd();
  window.onresize = upd;
});//]]>
</script>

CSS-标记

#disk {
  border-radius: 50%;
  background-image: url(hires.png);
  background-size: 100% 100%;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  position: absolute;
  animation: rotate 5s infinite linear;
  transform: translateZ(0);
}
@keyframes rotate {
  0% {   transform: rotateZ(0);}
  100% {  transform: rotateZ(359deg); }
}
#pulse {
  position: absolute;
  border-radius: 50%;
  animation: pulse 60s infinite linear;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  transform: translateZ(0);
}
@keyframes pulse {
  0%  { box-shadow: 0 0 50px rgba(255,255,555,0.9); } 
  5%  { box-shadow: 0 0 200px rgba(255, 0, 0,0.9); }
  10% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  15% { box-shadow: 0 0 200px rgba(255, 255, 127,0.9); }
  20% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  25% { box-shadow: 0 0 200px rgba(255, 255, 0,0.9); }
  30% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  35% { box-shadow: 0 0 200px rgba(103, 255, 190,0.9); }
  40% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  45% { box-shadow: 0 0 200px rgba(0, 255, 0,0.9); }
  50% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  55% { box-shadow: 0 0 200px rgba(0, 0, 255,0.9); }
  60% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  65% { box-shadow: 0 0 200px rgba(75, 0, 130,0.9); }
  70% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  75% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  80% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  85% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  90% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  95% { box-shadow: 0 0 200px rgba(0,0,0,0.9); }
 100% { box-shadow: 0 0 50px rgba(255,255,555,0.9); }
}

我知道盒子阴影动画是性能杀手。但目前我无法为我的项目制定另一个解决方案。流体div-Container的旋转在Chrome中使用了我i7-CPU的5％。（没有脉冲效果）也许我可以删除一些盒子阴影关键帧并最小化这个动画的数量。但是我希望在原始条件下没有性能问题的情况下使用我的效果。

我希望有人可以帮助我。如果需要，我可以为您创建一个示例。谢谢你的关注。

Answer 1

你可能是我遇到的第一个人，可以从中受益，但这让我非常高兴。

纯Javascript比jQuery更快。以下链接使用本机属性.outerHeight/.outerWidth与jQuery .height()/.width()方法进行比较，并显示在首先缓存对象时本机会有多少改进。

JS Perf Benchmark

考虑到您的应用要求的处理量，这可能会显着增加您的FPS。

或者我的计算机太棒了，讨厌jQuery。谁知道。快乐测试：）

Answer 2

非常感谢你Deryck。你激励我去寻找另一个解决方案。很高兴知道我可以帮助你完成这篇文章。

在我的代码中，我不想在这个简单的功能中使用Javascript。没用说W3C用CSS3做错了。现在我只用css“解决”了这个“小问题”。

我搜索了很多webblog，但是找不到一个解决方案来计算没有Javascript / jQuery的div-Container高度引用的宽度。在我阅读了一些带有高度百分比的容器内部图像的解决方案后，我尝试将容器width放大到图像高度。 display: block;是此解决方案的关键。一切顺利，直到我上传disk-wrap。 background-image不符合width的{{1}}。经过一些测试后，我意识到我不能以这种方式将容器水平居中。从现在起，我使用额外的包装器disk-wrap将disk-container垂直和水平居中。

这只适用于你想要一个高度和宽度相同的立方体 - ＆gt;比例为1：1。如果您调整浏览器的大小但是可以使用任何分辨率，则此容器无法调整大小。也许我们可以通过调整大小来实现这一目标。 ;）

以下是例子：

HTML的标记

disk-wrap

CSS-标记

<div id="disk-container">
 <div id="disk-wrap">
  <img id="dummy" src="dummy.png"></img><!-- 1x1 pixel transparent PNG or GIF -->
 </div>
</div>

现在我在Chrome下使用i7有15％的CPU使用率...没有我的脉冲动画！如果我使用div-Containers重建我的High-res-Image，是否有机会降低CPU使用率？我知道该怎么做，但这是一项艰苦的工作，可能需要20个div-Containers来获得类似的图像。

€dit：OH这会降低Firefox下的CPU使用率，但脉冲动画仍然是低fps。 IE 10和往常一样。

无论如何，这不是解决CSS-Animations问题和高CPU使用率的解决方案。

€dit2：我将测试另一个盒子模型，使div-Container垂直和水平居中。来源可以找到here。

€dit3：现在测试了box-sizing-solution，并发现这不能解决问题。

CSS3-动画 - 无限旋转高分辨率图像，箱形阴影脉冲发光

2 个答案:

JS Perf Benchmark