QML 实现图片帧渐隐渐显轮播

前言

所谓图片帧渐隐渐显轮播就是，一组图片列表，当前图片逐渐改变透明度隐藏，同时下一张图片逐渐改变透明度显示，依次循环，达到渐隐渐显的效果，该效果常用于图片展示，相比左右自动切换的轮播方式来说，这种方式在视觉效果上不会显得太突兀。当然，这里的图片还可以换成其他组件，比如一个复杂的页面。

正文

实现方式并不复杂，有一种最常规的方式就是自己去实现每张图片的动画效果，然后控制切换，这种方式比较麻烦一些。其实 QML 有自带的组件可以实现这种效果，那就是StackView，可以通过设置delegate来自定义切换的动画效果，另外，为了保证图片是轮询切换，需要用到定时器，来不断的向StackView中push图片，但是又不能让StackView中的数据越来越多，要不然会很消耗内存。所以这里根据调整 push 的参数来实现StackView中永远都只保持一张图片。
先来看看效果图：

（由于博客上传的图片只限制2M 大小，所以录制的gif 帧率不高，真实效果比这个更好）

直接上源码：

Window {    visible: true    width: 420    height: 320    property int flag: 1    property var imgList: [img1,img2,img3]    StackView{        id:stack        anchors.fill: parent        initialItem: img1        delegate: StackViewDelegate{            function transitionFinished(properties)            {                properties.exitItem.opacity = 1            }            pushTransition: StackViewTransition {                PropertyAnimation {                    target: enterItem                    property: "opacity"                    from: 0                    to: 1                    duration: 1500                }                PropertyAnimation {                    target: exitItem                    property: "opacity"                    from: 1                    to: 0                    duration: 500                }            }        }    }    Image {        id: img1        source: "1.jpg"        visible: false    }    Image {        id: img2        source: "2.jpg"        visible: false    }    Image {        id: img3        source: "3.jpg"        visible: false    }    Timer{        interval: 2000        repeat: true        running: true        onTriggered: {            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 中数据不会一直增加。

这里只是一个简单的示例，可以通过该方法来拓展更多好玩的东西。
源码在这里，点击下载