jQuery 动画 : Make a sprite appear to be walking, 不 float /滑动

Question

我正在编写一个小型 jQuery 动画脚本，用于模拟送货员走到门口。动画确实有效，但看起来很做作。我想知道是否有一种方法可以让 Sprite 来回摆动，给人一种他实际上在走路的印象。我不想认为做到这一点的唯一方法是绘制所有点 - 我希望有某种插件可以简化这一点。

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

Answer 1

我的效果还没有完全达到，但已经接近了。

1. 添加 jQuery 缓动插件
2. 将 escapeInOutBounce 缓动放入动画中，但仅限“顶部”属性

这是jquery

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

尝试使用参数。

http://jsfiddle.net/Hm7ZQ/