前言

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

正文

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

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

直接上源碼：

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++}} }

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。