QML timer combined with transition - animation

Question

import QtQuick 2.0
Rectangle {
id: rec
property int img_in:2
property int img_out:3
Image {
id: imgout
source: "pics/"+img_out+".jpg"
opacity: 1
anchors.fill: parent
}
Image {
id: imgin
source: "pics/"+img_in+".jpg"
opacity: 0
anchors.fill: imgout
}
Timer {
interval: 5000
repeat: true
running: true
onTriggered: {
img_in = img_in+1
img_out = img_out+1
anim.running = true;
}
}
states: State {
name: "state1"
PropertyChanges { target: imgout; opacity: 0}
PropertyChanges { target: imgin; opacity: 1}
}
SequentialAnimation {
id: anim
NumberAnimation { target: imgin; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 }
NumberAnimation { target: imgout; properties: "opacity"; easing.type: Easing.InOutQuad; duration: 1500 }
}
}
I would like to know if the problem is in opacity or in pics number change. Pics do change (suddenly) but there is no animation. Inside onTriggered I have tried to use these options: states, SequentialAnimation plus transition. No help.

Answer 1

So I took your code and customized it a bit. It basically starts at pics/1.jpg fades it out while fading pics/2.jpg in, then continues to the next images. You should be able to use it and change it to suit your needs.
Importantly there is no need to do this with States rather use Behaviour on the Image elements opacity
Hope this answers your question! It does make for a nice slideshow!
import QtQuick 2.0
Rectangle {
id: rec
// [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.
Component.onCompleted: {
currentImage.opacity = 0;
nextImage.opacity = 1;
}
Image {
id: currentImage
source: "pics/" + 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: allowBehaviour
NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
}
}
Image {
id: nextImage
source: "pics/" + nextIndex + ".jpg"
opacity: 0
anchors.fill: currentImage
// [5] See [4] above.
Behavior on opacity {
enabled: allowBehaviour
NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
}
}
Timer {
interval: 2500
repeat: true
running: true
onTriggered: {
// [6] Block the Behaviour animation.
allowBehaviour = false;
// [7] Advance the indices.
currentIndex = nextIndex;
++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.
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;
}
}
}