UI動畫是網(wǎng)頁設(shè)計(jì)和開發(fā)的重要組成部分。它們可以吸引注意力，引導(dǎo)用戶的旅程，為交互提供令人滿意且有意義的反饋，添加特色和天賦，使網(wǎng)站脫穎而出。共享元素轉(zhuǎn)換API是一個(gè)改變游戲規(guī)則的特性，它將使我們能夠輕松地創(chuàng)建令人印象深刻的精致的UI動畫。

如果我們可以跳過所有這些，使用普通的JavaScript和CSS讓優(yōu)化的瀏覽器API完成所有繁重的工作正在…保持完全控制他們?nèi)绾卧诓煌挠脩艚缑鏍顟B(tài)之間轉(zhuǎn)換？有了新的共享元素轉(zhuǎn)換API，實(shí)現(xiàn)這樣的動畫將變得非常容易和無縫。在本文中，我們將深入探討這個(gè)改變游戲規(guī)則的API，它仍處于早期階段，并通過以下方式探索其驚人的潛力構(gòu)建四個(gè)有趣且令人興奮的真實(shí)例子從零開始。

用戶界面狀態(tài)之間的動畫通常需要當(dāng)前和下一個(gè)要出現(xiàn)的狀態(tài)同時(shí)。讓我們以一個(gè)簡單的圖像輪播為例，它在圖像之間交叉漸變。我們甚至?xí)谏院髣?chuàng)建旋轉(zhuǎn)木馬。如果您只使用JavaScript而沒有任何庫或框架，您必須確保當(dāng)前圖像和下一個(gè)圖像都存在，然后同時(shí)淡出當(dāng)前圖像和淡入下一個(gè)圖像。您還必須處理一些邊緣情況和由此可能出現(xiàn)的可訪問性問題。

簡而言之，共享元素轉(zhuǎn)換API通過確保傳出和傳入狀態(tài)都被看得見地 禮物同時(shí)。我們所要做的就是關(guān)注DOM更新和動畫風(fēng)格。該API還允許我們利用這些單獨(dú)的狀態(tài)，并使用標(biāo)準(zhǔn)CSS讓我們完全控制動畫animation屬性。讓我們從一個(gè)簡單有趣的例子開始。我們將用下面的動畫創(chuàng)建一個(gè)圖片庫-在卡片上點(diǎn)擊，卡片內(nèi)的圖像將擴(kuò)展并從它在網(wǎng)格中的位置移動到一個(gè)固定的覆蓋圖中。當(dāng)點(diǎn)擊覆蓋圖中的擴(kuò)展圖像時(shí)，它將返回到原來的位置。讓我們看看如何用幾行JavaScript和CSS創(chuàng)建這個(gè)動畫。


如果操作正確，動畫可以為任何項(xiàng)目注入活力并提供一個(gè)更令人愉快和難忘的經(jīng)歷給用戶。隨著即將推出的共享元素轉(zhuǎn)換API，創(chuàng)建復(fù)雜的UI狀態(tài)轉(zhuǎn)換動畫變得前所未有的簡單，但我們?nèi)匀恍枰⌒奈覀內(nèi)绾问褂煤蛯?shí)現(xiàn)動畫。

這種簡單性可能會導(dǎo)致不好的做法，例如沒有正確使用動畫，創(chuàng)建緩慢或重復(fù)的動畫，創(chuàng)建不必要的復(fù)雜動畫，等等。重要的是了解動畫的最佳實(shí)踐因此，我們可以有效地利用這個(gè)API來創(chuàng)建真正令人驚嘆的和可訪問的體驗(yàn)，或者如果我們不確定如何進(jìn)行，甚至可以咨詢設(shè)計(jì)師。