如何打造流暢的圖片序列播放效果?
許多應(yīng)用場(chǎng)景需要模擬視頻播放,但素材并非視頻,而是多張圖片。直接替換圖片路徑播放容易因圖片加載時(shí)間差異導(dǎo)致黑屏或卡頓。本文提供一種高效流暢的解決方案。
簡(jiǎn)單的逐張加載圖片容易出現(xiàn)延遲,因此,我們采用更優(yōu)的方案:將所有圖片拼接成一張大圖。假設(shè)圖片尺寸相同,將它們水平拼接成一張長(zhǎng)圖。然后,利用css的background-position屬性和@keyframes動(dòng)畫,控制背景圖片的偏移量來實(shí)現(xiàn)圖片切換。
例如,有三張500×300像素的圖片,拼接后得到一張1500×300像素的長(zhǎng)圖。以下CSS代碼實(shí)現(xiàn)圖片循環(huán)播放:
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記(深入)”;
.container { width: 500px; height: 300px; background: url("拼接后的圖片") left / auto 100% no-repeat; animation: play 播放時(shí)長(zhǎng) steps(3, start) 0s infinite; /* steps(圖片數(shù)量, start) */ } @keyframes play { 0% { background-position: 0 0; } /* 第1張 */ 33.3% { background-position: -500px 0; } /* 第2張 */ 66.7% { background-position: -1000px 0; } /* 第3張 */ 100% { background-position: 0 0; } /* 回到第1張 */ }
代碼中,.container定義容器尺寸,background屬性設(shè)置拼接后的圖片為背景,animation屬性定義播放動(dòng)畫。steps(3, start)確保圖片分步切換,infinite表示無限循環(huán)。background-position控制顯示區(qū)域。 關(guān)鍵是精確計(jì)算每張圖片的偏移量,并將其寫入@keyframes中。播放時(shí)長(zhǎng)根據(jù)圖片數(shù)量和所需速度調(diào)整。此方法簡(jiǎn)潔高效,避免了逐張加載的延遲問題,實(shí)現(xiàn)流暢的圖片序列播放。