Sim*_*ver 12 css jquery animation css3
为什么哦为什么这么慢？我用css3制作了一个等轴网格的立方体,它在鼠标悬停时上下摆动.它在Firefox上工作得很好,网格尺寸小于12,而且在大约18的情况下Chrome工作得很好.我有一个像样的视频卡和CPU,而且让我烦恼的是为什么只有一个立方体的动画制作动画这么慢如果我确保我只将鼠标移到一个立方体上.我的JavaScript需要优化还是仅仅是当前浏览器CSS3和JavaScript引擎的实现？下面的完整测试案例包括可以动态更改网格大小的滑块,既可以自己下载,也可以访问Doug提供的这个jsfiddle版本.
<html>
<head>
<style type="text/css">
body
{
background: black;
}
.cube
{
position: relative;
}
.cube .rightFace, .cube .leftFace
{
height: 25px; width: 10px; padding: 5px;
}
.leftFace
{
position: absolute;
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
-moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
-o-box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 10px;
border: 1px solid black;
}
.rightFace
{
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
position: absolute;
left: 19.5px;
border: 1px solid black;
}
.topFace div
{
width: 19px;
height: 19px;
border: 1px solid black;
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
-o-transform: skew(0deg, -30deg) scale(1, 1.16);
}
.topFace
{
position: absolute;
left: 10.25px;
top: -16.5px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#slider
{
width: 200px;
margin: 0 auto;
}
</style>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
function refreshCubes()
{
$('.box').empty();
var x = $("#slider").slider("value");
var initialTop = 50;
var initialLeft = 450;
for(var i = 1; i < x; i++)
{
for(var j = 1; j < x; j++)
{
var cube = $('<div class="cube"><div class="topFace"><div></div></div><div class="leftFace"></div><div class="rightFace"></div></div>');
cube.css(
{
left : initialLeft + (20 * i) + (-19 * j) + 'px',
top : initialTop + (11 * i) + (11 * j) + 'px'
});
cube.find('.topFace div').css('background', 'rgb(100,' + Math.ceil(255 - 16 * i) + ',' + Math.ceil(255 - 16 * j) + ')');
cube.find('.rightFace').css('background', 'rgb(35,' + Math.ceil(190 - 16 * i) + ',' + Math.ceil(190 - 16 * j) + ')');
cube.find('.leftFace').css('background', 'rgb(35,' + Math.ceil(190 - 16 * i) + ',' + Math.ceil(190 - 16 * j) + ')');
cube.children('div').css('opacity', '.9');
cube.hover(function()
{
$(this).animate({top: '-=25px'}, 400, 'easeInCubic');
}, function()
{
$(this).animate({top: '+=25px'}, 400, 'easeOutBounce');
});
$('.box').append(cube);
}
}
}
$(document).ready(function()
{
$('#slider').slider(
{
value: 9,
max: 30,
min: 2,
slide: refreshCubes,
change: refreshCubes
});
refreshCubes();
});
</script>
</head>
<body>
<div id="slider"></div>
<div class="box"></div>
</body>
</html>
这个更快:http://jsfiddle.net/JycdN/1/
我优化了jQuery代码本身.此外,设置动画"+ = 25px"样式CSS值是一个坏主意,因为每次执行此操作时,您都会强制浏览器在动画计算之外进行额外的CSS计算.您也可以使用纯CSS3动画,而不是这样做.看看这个:http://matthewlein.com/ceser/
其动画更好的()有一个静态值(在这种情况下,我已经存储每个立方体在原来养的位置data-属性),所以正在做的唯一的计算是那些由JavaScript解释器本身.
live()无论何时重新创建事件,该方法都会自动将事件添加到多维数据集中,因此无需在refreshcubes函数内设置事件.此外,James Montagne指出,使用这种live()方法可以使整个事情像Daniel在他的回答中描述的那样(更快).
编辑:我通过使用该on()方法而不是更快地使它更快live().悬停的事件上下文现在位于每个多维数据集上,而不是整个文档上.有关详细信息,请参阅此问题:jQuery的新on()方法与性能中的live()方法相比如何？.
在可能的情况下,创建一个单独的jquery对象并使用变量引用它,这样您就不会每次都重新创建一个新对象.
总的来说,我注意到性能有了相当大的提升,但它仍然比我想象的要慢.也许每次移动立方体时(甚至通过像素)都会重新计算CSS变换.
编辑:正如所添加的那样,修改jQuery.fx.interval有助于提高它的速度.
我想你会有更多的运气在2D画布或3D webGL画布上绘制立方体.
尝试使用three.js或processing.js绘制多维数据集并为其设置动画.
编辑:我已经使用谷歌Chrome中的硬件加速CSS3动画更快(其他浏览器仍然在开发这些CSS3功能,所以它现在仅适用于CHrome):http://jsfiddle.net/trusktr/JycdN/35 /
| 归档时间： |
|
| 查看次数： |
9041 次 |
| 最近记录： |