1

我在 box2dweb 上玩得很开心。以下代码位于我的 step 方法中，该方法以大约 30/sec 的速度调用，该代码有效，但如果有改进的方法，我会感到好奇吗？ 

var img = body.GetUserData();
var pos = body.GetPosition();
var newPos = {x: meterToPixelCenter(pos.x,scale,img.width) , y:meterToPixelCenter(pos.y,scale,img.height)};

img.style.left = newPos.x + 'px';
img.style.top = newPos.y + 'px';

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

我想使用 CSS3 translate 来移动对象：

var stylePos = 'translate(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ')';
img.style.WebkitTransform = stylePos;
img.style.MozTransform = stylePos;
img.style.OTransform = stylePos;
img.style.msTransform = stylePos;
img.style.transform = stylePos;

var style = 'rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = style;
img.style.MozTransform = style;
img.style.OTransform = style;
img.style.msTransform = style;
img.style.transform = style;

我怎么能同时做（旋转和翻译）？这会提高性能吗？

4

1 回答 1

2

根据这项研究，它应该在大多数情况下提高性能。但是您需要同时设置translate一个rotate值transform，如下所示：

var stylePos = 'translate(' + newPos.x + 'px' + ',' + newPos.y + 'px' + ')';
var styleRot = ' rotate(' + (body.GetAngle() * 57.2957795) + 'deg) translateZ(0)';
img.style.WebkitTransform = stylePos + ' ' + styleRot;
img.style.MozTransform = stylePos + ' ' + styleRot;
img.style.OTransform = stylePos + ' ' + styleRot;
img.style.msTransform = stylePos + ' ' + styleRot;
img.style.transform = stylePos + ' ' + styleRot;

在您在问题中发布的代码中，旋转只是替换并覆盖了翻译。

于 2013-09-20T11:45:12.630 回答