jQuery Animation: спрайт выглядит как ходящий, а не плавающий / скользящий - PullRequest
Новая
       2

jQuery Animation: спрайт выглядит как ходящий, а не плавающий / скользящий

3 голосов
/ 03 июня 2011

Я пишу небольшой анимационный скрипт jQuery, который имитирует доставщика, идущего к двери. Анимация работает и все, но выглядит она просто искусственно. Мне интересно, есть ли способ заставить спрайта качаться взад-вперед, чтобы создать впечатление, что он на самом деле ходит. Я не хотел бы думать, что единственный способ сделать это - это построить все точки - я надеюсь, что есть какой-то плагин, который мог бы упростить это.

JSFiddle Demo (Вам понадобится широкий монитор, ширина сцены 1102 пикс.)

Кто-нибудь знает об этом?

HTML 

<div class="indexHeader">
    <img src="http://img705.imageshack.us/img705/2410/deliveryman.png" class='deliveryMan' />
</div>

CSS 

.indexHeader{
    width:1102px;
    height:367px;
    background:url(http://img839.imageshack.us/img839/3298/indexheader2.png);
    overflow:hidden;  
}

.deliveryMan{
    position:relative;
    width:415px;
    height:520px;
    top:0px;
    left:450px;    
}

JQuery 

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, 4000);

Ответы [ 3 ]

3 голосов
/ 03 июня 2011

Мой эффект все еще не совсем там, но он приближается.

  1. Добавьте плагин jQuery easing
  2. Включите замедление easeInOutBounce в анимацию, но только вСвойство "top"

здесь jquery 

$('.deliveryMan').animate({
    'left': '+=310px',
    'top': '+=30px',
    'width': '275px',
    'height': '344px'    
}, {
    duration: 4000,
    specialEasing: {
      top: 'easeInOutBounce'
    }
});

Попробуйте поиграть с параметрами.

http://jsfiddle.net/Hm7ZQ/

1 голос
/ 03 июня 2011

Немного попробовал с вами пример со скрипкой. Может быть, вы должны улучшить мои цифры немного больше: -)

http://jsfiddle.net/eKCw6/2/

0 голосов
/ 03 июня 2011

Вы можете использовать этот отличный плагин, в значительной степени подключи и играй http://www.spritely.net/

В противном случае, я не думаю, что проблема заключается в JS или CSS, а скорее в том, как вы проектируете свои «фреймы» в спрайте изображения. Эффект подпрыгивания должен быть, на мой взгляд, не в сценарии.

...