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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support