jQuery動畫：讓精靈看起來像是走路，而不是浮動/滑動

我正在寫一個模擬送貨員走到門口的小型jQuery動畫腳本。動畫的作品和所有，但它看起來很人造。我想知道是否有辦法讓這個精靈來回擺動，讓他感覺他實際上在走路。我不願意認爲唯一能做到這一點的方法是繪製所有要點 - 我希望有一些插件可以簡化這一點。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);

來源

2011-06-03 Dutchie432

ImageShack的已禁止訪問的精靈，以防止盜鏈，所以我不能看到你的榜樣。 – Arno 2011-06-03 13:24:28

這是一個使用Dummy Images（http://jsfiddle.net/Jaybles/ZYMsy/3/）的版本...雖然效果很難看。 – Dutchie432 2011-06-03 13:28:20

由於Duopixel在下面提到，您可以嘗試easing插件並使用正弦曲線模式更新位置。 – Arno 2011-06-03 13:36:54

我的效果還沒有那麼好，但它越來越接近。

加入jQuery的寬鬆插件
把easeInOutBounce寬鬆到您的動畫，但只對「頂級」屬性

這裏是jQuery的

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

嘗試玩參數。

http://jsfiddle.net/Hm7ZQ/

來源

2011-06-03 13:30:04 Duopixel

這其實挺好的！我想讓問題在幾個小時內公開，但現在這已經成爲領先者。如果您添加任何更新，我也將保持關注。謝謝！ +1 ...我想知道是否有任何動畫也會輕微旋轉。 – Dutchie432 2011-06-03 13:40:49

我決定這可能是這裏介紹的最好的解決方案。儘管上面的'sod'的建議具有更真實的效果，'easing'方法可以確保上/下運動與其他動畫的開始/結束時間同步。 – Dutchie432 2011-06-03 19:46:21