问题
I want an animation to be painted when an element becomes visible (is should appear smoothly, not the whole at all)
I tried this
states: State
{
name: "iconOff"
when: iconOnSwitch.checked == false
PropertyChanges { target: selectIconRow; visible: false }
}
transitions: Transition
{
reversible: true
from: ""
to: "iconOff"
PropertyAnimation
{
properties: "x,y,visible"
easing.type: Easing.InOutQuad
from: selectIconRow
property: "visible"
}
}
But the selectIconRow still appears immediately
How can I use such an animation?
回答1:
Because it's boolean, visible
property cannot be animated. Perhaps opacity
could do the trick.
回答2:
Here is how to do it with opacity
:
Rectangle {
id: myRect
property bool stateVisible: true
...
states: [
State { when: stateVisible;
PropertyChanges { target: myRect; opacity: 1.0 }
},
State { when: !stateVisible;
PropertyChanges { target: myRect; opacity: 0.0 }
}
]
transitions: Transition {
NumberAnimation { property: "opacity"; duration: 500}
}
}
Keep in mind the advice of Vasco Rinaldo.
回答3:
I had to modify Uga Buga's answer slightly to make it work, here's what I got:
Rectangle {
id: myRect
property bool stateVisible: true
...
states: [
State { when: myRect.stateVisible;
PropertyChanges { target: myRect; opacity: 1.0 }},
State { when: !myRect.stateVisible;
PropertyChanges { target: myRect; opacity: 0.0 }}
]
transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 500}} ]
}
Please note that stateVisible is referenced through item id, it doesn't work without it on my system. Maybe some change in API caused this.
I also added square bracket in transitions
field as an array is required there (although QML syntax seems to allow spelling without brackets)
回答4:
Just for future references, here's my solution which takes care also of Vasco's warning. Basically I'm animating the visible
property of the component after the opacity has changed. It hurts seeing a NumberAnimation
on a boolean, but it's working:
states: [
State{
name: "Visible"
PropertyChanges{target: root; opacity: 1.0}
PropertyChanges{target: root; visible: true}
},
State{
name:"Invisible"
PropertyChanges{target: root; opacity: 0.0}
PropertyChanges{target: root; visible: false}
}
]
transitions: [
Transition {
from: "Visible"
to: "Invisible"
SequentialAnimation{
NumberAnimation {
target: root
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
NumberAnimation {
target: root
property: "visible"
duration: 0
}
}
},
Transition {
from: "Invisible"
to: "Visible"
SequentialAnimation{
NumberAnimation {
target: root
property: "visible"
duration: 0
}
NumberAnimation {
target: root
property: "opacity"
duration: 500
easing.type: Easing.InOutQuad
}
}
}
]
This introduces also a transition when the component is vanishing.
回答5:
Item {
scale: visible ? 1.0 : 0.1
Behavior on scale {
NumberAnimation { duration: 500 ; easing.type: Easing.InOutBounce }
}
}
does the trick for me.
回答6:
visibility
can be used in NumberAnimation
, but to get the needed fading result, opacity
animation could be used; like turning visibility ON from function like the following example:
Rectangle{
id:fadingRect
anchors.fill: parent
visible: false
opacity: 0.00
color: "red"
Component.onCompleted: {
animRect.start()
}
}
SequentialAnimation{
id:animRect
NumberAnimation { target: fadingRect; property: "visible"; from: 0; to:1; duration: 20}
NumberAnimation { target: fadingRect; property: "opacity"; from: 0.00; to:1.00; duration: 4000 }
onStopped: console.log(fadingRect.visible)
}
Or :
Rectangle{
id:fadingRect
anchors.fill: parent
visible: false
opacity: 1
color: "red"
Component.onCompleted: {
animRect.start()
}
NumberAnimation { id:animRect; target: fadingRect; property: "opacity"; from: 0; to:1; duration: 2000;
onStarted: { fadingRect.visible=true; console.log(fadingRect.visible)}
}
}
来源:https://stackoverflow.com/questions/12333112/qml-animations-visible-property-changes