I google it and found it. I implemented. And its working perfectly.
Thanks to author.
//By Matthew
// h***s://ca.linkedin.com/in/matt-bastin-millar-776857ab
// h***s://stackoverflow.com/questions/21630694/qml-timer-combined-with-transition/21640450#21640450
import Felgo 3.0
import QtQuick 2.0
Page {
id: testMe
Rectangle {
id: rec
visible: true
anchors.fill: parent
// [1] First image is to be display is pics/1.jpg,
// followed by 2.jpg, 3.jpg, etc...
property int currentIndex: 1
property int nextIndex: 2
// [2] When swapping the image sources we need
// to block the animation behaviour.
// By default turn it on.
property bool allowBehaviour: true
// [3] When the 'rec' is loaded
// set the current image to fade out
// and the next image to fade in.
Image {
id: currentImage
source: "../assets/" + rec.currentIndex + ".jpg"
opacity: 1
anchors.fill: parent
// [4] Here we define that whenever we change the
// opacity we want it to animate. Notice the enable
// is tied to
allowBehaviour
Behavior on opacity {
enabled: rec.allowBehaviour
NumberAnimation { easing.type: Easing.InOutQuad; duration: 1500 }
}
}
Image {
id: nextImage
source: "../assets/" + rec.nextIndex + ".jpg"
opacity: 0
anchors.fill: currentImage
// [5] See [4] above.
Behavior on opacity {
enabled: rec.allowBehaviour
NumberAnimation { easing.type: Easing.InOutQuad; duration: 1500 }
}
}
Component.onCompleted: {
currentImage.opacity = 0;
nextImage.opacity = 1;
}
Timer {
interval: 10000
repeat: true
running: true
onTriggered: {
if (rec.nextIndex == 9)
rec.nextIndex = 1
// [6] Block the Behaviour animation.
rec.allowBehaviour = false;
// [7] Advance the indices.
rec.currentIndex = rec.nextIndex;
++rec.nextIndex;
// [8] This is key, set the current
// image to visible and the next
// image to invisible. This happens
// instantly as the Behaviour is off.
currentImage.opacity = 1;
nextImage.opacity = 0;
// [9] Turn the behaviour so the
// opacity change at [10] will
// cause an animation.
rec.allowBehaviour = true;
// [10] Like [3] set the current
// image to fade out and the
// next image to fade in.
currentImage.opacity = 0;
nextImage.opacity = 1;
}
}
}
}