Android CSS spritesheet webkit转换和动画问题

我对HTML5和Android相对较新，所以任何建议都很有用。我正在尝试用HTML5写一个简单的游戏，主要针对移动设备。我为图形使用了spritesheet，“3d”webkit翻译转换为强制iOS设备上的硬件加速。目前它运行得非常好，在iOS设备以及Safari，Firefox和Chrome上运行得非常好。我的问题是Android设备上的浏览器（在HTC Desire上使用Android 2.3.3进行测试） - 我期望它的行为与Chrome相似，但显然我错了。看起来，Android支持webkit的东西，但与3D翻译和CSS动画（即使他们不使用3D翻译）有问题。Android CSS spritesheet webkit转换和动画问题

以下是我试图将问题归结为核心。 testimage.png可以是任何内容，但对我来说是一个3×3的网格显示有数字布置是这样的：

012 
345 
678

iOS上，Chrome和Safari的输出示出了对应于0,2和3中的纹理的部件在一条垂直线上，2个动画向上和向右。在Android上，动画“2”（和/或3d转换后的“1”，如果您取消注释代码）会显示整个图像，而不是由_spriteDiv大小定义的子集，而动画正在发生“3”遭受同样的问题。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Android Sprite Test</title> 
     <style> 
     @-webkit-keyframes testAnim { from { -webkit-transform:translate(32px, 96px) } to { -webkit-transform:translate(256px, 0px) } } 
     </style> 
    </head> 
    <body bgcolor = "#606060"> 
     <script src="./scripts/test.js"></script> 
    </body> 
</html>

的JavaScript：

var MakeSprite = function() { 
    var me = {}, 

    _width = 32, 
    _height = 32, 
    _spriteFrame = 1, 

    _spriteDiv = document.createElement('div'), 
    _spriteImg = document.createElement('img'); 

    _spriteDiv.id = 'spriteDiv'; 
    _spriteDiv.style.position = 'absolute'; 
    _spriteDiv.style.overflow = 'hidden'; 
    _spriteDiv.style.width = _width + 'px'; 
    _spriteDiv.style.height = _height + 'px'; 

    _spriteImg.id = 'spriteImg'; 
    _spriteImg.src = './testimage.png'; 
    _spriteImg.width = Math.floor(_width * 3); 
    _spriteImg.height = Math.floor(_height * 3); 
    _spriteImg.style.position = 'absolute'; 

    _spriteDiv.appendChild(_spriteImg); 
    document.body.appendChild(_spriteDiv); 

    me.setFrame = function(n) { 

     _spriteFrame = n; 

     _spriteImg.style.left = (-_width * (_spriteFrame % 3)) + 'px'; 
     _spriteImg.style.top = (-_height * Math.floor(_spriteFrame/3)) + 'px'; 
    }; 

    // Works on iOS, Safari and Chrome - but not Android? 
    me.translate3d = function(x, y) { 
     _spriteDiv.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0px)'; 
    } 

    // Works on Android, but presumably lacks the hardware acceleration of the 3D version 
    me.translate2d = function(x, y) { 
     _spriteDiv.style.webkitTransform = 'translate(' + x + 'px,' + y + 'px)'; 
    } 

    me.testAnim = function() { 
     _spriteDiv.style.webkitAnimation = 'testAnim 5s'; 
    } 

    return me; 
}; 

///////////////////////////////// 

// TEST SPRITES 
// 2D translate works fine, but is suboptimal 
var testSprite = new MakeSprite(); 
testSprite.translate2d(64, 32); 
testSprite.setFrame(0); 

// 3D translate doesn't work (it shows the whole image rather than clipping it), 
// and it also breaks anything that comes after it 
/* 
var testSprite2 = new MakeSprite(); 
testSprite2.translate3d(64, 64); 
testSprite2.setFrame(1); 
*/ 

// CSS Animation breaks the sprite in the same way that 3D translation does 
// (even though the animation works on a 2D translate), and similarly breaks 
// sprites that come after it 
var testSprite3 = new MakeSprite(); 
testSprite3.translate2d(64, 96); 
testSprite3.setFrame(2); 
testSprite3.testAnim(); 

// This will look wrong if any preceding sprites use translate3d or testAnim. 
var testSprite4 = new MakeSprite(); 
testSprite4.translate2d(64, 128); 
testSprite4.setFrame(3);

有谁知道我怎样才能圆了这些问题，所以我可以使用CSS动画（和，理想情况下，硬件加速的WebKit的变换）在当前版本的Android浏览器上？我听说过有关这种事情的支持在未来的Android版本中会出现问题，但说实话，我真的可以处理当前版本的某些功能。

来源

2011-09-28 electrodruid

我正在研究这个，我碰到以下内容：http://caniuse.com/transforms3d。显然，任何版本的< 3都不支持3D转换，这有点令人失望。

来源

2011-10-24 02:03:32

我咬了一颗子弹，并接受了对3D变换缺乏支持。我通过放弃使用精灵表的想法解决了我在这里遇到的问题，并接受Android上的缩放精灵也是不可能的，所以我只是使用2D变换来移动imgs。即使有这些限制，Android动画也完全被破坏。图像在动画结尾处闪烁得像疯狂的东西，当动画结束时，它们有时无法触发回调。看起来，除了最新版本的Android之外，Webkit都是无用的。 – electrodruid

Android CSS spritesheet webkit转换和动画问题

回答

相关问题