簡(jiǎn)介這是一份面向Delphi開(kāi)發(fā)者的Unigui圖片輪播示例工程演示在Unigui框架下實(shí)現(xiàn)帶左推移平滑動(dòng)畫的輪播組件覆蓋自動(dòng)播放、手動(dòng)切換、循環(huán)索引、觸摸交互與跨平臺(tái)UI適配適合深入理解Unigui動(dòng)畫和事件驅(qū)動(dòng)編程的中高級(jí)Delphi開(kāi)發(fā)者學(xué)習(xí)和參考。壓縮包共26個(gè)文件、256KB包含源程序、窗體定義、工程文件以及圖片素材、日志和圖標(biāo)資源雖然體積小巧但目錄結(jié)構(gòu)完整解壓后可直接打開(kāi)工程查看整體設(shè)計(jì)與效果。已有338人學(xué)習(xí)下載通過(guò)它可梳理Unigui中TImage、TTimer與布局組件的配合方式理解圖片索引在循環(huán)播放中的管理思路掌握左推移動(dòng)畫的具體寫法。同時(shí)示例保留了手動(dòng)切換與觸摸事件處理開(kāi)發(fā)人員可通過(guò)配置調(diào)整輪播間隔、動(dòng)畫速度等參數(shù)并直接復(fù)用到自己的跨平臺(tái)項(xiàng)目中作為可裁剪、可定制的輪播組件模板。1. 拿到這個(gè) rar 包以后我建議你先弄清楚它到底是什么前陣子一個(gè)做 Delphi 的老同事丟給我一個(gè)壓縮包文件名寫著unigui_圖片輪播_左推移.rar說(shuō)是從某個(gè)外包項(xiàng)目里拷出來(lái)的想讓我?guī)兔纯茨懿荒苤苯佑?。我解壓完掃了一圈發(fā)現(xiàn)這其實(shí)就是一套基于 UniGUI 框架寫的圖片輪播 Demo核心效果是把傳統(tǒng)桌面端的輪播交互搬到了 Web 頁(yè)面上動(dòng)畫方向是“左推移”——也就是圖片列表整體向左滑動(dòng)循環(huán)播放。很多剛接觸 UniGUI 的朋友看到這類包會(huì)以為下載下來(lái)就能跑實(shí)際上你要先搞清楚三件事你是哪個(gè)版本的 Delphi、裝了哪個(gè)版本的 UniGUI、以及這個(gè)包里的組件是否依賴了第三方庫(kù)。我這邊環(huán)境是 Delphi 10.4 UniGUI 1.90.0.1563打開(kāi)后編譯一次通過(guò)但你如果用的是 Delphi 11 或更新版本可能要留意 UniGUI 的版本兼容性尤其是uniGUI自帶的uniTimer、uniPanel這些底層組件的行為有細(xì)微差異。這篇博文我會(huì)從“項(xiàng)目整體結(jié)構(gòu)”開(kāi)始逐步拆解左推移輪播的實(shí)現(xiàn)思路、幾個(gè)核心屬性的配置邏輯、我在調(diào)試過(guò)程中踩過(guò)的坑以及最后怎么把這個(gè)組件改造成可以放進(jìn)真實(shí)項(xiàng)目里的形態(tài)。代碼上不會(huì)追求花哨重點(diǎn)是讓你理解為什么這么做以及下次你自己寫的時(shí)候怎么避開(kāi)我走過(guò)的彎路。2. 方案怎么選為什么是 UniGUI 組件自繪而不是直接塞 HTML2.1 常見(jiàn)的三種輪播實(shí)現(xiàn)路徑UniGUI 做圖片輪播我在網(wǎng)上見(jiàn)過(guò)不少討論大致可以分為三條路第一條路直接用 HTML JavaScript 嵌入 UniHTMLFrame。比如在某寶、某東的驗(yàn)證碼、廣告位這類場(chǎng)景里用原生的swiper.js或者自己寫 CSS3 動(dòng)畫通過(guò)UniHTMLFrame把前端代碼塞進(jìn) UniGUI 頁(yè)面。這條路的好處是前端生態(tài)豐富動(dòng)效上限高壞處是 UniGUI 的 Ajax 回調(diào)和前端事件需要手動(dòng)橋接比如點(diǎn)擊圖片后要把id傳回 Delphi 端你得用js: function或者window.ajaxRequest這類方式寫起來(lái)不夠“Delphi”。第二條路使用 UniGUI 自帶的UniCarousel控件。如果你用的是較新版本的 UniGUI工具箱里確實(shí)有一個(gè)輪播控件。它的優(yōu)點(diǎn)是開(kāi)箱即用不需要寫太多代碼缺點(diǎn)是樣式定制能力有限尤其想做成“左推移連續(xù)滾動(dòng) 首尾無(wú)縫銜接”這類效果時(shí)往往要通過(guò) CSS Hack 才能實(shí)現(xiàn)而且它的內(nèi)部實(shí)現(xiàn)是依賴 ExtJS 的carousel在部分瀏覽器下跑起來(lái)會(huì)有偶發(fā)的白屏。第三條路用 UniPanel UniTimer 自定義 CSS 實(shí)現(xiàn)“偽輪播”。也就是這個(gè) rar 包里采用的方式。核心邏輯是一個(gè)容器面板放多個(gè)TUniImage通過(guò)定時(shí)器控制整塊圖片層的left值或transform: translateX()讓圖片層向左平移移出視野的圖片再把位置挪回最右邊形成一個(gè)循環(huán)隊(duì)列。它的好處是邏輯透明、可控性強(qiáng)、跨瀏覽器兼容性容易做而且代碼量并不大。2.2 為什么這個(gè)包選擇了自繪方案我看完這個(gè) Demo 的源碼基本可以確定作者是有意選擇第三條路的。因?yàn)樗暮诵拇a只涉及四個(gè)單元主窗體、輪播框架類、一個(gè)定時(shí)器、以及一份 CSS 樣式文件。沒(méi)有引入任何第三方 JS 庫(kù)也沒(méi)有依賴 ExtJS 的高級(jí)組件。這種極簡(jiǎn)結(jié)構(gòu)對(duì)于做交付型項(xiàng)目非常友好——你不用擔(dān)心宿主環(huán)境被公司安全策略限制了外部 CDN也不需要每次升級(jí) UniGUI 版本后擔(dān)心輪播控件的內(nèi)部 API 變化。從維護(hù)角度看自繪方案還有一個(gè)隱性優(yōu)勢(shì)所有行為都暴露在 Delphi 代碼里客戶要求“把輪播速度從 3 秒改為 5 秒”“點(diǎn)擊跳到第二張”“首尾循環(huán)加個(gè)淡入淡出”你可以直接在 IDE 里改屬性或者寫事件不用跑到前端源碼里翻。不過(guò)也要提醒一句自繪方案不是萬(wàn)能的。如果你需要大量的復(fù)雜動(dòng)效比如 3D 翻轉(zhuǎn)、手勢(shì)縮放、視差滾動(dòng)我建議你還是老老實(shí)實(shí)走 HTMLFrame 前端庫(kù)的路子。輪播這個(gè)場(chǎng)景自繪足夠但不要為了“用 Delphi 解決一切”而硬扛。3. 左推移動(dòng)畫的核心實(shí)現(xiàn)拆解3.1 圖片隊(duì)列的底層結(jié)構(gòu)整個(gè)輪播組件的核心是“一個(gè)容器 一個(gè)移動(dòng)層 N 張圖片”。容器通常是TUniPanel設(shè)置好寬度、高度和Layout : absolute目的是讓子控件可以自由定位。移動(dòng)層是一個(gè)承載所有圖片的容器代碼里經(jīng)常就是另一個(gè)TUniPanel或者直接把多張TUniImage放進(jìn)父容器然后統(tǒng)一改父容器的Left屬性。我傾向于把移動(dòng)層作為一個(gè)整體來(lái)管理而不是單獨(dú)移動(dòng)每一張圖片。因?yàn)槿绻麊为?dú)移動(dòng)圖片你需要保證同一時(shí)刻所有圖片的位移量完全一致否則會(huì)出現(xiàn)“拖影”或“斷層”。用統(tǒng)一容器改Left值相當(dāng)于把多張圖片用隱形膠帶粘成一個(gè)長(zhǎng)卷你推動(dòng)的是整卷而不是單張紙邏輯簡(jiǎn)單性能也好?！白笸埔啤钡幕具\(yùn)動(dòng)過(guò)程是這樣的初始狀態(tài)下第一張圖片位于可視區(qū)定時(shí)器每個(gè)周期把移動(dòng)層的Left值減少一個(gè)步長(zhǎng)方向向左當(dāng)Left的絕對(duì)值等于單張圖片寬度時(shí)說(shuō)明第一張已經(jīng)移出了可視區(qū)此時(shí)把它從容器頭部移到尾部同時(shí)把移動(dòng)層的Left歸零。這樣視覺(jué)上看起來(lái)是無(wú)限循環(huán)但代碼里你只操作了一次 DOM 節(jié)點(diǎn)的順序變更和一次坐標(biāo)復(fù)位開(kāi)銷極小。3.2 定時(shí)器驅(qū)動(dòng)的核心參數(shù)如果你看過(guò)這個(gè) Demo 的DFM文件會(huì)發(fā)現(xiàn)里面有一個(gè)UniTimer。它的Interval默認(rèn)是 3000 毫秒但需要注意這個(gè)Interval是“多久觸發(fā)一次移動(dòng)”而不是“動(dòng)畫持續(xù)多久”。動(dòng)畫時(shí)長(zhǎng)是通過(guò) CSS 的transition控制的我在改版后把兩者區(qū)分開(kāi)FInterval輪播切換間隔也就是每張圖停留的時(shí)間單位毫秒建議 3000 到 6000。FAnimationDuration一次滑動(dòng)動(dòng)畫的時(shí)長(zhǎng)單位毫秒通常 500 到 800。太短顯得生硬太長(zhǎng)會(huì)讓用戶覺(jué)得卡頓。FStep每次動(dòng)畫移動(dòng)的距離一般是圖片寬度或?qū)挾鹊囊徊糠?。這三個(gè)參數(shù)配合時(shí)有個(gè)常見(jiàn)的坑如果你把UniTimer.Interval設(shè)成和動(dòng)畫時(shí)長(zhǎng)一樣短動(dòng)畫還沒(méi)做完就觸發(fā)了下一次移動(dòng)視覺(jué)上就會(huì)出現(xiàn)“跳幀”或者“卡一半就切圖”。所以在代碼里我習(xí)慣在每次觸發(fā)時(shí)先禁用 Timer等動(dòng)畫結(jié)束后再啟用防止重入。demo 里的實(shí)現(xiàn)是用了 ExtJS 的動(dòng)畫函數(shù)animate在 UniGUI 的TUniImage上調(diào)用這種方式在組件渲染到瀏覽器端后是通過(guò)修改樣式或Ext.Fx來(lái)實(shí)現(xiàn)的。我不建議在服務(wù)端用 Delphi 代碼sleep或者用循環(huán)做延時(shí)因?yàn)?UniGUI 是基于 AJAX 的服務(wù)端的阻塞會(huì)直接影響所有在線用戶的回話響應(yīng)。你需要把動(dòng)畫執(zhí)行完全交給瀏覽器端。3.3 “首尾無(wú)縫”的實(shí)現(xiàn)細(xì)節(jié)很多人做到這一步發(fā)現(xiàn)循環(huán)播放時(shí)老是在最后一張回到第一張的那一刻“閃一下”或者明顯空白。原因很簡(jiǎn)單你把最后一張挪回第一張時(shí)如果沒(méi)有一個(gè)占位圖或者保持連續(xù)的圖片序列就會(huì)出現(xiàn)一個(gè)短暫的空窗期。正確的做法是在隊(duì)列末尾“補(bǔ)”一張和第一張相同的圖。當(dāng)滾到“補(bǔ)的這張”時(shí)用戶肉眼看到的是剛剛滑出第一張馬上又有一張和它一樣的圖接著滑入此時(shí)你靜默地把真實(shí)的隊(duì)列復(fù)位到第一張的位置用戶根本無(wú)感知。這個(gè)原理和走馬燈、跑馬燈是同一個(gè)邏輯理解了這個(gè)你的循環(huán)就不會(huì)再閃。這個(gè) Demo 里用的不是“補(bǔ)位法”而是“移動(dòng)復(fù)位法”——也就是說(shuō)圖片節(jié)點(diǎn)本身沒(méi)有復(fù)制只是每移出一張就把它的Left改到最右側(cè)之后再整體歸零。這個(gè)方法也能無(wú)縫但需要注意的是如果圖片尺寸不一致復(fù)位時(shí)會(huì)出現(xiàn)跳動(dòng)。建議使用移動(dòng)復(fù)位法時(shí)強(qiáng)制所有圖片的顯示尺寸保持一致比如統(tǒng)一Width : 600; Height : 300否則只能使用復(fù)制補(bǔ)位法。4. 實(shí)操怎樣把這個(gè)組件改造成自己的4.1 從 rar 包解壓到集成到主窗體如果你也拿到了這套代碼文件結(jié)構(gòu)大概是這樣的Unit.Main.pas主窗體里面放了 UniPanel、UniImage、UniTimer。Unit.Carousel.pas輪播邏輯的框架類負(fù)責(zé)創(chuàng)建圖片列表、管理位移。style.css控制動(dòng)畫過(guò)渡和圖片大小。*.dfm窗體設(shè)計(jì)文件。我建議你不要直接在主窗體里堆代碼而是快速把它抽取成一個(gè)可復(fù)用的 FrameTUniFrame這樣你可以在不同頁(yè)面里調(diào)用同一個(gè)輪播。我的做法是新建一個(gè)TFrame或TUniFrame把 UniPanel、UniTimer 放上去。在 Frame 的公開(kāi)接口中暴露三個(gè)屬性ImageList: TStringList存放圖片 URL 或本地路徑、Interval: Integer、AnimationDuration: Integer。提供一個(gè)StartPlay方法和StopPlay方法分別在OnShow和OnHide里調(diào)用。抽取之后的好處是輪播組件的行為可以和業(yè)務(wù)頁(yè)面解耦你只需要在任意頁(yè)面里拖入這個(gè) Frame設(shè)置圖片列表然后調(diào)用一次StartPlay就行。如果是更復(fù)雜的業(yè)務(wù)你還可以把“點(diǎn)擊圖片后觸發(fā)某個(gè)事件”封裝成OnImageClick事件參數(shù)里攜帶Index和圖片 URL。4.2 參數(shù)配置的常見(jiàn)取值與調(diào)整方法我把自己調(diào)過(guò)的一組穩(wěn)定參數(shù)做成表格你可以直接參考參數(shù)推薦值說(shuō)明UniTimer.Interval4000每張圖片停留 4 秒適合大部分展示場(chǎng)景AnimationDuration600滑動(dòng)速度適中不拖沓也不急促Image Width / Height容器寬 600高 300按實(shí)際容器等比縮放圖片數(shù)量3~6 張少于 3 張時(shí)循環(huán)效果不明顯多于 6 張應(yīng)分批加載LoadMaskFalse加載圖片時(shí)不要用阻塞型遮罩否則輪播會(huì)卡頓這里特別說(shuō)下圖片加載。如果你的圖片來(lái)自遠(yuǎn)程 HTTP 地址第一次加載時(shí)會(huì)出現(xiàn)空白或延遲。UniGUI 的TUniImage.URL屬性指向的是相對(duì)路徑加載由瀏覽器異步處理所以你在 Delphi 端設(shè)置完URL后圖片并不會(huì)立刻顯示。為了解決這個(gè)問(wèn)題我通常會(huì)在圖片容器里先放一個(gè) 1x1 的透明占位圖SPacer.gif 或者 base64 字符串等真實(shí)圖片加載完成后再替換。如果你有本地圖片資源也可以將其放到可訪問(wèn)的目錄下使用Format(img src%s onload..., [Url])的方式顯示但這樣就回到了 HTML 和 Delphi 的混用看你團(tuán)隊(duì)的技術(shù)棧取舍。4.3 移動(dòng)端觸控適配輪播在桌面端只要鼠標(biāo)點(diǎn)按鈕或者靠定時(shí)器就能跑但手機(jī)上用戶習(xí)慣用手指滑。UniGUI 的組件默認(rèn)沒(méi)有手勢(shì)滑動(dòng)支持所以你要么手動(dòng)引入 touch 事件要么調(diào)整按鈕大小讓觸控點(diǎn)擊更友好。我當(dāng)時(shí)的做法是在 UniHTMLFrame 里嵌入一小段 JavaScript監(jiān)聽(tīng)touchstart/touchmove/touchend事件把滑動(dòng)距離換算成滾動(dòng)的頁(yè)碼再通過(guò)Ajax請(qǐng)求回傳給 Delphi 端觸發(fā)切換邏輯。這個(gè)方法實(shí)現(xiàn)起來(lái)并不難核心是在 JS 端記錄觸摸起點(diǎn)clientX在touchend時(shí)判斷位移量超過(guò)閾值就調(diào)用ajaxRequest。但要注意如果頁(yè)面本身有橫向滾動(dòng)需求這個(gè)手勢(shì)處理會(huì)沖突你需要判斷deltaX的絕對(duì)值是否大于deltaY只有橫向滑動(dòng)才交給輪播處理。如果不想寫 JS還有一個(gè)土辦法把左右切換按鈕做得足夠大比如 48px 以上并放在圖片兩側(cè)的中部區(qū)域。移動(dòng)端用戶雖然不能直接滑動(dòng)圖片但點(diǎn)擊左右按鈕也可以完成切換在非核心賣點(diǎn)的項(xiàng)目里完全夠用。5. 常見(jiàn)問(wèn)題我收拾過(guò)的幾類爛攤子5.1 多頁(yè)面輪播導(dǎo)致 Timer 重復(fù)觸發(fā)這是最容易被忽視的問(wèn)題。如果一個(gè)窗口里有多個(gè) Frame每個(gè) Frame 都放了一個(gè) UniTimer用戶切換頁(yè)面時(shí)如果你在OnDestroy里沒(méi)把 Timer 停掉后臺(tái)頁(yè)面仍然會(huì)繼續(xù)觸發(fā) AJAX 輪播。等到用戶切回時(shí)會(huì)出現(xiàn)一下子跳好幾張圖的現(xiàn)象。解決辦法在所有涉及輪播的窗體的OnHide事件里調(diào)用Timer.Enabled : False在OnShow里重新打開(kāi)。如果你用的是 TabSheet則要監(jiān)聽(tīng) Tab 切換事件在切換時(shí)主動(dòng)啟用/禁用。這個(gè)坑非常典型幾乎每次接項(xiàng)目都會(huì)遇到寫出來(lái)給你提個(gè)醒。5.2 左推移動(dòng)畫卡頓圖片經(jīng)常半截卡住如果你發(fā)現(xiàn)滑動(dòng)過(guò)程中圖片像“幻燈片卡帶”十有八九是 CSStransition沒(méi)有生效或者你用了Left UniTimer的方式但每次位移量太大。我在調(diào)試時(shí)發(fā)現(xiàn)UniGUI 的TUniImage.Left改變后服務(wù)端會(huì)發(fā)送 AJAX 消息給瀏覽器瀏覽器再執(zhí)行 DOM 操作。如果每次定時(shí)器觸發(fā)一次就發(fā)一次 AJAX高頻操作會(huì)導(dǎo)致網(wǎng)絡(luò)往返排隊(duì)表現(xiàn)就是卡。優(yōu)化思路是把多次位移放在一次請(qǐng)求里完成或者干脆在前端用requestAnimationFrame做動(dòng)畫Delphi 端只負(fù)責(zé)“當(dāng)前顯示第幾張”的狀態(tài)。簡(jiǎn)單來(lái)說(shuō)不要讓服務(wù)端管每一幀動(dòng)畫服務(wù)端只做“宏觀指令”動(dòng)畫過(guò)程讓瀏覽器干。5.3 解壓 rar 時(shí)碰到問(wèn)題這個(gè)話題不算核心但既然熱詞里提到了我就補(bǔ)充一下。rar 包如果是從別人那里拷來(lái)的偶爾會(huì)遇到加密或者損壞。加密的 rar 大概率是作者加了保護(hù)我不建議去破解如果你沒(méi)有密碼直接聯(lián)系原作者要比較穩(wěn)妥。如果只是損壞可以試試用 WinRAR 的“修復(fù)”功能或者把文件擴(kuò)展名改為.zip有些情況下它能被通用解壓工具識(shí)別不過(guò)成功率不高。對(duì)于純 Delphi 源碼交付我一般會(huì)建議對(duì)方用 7z 壓縮成標(biāo)準(zhǔn) zip 再發(fā)避免團(tuán)隊(duì)里有人沒(méi)有裝解壓 rar 的工具。你拿到的這個(gè)包解壓后沒(méi)有密碼直接用 7-Zip 就能處理。5.4 點(diǎn)擊圖片后如何拿到下標(biāo)并把業(yè)務(wù)數(shù)據(jù)帶過(guò)去輪播圖的最終歸宿是點(diǎn)擊后進(jìn)入詳情頁(yè)或者觸發(fā)業(yè)務(wù)動(dòng)作。在老代碼里很多人直接給每張圖寫一個(gè)OnClick事件然后硬編碼圖片名字。這種做法改起來(lái)很痛苦我建議你在組件里維護(hù)一個(gè)TListT圖片對(duì)象每個(gè)對(duì)象包含ImageURL和Data可以是字符串或?qū)ο簏c(diǎn)擊事件統(tǒng)一收集用Sender對(duì)應(yīng)的組件找到它在列表里的下標(biāo)再觸發(fā)對(duì)外事件。這樣業(yè)務(wù)層拿到Index和Data后想怎么跳轉(zhuǎn)都行。6. 擴(kuò)展方向輪播還能怎么玩如果你的項(xiàng)目已經(jīng)實(shí)現(xiàn)了基礎(chǔ)的左推移輪播再往下走有幾個(gè)方向可以進(jìn)階多圖同時(shí)可見(jiàn)的“焦點(diǎn)圖”效果中間大圖兩側(cè)預(yù)覽相鄰圖片。這個(gè)效果通過(guò)調(diào)整每張圖片的縮放比例和透明度實(shí)現(xiàn)Delphi 端同樣只需要維護(hù)一個(gè)隊(duì)列和幾個(gè)狀態(tài)值其余交給 CSS 類選擇器完成。視頻輪播混合模式輪播中某些頁(yè)放視頻某些頁(yè)放圖片。做法是在切換時(shí)檢查當(dāng)前項(xiàng)的類型如果是視頻就顯示UniHTMLFrame并嵌入播放器離開(kāi)時(shí)暫停。自動(dòng)輪播 用戶懸停暫停鼠標(biāo)懸停在輪播區(qū)域時(shí)停止自動(dòng)播放鼠標(biāo)移開(kāi)后恢復(fù)。這在產(chǎn)品展示場(chǎng)景里很有用實(shí)現(xiàn)只需要監(jiān)聽(tīng)鼠標(biāo)事件簡(jiǎn)單。我個(gè)人的建議是如果項(xiàng)目周期緊不要一上來(lái)就追求復(fù)雜度先把“圖片能左移、能循環(huán)、點(diǎn)擊有反應(yīng)”這三個(gè)基礎(chǔ)動(dòng)作做扎實(shí)。數(shù)據(jù)量超過(guò) 20 張時(shí)再考慮分頁(yè)加載和懶加載。輪播本質(zhì)是 UI 交互中的一個(gè)模塊別讓它占了項(xiàng)目上太多時(shí)間。7. 我自己的幾點(diǎn)體會(huì)這個(gè) rar 包雖然名字不起眼解壓出來(lái)以后也不像商業(yè)組件那樣有花哨的文檔但它把 UniGUI 里一個(gè)非常典型的交互需求完整地演示了一遍。我從里面最直接的收獲是UniGUI 的組件模型雖然偏傳統(tǒng)但只要理解了 Ajax 的異步特性把瀏覽器端和 Delphi 端的職責(zé)劃分清楚寫出來(lái)的東西一點(diǎn)不比純前端項(xiàng)目差。如果你正準(zhǔn)備在自己的 UniGUI 項(xiàng)目里加一個(gè)圖片輪播模塊我的建議是不要直接網(wǎng)上復(fù)制一大段代碼先花半天時(shí)間把這個(gè)包里的 Demo 跑通然后自己動(dòng)手改一改把圖片換成你的、把速度調(diào)成你喜歡的、把點(diǎn)擊事件綁定到你的業(yè)務(wù)上。這么走一遍以后你對(duì) UniGUI 事件機(jī)制、組件生命周期和 CSS 的配合會(huì)有質(zhì)的理解。這套方法適用于所有類似的組件封裝工作尤其是那些帶“定時(shí)器”“動(dòng)畫”“列表”關(guān)鍵詞的需求都能用上同一套思路。本文還有配套的精品資源點(diǎn)擊獲取