如何使用CSS sprite以任何方式(A或B)进行动画制作？

Question

我正在写一个phonegap应用程序(使用html,css和javascript),我被困在动画部分,虽然我使用简单的基本spritesheet动画.

A)我试图为BASIC方式制作动画,但我有两个问题:

1)如果我没有满格spritesheet至极我可能没有,这也显示空框架,我不知道如何跳过他们,而不需要整个spritesheet转换成一排.(我听说你可以用某种方式定义每一帧,但我真的找不到怎么做,我到处搜索!)

2)旁边的空白帧的动画显示在桌面上很好,但是当我尝试在移动它看起来是这样的(http://jsfiddle.net/alecstheone/5pqmsd4a/4/)犹如步骤和速度都没有同步.如果我尝试在我的移动浏览器中运行jsfiddle,一切都会像在桌面上一样显示.

这是第一个代码:

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)动画看起来很不稳定.我认为,这只是一个菜鸟想法,这是因为脚本试图计算每个帧的大小并且糟糕地混乱.(即使我设置了宽度和高度).可以跳过那部分吗？它发生在所有渲染方法(背景,图像和画布,在移动设备和桌面上)

2)不计算背景大小.您可以在动画顶部看到一些残羹剩饭,需要在它的底部.是否可以用几个像素更改背景大小？我在两个版本中使用相同的spritesheets,所以我不认为它是因为spritesheet ..或？

这是第二个代码:

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;
    }
}