Slowing down the speed of the Transition

houmingc

Current animation (pslogo.png) transit from high to low opacity, and from left to right.
I would like to slow down the speed of the transition.

Also, i can't make pslogo.png to transit from current location upwards even after i change x to y both in states and transition.

@
Image {
source: "close.png"
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 10

//onClicked: Qt.quit()

MouseArea {
anchors.fill: parent
onClicked: myApp.state == "" ? myApp.state= "hideLogo": myApp.state= ""
}
}
Image{
id:myImage
source:"pslogo.png"
anchors.verticalCenter: parent.verticalCenter
}

states:[
State{
        name:"hideLogo"
        PropertyChanges{
            target:myImage
            opacity:0
            x:100           //change to y: 0
          }
}
]
transitions: [
    Transition {
        NumberAnimation{ properties: "opacity,x"}     //change to y
               }
]

@

sierdzio

To slow down the transition, you can add a duration to your number animation:
@
NumberAnimation {
properties: "opacity,x"
duration: 3000
}
@

houmingc

; duration 3000 works.
How to make "pslogo.png" move back to its original location?

sierdzio

Create a state definition for your default state and make sure you set the position well there.

By default, your image is anchored, so when you change the state to "hideLogo", that anchor is broken.

An alternative would be to define "hideLogo" transition as AnchorAnimation instead of NumberAnimation. You can also look up reversible property of Transition - "link":http://doc.qt.io/qt-5/qml-qtquick-transition.html#reversible-prop. And "this":http://doc.qt.io/qt-5/qml-qtquick-propertychanges.html#restoreEntryValues-prop.

sierdzio

Create a state definition for your default state and make sure you set the position well there.

By default, your image is anchored, so when you change the state to hideLogo, that anchor is broken. An alternative would be to define hideLogo transition as AnchorAnimation instead of NumberAnimation.

You can also look up reversible property of Transition - "link":http://doc.qt.io/qt-5/qml-qtquick-transition.html#reversible-prop. And restoreEntryValues in ProeprtyChanges - "link":http://doc.qt.io/qt-5/qml-qtquick-propertychanges.html#restoreEntryValues-prop.