QML 中的进入和离开动画答案

【问题标题】：Enter and Leave animation in QMLQML 中的进入和离开动画
【发布时间】：2018-10-24 09:00:36
【问题描述】：

在我的 qml 应用程序中有内容区域“项目”，它有一个用于加载 qml 文件的“加载器”。

我要实现离开和进入动画效果

例如，当我设置源其他 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")


                    }


                }

【问题讨论】：

到目前为止您尝试过什么？编辑您的问题以显示您已有的代码
@teh_raab 用代码更新了问题

标签： qt qml qqmlcomponent

【解决方案1】：

另一种方法是使用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
            }
        }
    }
}

【讨论】：

谢谢..这就是我要找的

【解决方案2】：

好的，所以我认为你有两个主要选择..

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) 通过添加第二个加载器来交叉淡入淡出，然后当您选择按钮时，您会在不透明度上交叉淡入淡出。这可能看起来像..

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

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

【讨论】：