Как анимировать с CSS спрайты в любом случае (A или B)?

Question

Я пишу приложение phonegap (используя html, css и javascript), и я застрял в части анимации, хотя я использую простые базовые анимации spritesheet.

A) Я попытался оживить BASIC путь, но у меня есть 2 проблемы:

1) Если я не имею полную сетку 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, поэтому пустые кадры не отображаются, но у него также есть две проблемы (как на рабочем столе, так и на мобильном телефоне):

1) Анимация выглядит нестабильной. Я думаю, это просто мысль о том, что это происходит, потому что сценарий пытается рассчитать размер каждого кадра и плохо перепутаться. (даже если я установил ширину и высоту). Можно ли пропустить эту часть? Это происходит на всех методах рендеринга (фон, изображение, а также холст, как на мобильном, так и на рабочем столе)

2) Размер фона не рассчитывается как правильно. Вы можете увидеть некоторые остатки в верхней части анимации, которые должны были быть внизу. Можно ли изменить размер фона на несколько пикселей? Я использую те же спрайты в обеих версиях, поэтому я не думаю, что это из-за спрайта .. или?

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

Пожалуйста, помогите мне решить так или иначе А или 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; 
    } 
} 

Answer 2

проверять полный учебник по этому вопросу, Сво, показывающий, как создать Dropbox домашнюю страницу, как анимация, https://medium.com/@Mrugraj/sprite-sheet-animation-using-html-css-9091bebd4eeb

.animatedDiv { 
    width: 820px; 
    height: 312px; 
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg"); 
    -webkit-animation: play 2s steps(48) infinite; 
    -moz-animation: play 2s steps(48) infinite; 
    -ms-animation: play 2s steps(48) infinite; 
    -o-animation: play 2s steps(48) infinite; 
    animation: play 2s steps(48) infinite; 
} 
@-webkit-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-moz-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-ms-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@-o-keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
} 
@keyframes play { 
    from { 
     background-position: 0px; 
    } 
    to { 
     background-position: -39360px; 
    } 
}