QML 组件按顺序加载，但淡入淡出

Question

我需要按顺序从数组中逐个加载组件。在将下一个组件加载到加载器之前，它应该淡出，加载然后淡入。

上面的代码未正确闪烁并显示以下消息："QML 状态：检测到属性"when"的绑定循环

我做错了什么？

谢谢

import QtQuick 2.0
Rectangle {
    id: screen
    width: 400
    height: 400
    color: "black"
    Rectangle {
        id: view
        anchors.fill: parent
        Loader {
            id: loader
            onLoaded: { view.state="fadeIn"; }
        }
        states: [
            State {
                name: "fadeOut";
                PropertyChanges { target: view; opacity: 0.1; }
            },
            State {
                name: "fadeIn";
                PropertyChanges { target: view; opacity: 1; }
            },
            State {
                name: "load"; when: view.opacity == 0;
                StateChangeScript { script: { loader.sourceComponent=com_array[index]; } }
            }
        ]
        transitions: [
            Transition {
                to: "fadeIn"
                NumberAnimation { properties: "opacity"; from: 0.0; to: 0.99; duration: 2000 }
            },
            Transition {
                to: "fadeOut"
                NumberAnimation { properties: "opacity"; from: 0.99; to: 0; duration: 2000 }
            }
        ]
    }
    Timer {
        id: timer
        interval: 3000; running: true; repeat: true
        onTriggered:  {
            ++index;
            if( index >= com_array.length ) {
                index = 0
            }
            view.state="fadeOut"
        }
    }
    // -------------------------------------------------------------------
    // Components
    Item {
        id: list
        property Component red_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height
                Rectangle {
                    anchors.fill: parent; color: "red";
                }
            }
        }
        property Component blue_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height
                Rectangle {
                    anchors.fill: parent; color: "blue";
                }
            }
        }
    }
    property int index: 0
    property var com_array: [ list.red_rect_com, list.blue_rect_com ]
    Component.onCompleted: { loader.sourceComponent = com_array[index]; }
}

UPD

这可能对其他带有更正的完整示例有用(感谢答案作者(：

import QtQuick 2.0
Rectangle {
    id: screen
    width: 400
    height: 400
    color: "black"
    Rectangle {
        id: view
        anchors.fill: parent
        property var sourceComponent
        opacity: 0
        function loadComponent( component, is_first_start ) {
            sourceComponent = component;
            if( is_first_start ) {
                fadeOut.stop(); fadeIn.start();
            }
            else {
                fadeIn.stop(); fadeOut.start();
            }
        }
        Loader {
            id: loader
            onLoaded: {
                fadeOut.stop();
                fadeIn.start();
            }
        }
        NumberAnimation on opacity {
            id: fadeOut;
            to: 0.0;
            duration: 2000;
            onStopped: { loader.sourceComponent=view.sourceComponent; }
        }
        NumberAnimation on opacity {
            id: fadeIn;
            to: 1.0;
            duration: 2000
        }
    }
    Timer {
        id: timer
        interval: 4000; running: true; repeat: true
        onTriggered: {
            ++index;
            if( index >= com_array.length ) {
                index = 0
            }
            view.loadComponent( com_array[index], false );
        }
    }
    // -------------------------------------------------------------------
    // Components
    Item {
        id: list
        property Component red_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height
                Rectangle {
                    anchors.fill: parent; color: "red";
                }
            }
        }
        property Component blue_rect_com : Component {
            Rectangle {
                width: screen.width; height: screen.height
                Rectangle {
                    anchors.fill: parent; color: "blue";
                }
            }
        }
    }
    property int index: 0
    property var com_array: [ list.red_rect_com, list.blue_rect_com ]
    Component.onCompleted: { view.loadComponent( com_array[index], true ); }
}

Answer 1

它给你错误，因为QML建立连接以在更改之间进行通信：

onStateChange通过PropertyChanges连接，该将不透明度更改为视图的不透明度属性。onOpacityChanged信号将连接到国家当财产。onWhenChanged信号将连接到状态属性，从而使绑定循环。

另一件事是，在转换中进行NumberAnimation时，无需指定from和to属性。PropertyChanges设置正确的值。

无论如何，你的状态没有意义，你用错了。您还应该等待淡出，因为它加载速度如此之快，以至于您看不到效果。只需制作两个动画：

Rectangle {
    id: view
    anchors.fill: parent
    property var sourceComponent
    function loadComponent(component){
        fadeIn.stop(); fadeOut.start();
        sourceComponent = component;
    }
    Loader {
        id: loader
        onLoaded: { fadeOut.stop(); fadeIn.start(); }
    }
    NumberAnimation on opacity {
        id: fadeOut
        to: 0.0
        onStopped: { loader.sourceComponent= sourceComponent; }
    }
    NumberAnimation on opacity {
        id: fadeIn
        to: 1.0
    }
}

您还应该将加载更改为：

property int index: 0
onIndexChanged:  { view.loadComponent(com_array[index]); }

但是有更好的解决方案：在更改源之前使用 ShaderEffectSource 获取加载器帧，并在加载组件的同时使用它淡出。