Как заставить CSS-спрайт использовать другое изображение, чем дольше «остается» значение? - PullRequest
Новая
       6

Как заставить CSS-спрайт использовать другое изображение, чем дольше «остается» значение?

0 голосов
/ 06 марта 2012

Например, чем дольше кто-то скажет, удерживая кнопку мыши или клавишу со стрелкой, меняет изображение по-другому.Скажи ходячую анимацию.Когда пользователь удерживает, скажем, правую клавишу со стрелкой, появляется анимация ходьбы.Но в спрайте есть несколько изображений, которые вы должны использовать в течение небольшого времени.Если это немного расплывчато, я ничего не могу поделать.Это трудно объяснить.Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 06 марта 2012

Этого не так уж сложно достичь. Сначала примените слушателя к клавише со стрелкой ...

jQuery пример. 

$("document").ready(function() {

   $(document).on('keydown', function(e) {
        switch (e.keyCode) {
             case 13:
                // Perform some action when enter is placed
             return;
             case 37:
                // animate left
                animate.dir = 'left';
                animate.moving = true;
                animate.anim();
             break;
             case 38:
                 // animate up
              break;
             case 39:
                 // animate right
                 animate.dir = 'right';
                animate.moving = true;
                animate.anim();
              break; 
             case 40:
                 // animate down
              break;   
        }
    }).on('keyup', function(){
        animate.reset();
    });
});

var animate = {
    moving:false,
    speed: 100,
    dir: 'right',
    frame_width: 100,
    cur_position: 0,
    queue: null,
    anim: function(){
        if(this.moving)
        {
            if(dir == 'right')
                this.cur_position -= this.frame_width;
            else
                this.cur_position += this.frame_width; 

            $('#guy').css({backgroundPosition: this.cur_position + 'px 0' });

            this.queue = setTimeout(function(){
                this.anim();
            }, this.speed);
        }
    },
    reset: function(){
        this.moving = false;
        clearTimeout(animate.queue);
        this.cur_position = 0;
        $('#guy').css({backgroundPosition: '0 0' });
    }
};

html:

<div id="guy"></div>

css:

#guy{
    width:100px;
    height:100px;
    background: url(/image.png);
    background-position:0 0;
}

Я не могу ничего обещать с этим непроверенным кодом, но общая идея верна. Я обработал множество спрайтов на основе взаимодействия с пользователем.

Помните, что ваша анимация должна вызывать себя рекурсивно, пока animate.moving == true. затем при включении вы сбрасываете тайм-аут. Имея это в виду, вы можете контролировать действия animate.anim () по своему усмотрению. В этом случае я просто удаляю или добавляю 100 пикселей к смещению x в background-position. Это предполагает, что ваш спрайт является горизонтальным изображением с размером каждого кадра 100 x 100 пикселей.

ДОПОЛНИТЕЛЬНО этот код НЕ учитывает, когда изображение должно зацикливаться. Таким образом, вам придется рассчитать это на основе размеров вашего изображения и цикла для каждой конкретной анимации. Если мой пример работает, должно быть тривиально применять прослушиватель цикла при необходимости. Просто отправьте вопрос к этому ответу, если вы зашли так далеко и не знаете, что делать. Я написал бы здесь, но на самом деле вы могли бы написать тома об обработке анимации, и я бы предпочел сделать это по требованию, а не по предположениям.

Вы можете просмотреть исходную анимацию одного из моих тестовых доменов при наведении курсора и выйти:

http://www.wrightonwrong.com

0 голосов
/ 06 марта 2012

Вы всегда можете использовать анимированный GIF, а затем просто сделать файл спрайта и использовать его как обычно.

...