PropertyAnimation does not fire - qml

Question

I have QML element consisting of transparent Rectangle and Image inside of it. The purpose of this element is to show some operation success - if some operation was executed successfully, checkmark icons pops up and then slowly dissapears in time of 1000ms.
Here is the simplified code that should done this job:
import QtQuick 2.5
import QtQuick.Layouts 1.1
Rectangle
{
id: ueActionResultIndicator
property bool ueParamConnectionOk: false
width: 128
height: 128
color: "transparent"
ColumnLayout
{
anchors.fill: parent
Image
{
Layout.fillWidth: true
Layout.fillHeight: true
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
smooth: true
fillMode: Image.PreserveAspectFit
// source: ueParamConnectionOk===true?"qrc:///ueIcons/icons/ueActionOk.png"
// :"qrc:///ueIcons/icons/ueActionCancel.png"
source: "http://www.clker.com/cliparts/0/f/7/0/11954234311954389563ok_mark_h_kon_l_vdal_02.svg.hi.png"
} // Image
} // ColumnLayout
states:
[
State
{
name: "ueStateHidden"
PropertyChanges
{
target: ueActionResultIndicator
opacity: 0.00
} // PropertyChanges
}, // State
State
{
name: "ueStateShown"
PropertyChanges
{
target: ueActionResultIndicator
opacity: 1.00
} // PropertyChanges
} // State
] // states
transitions:
[
Transition
{
from: "ueStateShown"
to: "ueStateHidden"
PropertyAnimation
{
properties: "opacity"
duration: 1000
loops: 3
easing.type: Easing.InOutSine
onStarted:
{
visible=true;
enabled=true;
} // onStarted
onStopped:
{
visible=false;
enabled=false;
} // onStopped
} // PropertyAnimation
} // Transition
] // transitions
Component.onCompleted:
{
state="ueStateHidden";
} // Component.onCompleted
} // Rectangle
and here is parent .QML file triggering it:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
Window
{
width: 512
height: 512
flags: Qt.FramelessWindowHint
visible: true
ColumnLayout
{
anchors.fill: parent
spacing: 8
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
radius: 16
border.color: "#4682b4"
border.width: 1
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#636363"
} // GradientStop
GradientStop
{
position: 1
color: "#303030"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.fill: parent
RowLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
antialiasing: true
Text
{
text: qsTr("APPLICATION SETTINGS")
clip: true
font.bold: true
font.pointSize: 24
textFormat: Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} // Text
} // RowLayout
ColumnLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
TabView
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
frameVisible: true
Tab
{
asynchronous: true
title: qsTr("Database")
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
ColumnLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
TextField
{
id: textFieldServerAddress
antialiasing: true
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database server address")
} // TextField
TextField
{
id: textFieldServerPort
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database server port")
} // TextField
TextField
{
id: textFieldDatabaseName
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database name")
} // TextField
TextField
{
id: textFieldDatabaseUsername
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database access username")
} // TextField
TextField
{
id: textFieldDatabasePassword
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database access password")
echoMode: TextInput.PasswordEchoOnEdit
} // TextField
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
spacing: 8
Button
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: qsTr("Test Connection")
onClicked:
{
ueActionResultIndicator.state="ueStateShown";
} // onClicked
} // Button
} // RowLayout
} // ColumnLayout
} // Tab
} // TabView
} // ColumnLayout
} // ColumnLayout
} // Rectangle
} // ColumnLayout
UeActionResultIndicator
{
id: ueActionResultIndicator
} // UeActionResultIndicator
} // Window
Why the checkmark once shown does not slowly dissapear, i.e., why does PropertyAnimation not get started?

Answer 1

You only shown Image.
ueActionResultIndicator.state = "ueStateShown";
For disappear you must add
ueActionResultIndicator.state = "ueStateHidden"
But, anyway, i think, you must refactor this code and run animation from function without states:
Rectangle {
id: rect
width: 100
height: 62
color: "green"
PropertyAnimation
{
id: opacityAnimation
properties: "opacity"
target: rect
from: 0.0
to: 1.0
duration: 1000
loops: 3
easing.type: Easing.InOutSine
onStarted:
{
visible=true;
enabled=true;
} // onStarted
onStopped:
{
visible=false;
enabled=false;
} // onStopped
} // PropertyAnimation
function runAnimation() {
opacityAnimation.running = true
}
}