loader.source 更改时 Qml Loader 的动画

Question

当我们在 QML 中更改 Loader 组件的源代码时，有什么方法可以应用动画吗？例如假设我有以下 Loader:

Loader {
     anchors.fill: parent
     id: loader
}

设置loader.source = "content.qml"

时我想要一个从左到右的动画

感谢您的帮助。

Answer 1

这是一种方法：

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

是否必须使用 Loader？

如果不是，您可以使用 StackView（当然，如果您不想提供更复杂的导航，则深度为 1）并通过将组件推入堆栈来加载它们replace 选项设置为 true。

也就是说，您可以通过以下方式获得您要的结果：

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

如果它不能正常工作，我深表歉意（即使它应该），但我在移动设备上 phone，我现在无法测试它。

loader.source 更改时 Qml Loader 的动画

Animation for Qml Loader when loader.source changes

qt

qml

qt-quick

qtquick2

qt5.4