卡片放大播放效果實現(xiàn)總結(jié)，不同元素間的放大過渡效果如何實現(xiàn)?
2023-01-10 12:14:58
來源：程序員客棧
背景
(資料圖片)
最近一段時間做了幾個需求，其中涉及的素材列表展示，需要實現(xiàn)類似下方圖片中的動效，暫且稱之為【卡片放大播放動效】，具體細節(jié)如下：
初始展示的是封面圖片，鼠標經(jīng)過時是視頻放大的效果；下方文字內(nèi)容區(qū)域，在放大前后展示的內(nèi)容不同，而且兩者的字體大小是一致的，不是簡單的放大實現(xiàn)；四五個頁面都需要實現(xiàn)相同列表效果，列表的行數(shù)和列數(shù)是不一致的；在整個實現(xiàn)過程中，遇到以下四個問題，后面的解析中會有對應解答。
不同元素間的放大過渡效果如何實現(xiàn)？抽離為通用性組件時，如何實現(xiàn)類vue中的具名插槽效果，來替換下方文字信息區(qū)域？不同頁面中的列表區(qū)域?qū)挾炔煌械捻撁媪斜磉€是彈性寬度，常用的flex布局無法滿足要求，如何實現(xiàn)呢？邊界卡片放大后，如何避免被父級列表容器overflow:hidden`隱藏掉?實現(xiàn)解析這個動效，在愛奇藝官網(wǎng)也有類似效果，愛奇藝官網(wǎng)是通過生成初始狀態(tài)卡片列表和鼠標放大卡片列表兩套列表，然后通過動態(tài)計算放大卡片位置，相對于body進行絕對定位展示的。
本實現(xiàn)方案通過將卡片初始狀態(tài)和放大狀態(tài)，封裝到一個組件中，通過兩者間的相對關(guān)系，利用css自動完成對應關(guān)系，避免了大量的JS計算。
1. 放大效果實現(xiàn)UI對該動效的要求實際就是鼠標視頻放大播放，如果卡片初始狀態(tài)也放置視頻video，通過transition對同一元素進行scale放大也可以實現(xiàn)，但是這是一個列表，用戶進入頁面，就會同時加載多個視頻，用戶體驗不是很好。
所以，實現(xiàn)方案就是卡片初始狀態(tài)放置poster圖片，鼠標經(jīng)過時，在poster上方展示視頻層（絕對定位），然后對視頻執(zhí)行animation動畫來模擬放大效果。
卡片底部文字區(qū)域如何處理？
由于卡片初始狀態(tài)下，底部文字區(qū)域在列表布局中是占位的，所以在卡片初始狀態(tài)下，底部文字區(qū)域使用正常文檔流。
卡片鼠標經(jīng)過狀態(tài)下，視頻層的放大效果是以poster中心點為放大原點的，所以底部文字區(qū)域使用absolute定位，相對于player進行定位處理。
interfaceIItemData{src?:string;poster?:string;industry?:string;}interfaceIProps{posterClass:string;//poster區(qū)域?qū)捀遬layerClass:string;//放大后視頻寬高樣式itemData:IItemData;children:{[key:string]:any};}lett:NodeJS.Timeout;constVideoItem:FC=({posterClass,playerClass,itemData,children,})=>{const[isHover,setIsHover]=useState(false);constonMouseEnter=()=>{t=setTimeout(()=>{//避免快速移動鼠標，造成視頻無法隱藏問題setIsHover(true);},50);};constonMouseLeave=()=>{clearTimeout(t);setIsHover(false);};return(Top1