[Niyazi]

Hi,

I couldn’t find in Felgo demo or examples. So I have to ask simple question.

Background image slideshow with transition. How do I do that?

Thanks

[Niyazi]

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

}