Question

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

以下是我尝试将问题归结为核心问题。 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);

有谁知道我如何解决这些问题，所以我可以在当前版本的Android浏览器上使用CSS动画（理想情况下，硬件加速webkit转换）？我听说过在未来的Android版本中支持这类东西的声音较少，但是说实话，我真的可以使用适用于当前版本的东西。

Answer 1

我正在研究这个，我发现了以下内容：http://caniuse.com/transforms3d。显然，任何版本都是＆lt; 3不支持3D变换，这有点令人失望。

Android CSS spritesheet webkit转换和动画的问题

1 个答案: