QML Animation



  • Hello all!
    I am dynamically creating a page uisng createComponent. I like to implement any kind of animation while closing the page.
    I am trying to implement the animation before destroying the page using PropertyAnimation on "opacity".
    But it is now working.
    Kindly help to fix it?

    Thanks & Regards,
    Narayanan


  • Moderators

    Hi,

    Can you paste the relevant code ?



  • Attaching the code.

    @
    import QtQuick 2.0

    Rectangle {
    id: root
    width:1280
    height:720
    color: "grey"
    PropertyAnimation { target: root; property: "opacity";
    duration: 1000; from: 0; to: 1;
    easing.type: Easing.InOutQuad ; running: true }

    Image {
        id: bg
        source: "../../resources/images/bg.png"
        x: 0
        y: 0
        opacity: 1
    }
    

    /*
    RotationAnimation on rotation {
    from: 0
    to: 360
    duration:1000
    }
    */
    Image {
    id: power_off
    source: "../../resources/images/power_off.png"
    x: 13
    y: 10
    opacity: 1
    }
    Image {
    id: power
    source: "../../resources/images/power.png"
    x: 13
    y: 10
    opacity: 1
    }
    Image {
    id: wifi_off
    source: "../../resources/images/wifi_off.png"
    x: 1133
    y: 9
    opacity: 1
    }
    Image {
    id: wifi
    source: "../../resources/images/wifi.png"
    x: 1133
    y: 9
    opacity: 1
    }
    Image {
    id: battery
    source: "../../resources/images/battery.png"
    x: 1165
    y: 9
    opacity: 1
    }
    Text {
    id: timeText
    // text: "4:23"
    font.pixelSize: 12
    font.family: "SegoeUI-SemiBold"
    font.bold: true
    color: "#8bfcfd"
    smooth: true
    x: 1200
    y: 7.5
    opacity: 1
    }
    Image {
    id: chip_circuit
    source: "../../resources/images/chip_circuit.png"
    x: 327
    y: 109
    opacity: 1
    }
    Image {
    id: home
    source: "../../resources/images/home.png"
    x: 558
    y: 280
    opacity: 1
    }
    Image {
    id: task_manager
    source: "../../resources/images/task_manager.png"
    x: 370
    y: 510
    opacity: 1
    }
    Image {
    id: task_manager_on
    source: "../../resources/images/task_manager_on.png"
    x: 370
    y: 510
    opacity: 1
    }
    Image {
    id: file_manager
    source: "../../resources/images/file_manager.png"
    x: 183
    y: 164
    opacity: 1
    }
    Image {
    id: file_manager_on
    source: "../../resources/images/file_manager_on.png"
    x: 183
    y: 164
    opacity: 1

    MouseArea {
    anchors.fill: parent
    onClicked: {
    Qt.createComponent("FileBrowser.qml").createObject(root, {});
    //loadTimer.start();
    }
    }
    }
    Image {
    id: demos
    source: "../../resources/images/demos.png"
    x: 594
    y: 45
    opacity: 1
    }
    Image {
    id: demos_on
    source: "../../resources/images/demos_on.png"
    x: 594
    y: 45
    opacity: 1
    }
    Image {
    id: about
    source: "../../resources/images/about.png"
    x: 871
    y: 440
    opacity: 1
    MouseArea {
    anchors.fill: parent
    onClicked: {
    Qt.createComponent("About_Screen.qml").createObject(root, {});
    }
    }
    }
    Image {
    id: about_on
    source: "../../resources/images/about_on.png"
    x: 871
    y: 440
    opacity: 1
    }
    Image {
    id: settings
    source: "../../resources/images/settings.png"
    x: 964
    y: 200
    opacity: 1
    }
    Image {
    id: settings_on
    source: "../../resources/images/settings_on.png"
    x: 964
    y: 200
    opacity: 1
    }

    function updateTime(time)
    {
    timeText.text=time
    }
    }
    @


  • Moderators

    Hi,

    You can start the animation when you want to destroy the page and then use "onStopped":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-animation.html#onStopped-signal to actually destroy the page

    Fo e.g,

    @
    import QtQuick 2.0

    Rectangle {
    id: root
    width:1280
    height:720
    color: "grey"
    PropertyAnimation { id: animation; target: root; property: "opacity";
    duration: 1000; from: 1.0; to: 0.0;
    easing.type: Easing.InOutQuad ;

        onStopped: Qt.quit()
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
             animation.start();
        }
    }
    

    }
    @

    Hope this helps...



  • Thanks a lot. It works as I expected.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.