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

前言

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

正文

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

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