前言

所謂圖片幀漸隱漸顯輪播就是，一組圖片列表，當前圖片逐漸改變透明度隱藏，同時下一張圖片逐漸改變透明度顯示，依次循環，達到漸隱漸顯的效果，該效果常用于圖片展示，相比左右自動切換的輪播方式來說，這種方式在視覺效果上不會顯得太突兀。當然，這里的圖片還可以換成其他組件，比如一個復雜的頁面。

正文

實現方式并不復雜，有一種最常規的方式就是自己去實現每張圖片的動畫效果，然后控制切換，這種方式比較麻煩一些。其實 QML 有自帶的組件可以實現這種效果，那就是StackView，可以通過設置delegate來自定義切換的動畫效果，另外，為了保證圖片是輪詢切換，需要用到定時器，來不斷的向StackView中push圖片，但是又不能讓StackView中的數據越來越多，要不然會很消耗內存。所以這里根據調整 push 的參數來實現StackView中永遠都只保持一張圖片。
先來看看效果圖：

（由于博客上傳的圖片只限制2M 大小，所以錄制的gif 幀率不高，真實效果比這個更好）

直接上源碼：

Window {visible: truewidth: 420height: 320property int flag: 1property var imgList: [img1,img2,img3]StackView{id:stackanchors.fill: parentinitialItem: img1delegate: StackViewDelegate{function transitionFinished(properties){properties.exitItem.opacity = 1}pushTransition: StackViewTransition {PropertyAnimation {target: enterItemproperty: "opacity"from: 0to: 1duration: 1500}PropertyAnimation {target: exitItemproperty: "opacity"from: 1to: 0duration: 500}}}}Image {id: img1source: "1.jpg"visible: false}Image {id: img2source: "2.jpg"visible: false}Image {id: img3source: "3.jpg"visible: false}Timer{interval: 2000repeat: truerunning: trueonTriggered: {stack.push({item:imgList[flag%3],immediate:false,replace:true})flag++}} }

這里設置圖片隱藏的時間為500ms，圖片顯示的時間為1500ms，通過定時器來不斷的向 StackView中 push 數據，注意這里的 push 參數

stack.push({item:imgList[flag%3],immediate:false,replace:true})

item 是通過數組方式不斷改變對象
immediate 這個必須為 false，否則不會有動畫過程
replace 設置為 true，就會將新的圖片覆蓋原有的圖片，這樣可以保證StackView 中數據不會一直增加。

這里只是一個簡單的示例，可以通過該方法來拓展更多好玩的東西。
源碼在這里，點擊下載

總結

以上是生活随笔為你收集整理的QML 实现图片帧渐隐渐显轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。