用關(guān)鍵幀可以實現(xiàn)精靈圖的切換，同時通過background-size解決了自適應(yīng)的問題，這樣還是不夠的，元素還僅僅只是在原地進行幀動畫，要讓一個元素動起來必須要配合元素坐標(biāo)的變化
因此在實現(xiàn)上，讓元素動起來：
運動 = 關(guān)鍵幀動畫 + 坐標(biāo)變化
關(guān)鍵幀動畫我們已經(jīng)實現(xiàn)了，那坐標(biāo)的變化就很簡單了，一般來說前端能用到的手段
無論用那種需要記住的是元素的坐標(biāo) 都是 position+translate的值的總和
圣誕主題我采用的是transition+position的處理
transition是css3引入的"過渡"屬性，可以讓css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡，考慮兼容性問題，這里會額外引入一個插件jquery.transit，這個就是具體封裝了transition的CSS3過渡動畫的實現(xiàn)
接下來代碼部分就非常簡單了
transition的使用與jQuery提供的animate()方法基本差不多，所以使用上很容易接受
參考右邊的代碼，讓飛鳥執(zhí)行一個飛的動作，可以這樣用
$(".bird").transition({
'right': "3rem",
}, 10000,'linear',function(){
alert("結(jié)束")
});
只要給出position的坐標(biāo)值，同時給出變化的時間就讓元素動起來了，結(jié)合一下精靈動畫，是不是看起來物體運動就是那么回事了？
具體的實現(xiàn)看右邊編輯區(qū)
點擊運動按鈕，通過transition方法，讓"鳥"從右邊飛出來，飛出右邊3rem的位置，請在右邊對應(yīng)的68行區(qū)域?qū)懗鰧?yīng)的代碼來
$(".bird").transition({
'right': "3rem",
}, 10000,'linear',function(){
alert("結(jié)束")
});
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報