css - 如何使用 CSS Sprite 制作动画(A 或 B)？

Question

我正在编写一个 phonegap 应用程序(使用 html、css 和 javascript)，尽管我使用的是简单的基本 spritesheet 动画，但我仍然停留在动画部分。

A) 我尝试用 BASIC 方式制作动画，但我遇到了 2 个问题:

1) 如果我没有完整的网格 spritesheet，我可能没有，它也会显示空帧，我不知道如何跳过它们而不需要将整个 spritesheet 转换成一行。 (我听说你可以以某种方式定义每一帧，但我真的找不到如何去做，我到处搜索!)

2) 除了空帧之外，动画在桌面上显示良好，但当我在移动设备上尝试时，它看起来像这样 (http://jsfiddle.net/alecstheone/5pqmsd4a/4/)，好像步数和速度不同步。如果我尝试在我的移动浏览器中运行 jsfiddle，一切都会显示为与在桌面上完全一样。

This是第一个代码:

HTML:

<div id="container">
    <div class="hi"></div>
</div>

CSS:

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1.2s steps(6) infinite, playh 0.2s steps(9) infinite;
}
#container {
}
/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */
 @-webkit-keyframes playv {
    0% {
        background-position-y: 0px;
    }
    100% {
        background-position-y: -1429px;
    }
}
@-webkit-keyframes playh {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: -3500px;
    }
}

B) 我尝试使用 spritespin.js 制作动画。这比之前的代码简单多了。它计算 spritesheet 中的所有帧，因此不会显示空帧，但它也有 2 个问题(在桌面和移动设备上):

1) 动画看起来断断续续。我认为，这只是菜鸟的想法，之所以会发生这种情况，是因为脚本试图计算每个帧的大小并且搞砸了。 (即使我设置了宽度和高度)。可以跳过那部分吗？它发生在所有渲染方法上(背景、图像和 Canvas ，无论是在移动设备上还是在桌面上)

2) 背景大小计算不正确。您可以在动画顶部看到一些需要放在底部的剩余部分。是否可以用几个像素更改背景大小？我在两个版本中使用相同的 spritesheet，所以我不认为这是因为 spritesheet.. 或者？

This是第二个代码:

JS:

.../*! SpriteSpin - v3.1.5
 * Copyright (c) 2014 ; Licensed  */...

$(".hi").spritespin({
    source: "http://i.imgur.com/XOmx2Mm.png", // path to sprite sheet
    width: 390, // width in pixels of the window/frame
    height: 239, // height in pixels of the window/frame
    frames: 51, // total number of frames
    framesX: 9, // number of frames in one row inside the spritesheet
    frameTime: 60,
    renderer: 'image'
});

请帮助我完全解决方法 A 或 B!我现在已经在这个地方呆了 3 天了，我真的受够了!!

Answer 1

好吧，可能最简单的方法(只是有点无聊)是一个一个地指定所有关键帧。如果你有 51 帧，每一帧持续 1.96%。为每一帧指定开始和停止时间以给出步进运动

@-webkit-keyframes playv {
    0%, 1.96% {
        background-position: 0px 0px;
    }
    1.96%, 3.92% {
        background-position: 50px 0px;
    }
    3.92%, 5.88% {
        background-position: 100px 0px;
    }
}