Animation for Qml Loader when loader.source changes

Question

Is there any way to apply animation when we change source of Loader component in QML? For example suppose I have the following Loader:

Loader {
     anchors.fill: parent
     id: loader
}

I want an animation from left to right when I set loader.source = "content.qml"

Thanks for any help.

Answer 1

This is one way to do it:

import QtQuick 2.4
import QtQuick.Window 2.0

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

    Loader {
        id: loader
        onSourceChanged: animation.running = true

        NumberAnimation {
            id: animation
            target: loader.item
            property: "x"
            from: 0
            to: window.width - loader.item.width
            duration: 1000
            easing.type: Easing.InExpo
        }
    }

    // Replace this with some other action that changes the source.
    Component.onCompleted: loader.source = "MyRectangle.qml"
}

MyRectangle.qml:

import QtQuick 2.0

Rectangle {
    id: rect
    color: "red"
    width: 150
    height: 150
}

Answer 2

Is it mandatory to use a Loader?

If it's not, you can use a StackView (of course, having a depth of 1 if you don't want to offer a more complex navigation) and load your components by pushing them on the stack with the replace option set to true.

That said, you can obtain the result you are asking for as follows:

StackView {
    delegate: StackViewDelegate {
        function transitionFinished(properties) {
            properties.exitItem.x = 0
        }

        pushTransition: StackViewTransition {
            PropertyAnimation {
                target: enterItem
                property: "x"
                from: enterItem.width
                to: 0
            }

            PropertyAnimation {
                target: exitItem
                property: "x"
                from: 0
                to: -exitItem.width
            }
        }
    }
}

I apologize if it doesn't work as is (even though it should), but I'm on a mobile phone and I cannot test it right now.