Вход и выход из анимации в QML - PullRequest
Новая
       64

Вход и выход из анимации в QML

0 голосов
/ 24 октября 2018

В моем qml-приложении есть область содержимого «Item», в которой есть «загрузчик» для загрузки qml-файла.

Я хочу реализовать эффект отпускания и ввода анимации

Например, мой текущий источник загрузчика - «First.qml», когда я устанавливаю источник другого файла qml (second.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")


                    }


                }

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

В качестве альтернативы можно использовать 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
            }
        }
    }
}
0 голосов
/ 24 октября 2018

Хорошо, так, как я вижу, у вас есть два основных варианта ..

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

В этом могут быть ошибки, поскольку вы не можете запустить код прямо сейчас!

...