Question

在我的qml应用程序中，有一个内容区域“ Item”，并且有一个用于加载qml文件的“ loader”。

我想实现休假并输入动画效果

例如，当我设置源其他qml文件（second.qml）时，我当前的加载器源是“ First.qml”。 “ First.qml”应淡出，“ second.qml”应淡入。

我应该如何实现？

我尝试了以下代码，使其仅对second.qml进行动画处理。设置源时，“ first.qml”消失。我也想给初始qml（“ first.qml”）提供淡入淡出动画

 Loader{
            id:contentLoader
            source: "First.qml"

            onSourceChanged: animation.running = true

                    NumberAnimation {
                        id: animation
                        target: contentLoader.item
                        property: "opacity"
                        from: 0
                        to: 1
                        duration: 1000
                        easing.type: Easing.bezierCurve
                    }

        }
//button click
 Button{
                    text:modelData
                    width:100
                    height: parent.height

                    onClicked: {

                         contentLoader.setSource("Second.qml")


                    }


                }

Answer 1

好，所以我的看法是，您有两个主要选择。

1）使用SequentialAnimation使第一个视图淡出，在第二个视图中加载，然后用类似的淡入。

SequentialAnimation {
    id: switchContentAnimation

    //Fade out first view
    NumberAnimation {
        target: contentLoader
        property: "opacity"
        duration: 1000
        from: 0
        to: 1
    }

    //Switch view
    ScriptAction { script: contentLoader.setSource("Second.qml"); }

    //Fade new view back in
    NumberAnimation {
        target: contentLoader
        property: "opacity"
        duration: 1000
        from: 0
        to: 1
    }
}

此方法将导致该区域空白片刻。而第二种选择是..

2）通过添加第二个Loader进行淡入淡出，然后在选择按钮时对不透明度进行淡入淡出。看起来可能像..

property bool activeView: false //false: first, true: second
Loader{
    id:contentLoaderOne
    source: "First.qml"
    onOpacityChanged: {
        if(opacity == 0) {
            //unload this loaders source to save memory
        }
    }
}
Loader{
    id:contentLoaderTwo
    onOpacityChanged: {
        if(opacity == 0) {
            //unload this loaders source to save memory
        }
    }
}
ParallelAnimation {
    id: switchContentAnimation
    NumberAnimation {
        target: contentLoaderOne
        properties: "opacity"
        duration: 1000
        to: (activeView) ? 1 : 0
    }
        NumberAnimation {
        target: contentLoaderTwo
        properties: "opacity"
        duration: 1000
        to: (!activeView) ? 1 : 0
    }
}

//button click
Button{
    text:modelData
    width:100
    height: parent.height
    onClicked: {
        if(activeView) {
            //switch to second view..
            contentLoaderTwo.setSource("Second.qml")
        }
        else {
            //switch back to first view..
            contentLoaderOne.setSource("First.qml")
        }
        activeView = !activeView;
        switchContentAnimation.start()
    }
}

可能存在错误，因为无法立即运行代码！

Answer 2

一种替代方法是使用StackView，因为它支持自定义动画。

使用它的replace功能，您可以更改显示的项目。

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    id : root
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible:true

    Component {
        id: lightblueRectangleComponent
        Rectangle {
            color: "lightblue"
            Button {
                anchors.centerIn: parent
                text: "replace"
                onClicked: stackView.replace(orangeRectangleComponent)
            }
        }
    }

    Component {
        id: orangeRectangleComponent
        Rectangle {
            color: "orange"
            Button {
                anchors.centerIn: parent
                text: "replace"
                onClicked: stackView.replace(lightblueRectangleComponent)
            }
        }
    }

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: lightblueRectangleComponent

        replaceEnter: Transition {
            PropertyAnimation {
                property: "opacity"
                from: 0
                to:1
                duration: 200
                easing.type: Easing.OutQuad
            }
        }
        replaceExit: Transition {
            PropertyAnimation {
                property: "opacity"
                from: 1
                to:0
                duration: 200
                easing.type: Easing.InQuad
            }
        }
    }
}

在QML中输入和离开动画

2 个答案: