Toggle a crossfade between two (or more images)

Meistermosher

Hey, currently I'm trying to achieve a smooth slideshow.
(at least two images).

I have this so far:

import QtQuick 2.0

Rectangle {
    id: rec
    
    property int currentIndex: 1
    property int nextIndex: 2
    property bool allowBehaviour: true
    
    Component.onCompleted: {
        currentImage.opacity = 1;
        nextImage.opacity = 0;
    }
    
    Image {
        id: currentImage
        source:  "qrc:/Assets/Img/idle_screen_1.png"
        opacity: 1
        anchors.fill: parent
        
        Behavior on opacity {
            enabled: allowBehaviour
            NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
        }
    }
    
    Image {
        id: nextImage
        source:  "qrc:/Assets/Img/idle_screen_2.png"
        opacity: 0
        anchors.fill: currentImage
        
        Behavior on opacity {
            enabled: allowBehaviour
            NumberAnimation { easing.type: Easing.InOutQuad; duration: 2500 }
        }
    }
    
    Timer {
        interval: 2500
        repeat: true
        running: true
        
        onTriggered: {
            allowBehaviour = false;
            currentIndex = nextIndex;
            ++nextIndex;
            
            // sets the current
            // image to visible and the next
            // image to invisible. This happens
            // instantly as the Behaviour is off.
            
            // but how to create a smooth back transition?
            
            currentImage.opacity = 1;
            nextImage.opacity = 0;
            
            allowBehaviour = true;
            
            currentImage.opacity = 0;
            nextImage.opacity = 1;
        }
    }
}

Any help is very appreciated :/

Meistermosher

Ok, if anybody seeks for a (quick) solution:

import Qt.Quick 2.12 !

    SequentialAnimation{
        id: seqAnim
        loops: Animation.Infinite // kann man pausieren....
        running: true

        // Fade in
        OpacityAnimator{
            target: nextImage
            easing.type: Easing.InOutSine
            from: 1
            to: 0
            duration: 2000
        }
        PauseAnimation {
            duration: 5000
        }

        // Fade out
        OpacityAnimator{
            target: nextImage
            easing.type: Easing.InOutSine
            from: 0
            to: 1
            duration: 2000
        }
        PauseAnimation {
            duration: 5000
        }
    }

GrecKo

Shameless plug: I've implemented that with an easy to use API here : https://github.com/okcerg/quickbehaviors

Here's how you can use it when changing a Image source :

import QtQuick 2.15
import QtQuick.Window 2.0

Window {
    id: root
    visible: true
    width: 400
    height: 400

    property bool toggle: true

    Image {
        anchors.centerIn: parent
        source: root.toggle ? "http://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/60/google/56/white-smiling-face_263a.png" : "http://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/60/google/56/winking-face_1f609.png"
        opacity: 1
        CrossFadeBehavior on source {
            fadeDuration: 2500
            delayWhile: fadeTarget.status === Image.Loading
        }
    }

    Timer {
        interval: 3000
        repeat: true
        running: true

        onTriggered: root.toggle = !root.toggle
    }
}

Here's a demo video for crossfading an Image https://i.imgur.com/vAvxWsV.gifv
Rest of the demo : https://imgur.com/a/7DZOYv5