Как анимировать CSS спрайты с помощью jQuery

Я пытаюсь найти самый простой способ репликации анимации 12fps с использованием спрайтов CSS и jQuery.Как анимировать CSS спрайты с помощью jQuery

Я думал, используя setInterval(), поэтому каждые 83.33 миллисекунды, следующий спрайт будет загружен.

Моя проблема, что я не знаю, как это сделать ...

Я думал, что мои имена спрайтов являются дополнительными, как:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png 
etc.

Таким образом, если бы мы могли как-то увеличивайте это значение до тех пор, пока мы не достигнем последнего экземпляра, который в этом случае равен mariohammerswing5.png, он вернется к началу.

Если я смогу понять эту часть, я готов к работе! :)

Любые предложения?

источник

2010-08-07 Qcom

Я думаю, что «спрайтов» обычно указывают у вас есть несколько кадров на одном изображении, в случае чего, все вам 'd должен сделать, это панорамировать изображение. Но почему бы вам просто не использовать анимированный gif? Или вы хотите изображения более высокого качества? Flash - еще один вариант. – mpen

@Mark: Может быть, он хочет, чтобы можно было запустить и остановить анимацию по своему усмотрению. –

Анимированные gifs - мусор. 256 цветов? Почему мы все еще используем их? – devios1

непроверенная, но что-то вроде этого:

var images = ['one.png', 'two.png', 'three.ng']; 

function startAnim() { 
    var $target = $('#something'); 
    var counter = 0; 
    setTimeout(function() { 
     $target.css('background-image', images[counter]); 
     if (++counter > images.length - 1) 
      counter = 0; 
    }, 83); 
} 

startAnim();

Вы могли бы применить некоторые хитрости с % (по модулю) как-то, но я думаю, что легче читать этот путь.

источник

2010-08-07 04:17:24

Эй, спасибо! Это совершенно для меня как jQuery n00b, но я получаю основы, и я пытаюсь понять более сложные вещи, с которыми я не знаком. Почему вы префикс своего целевого var знаком '$'? И установить его равным $ ('# something') в том, чтобы установить его равным тому, где он должен быть анимирован? – Qcom

Мне нравится именовать переменные «JQueried» с префиксом «$», чтобы указать это. Это всего лишь вопрос личных предпочтений. '$ ('# something')' получает элемент с идентификатором «что-то» и переносит его в JQuery, поэтому вы можете использовать на нем такие методы, как 'css()' (это не стандартный JavaScript). Таким образом, элемент с идентификатором - это элемент, который нужно CSS, чтобы установить фоновое изображение на изображение спрайта, а также высоту и ширину и так далее. –

ОК, просто хотел убедиться, что он не повторяет какое-то утверждение или что-то в этом роде. – Qcom

Там в спрайт-посвященный плагин для JQuery

http://www.spritely.net/

Взгляните;)

источник

2010-08-07 08:11:14 Napolux

Симпатичные! .... !!!!! – mpen

Как анимировать CSS спрайты с помощью jQuery

ответ

Смежные вопросы