QML Animation

narayanan.krish

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

p3c0

Hi,

Can you paste the relevant code ?

narayanan.krish

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
}
}
@

p3c0

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...

narayanan.krish

Thanks a lot. It works as I expected.