Forums

OverviewFelgo 2 Support (Qt 5) › Background image slideshow with transition. How do I do that?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18082

    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

    #18083

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

     

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.