Question

我正在玩box2dweb。下面的代码位于我的步骤方法中，调用大约30 /秒，代码可以工作，但如果有一种方法可以改进呢？

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;

我如何做到这两点（旋转和翻译）？这会提高性能吗？

Answer 1

根据this research，它应该在大多数情况下提高性能。但您需要在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;

在您在问题中发布的代码中，轮换会替换并覆盖翻译。

使用CSS3和Javascript移动和旋转动画

1 个答案: