Question

Sorry about my broken English.

I am using a state machine with animations.I want to implement the fade out/in effect.

state1:
opactiy = 0
visible = False

state2:
opactiy = 1
visible = True

state1 –> state2:
Move the widget from bottom to top, set “visible” property to True first, and then set
“opactiy” from 0.0 to 1.0 in 5 seconds.

state2 –> state1:
Move the widget from top to bottom, its “opactiy” is from 1.0 to 0.0 in 5 seconds, and then set the widget’s “visible” property to False.

But the problem is, when state2 to state1, it always set the “visible” property to False first, so what i see is the widget disappear without fade out effect, even if i use QSequentialAnimationGroup and set opactiy_animation first.

How do i get the fade out effect?

The Code:

self.group_p = QtCore.QParallelAnimationGroup()   
self.group_s = QtCore.QSequentialAnimationGroup()
self.group_sr = QtCore.QSequentialAnimationGroup()

goe = QtGui.QGraphicsOpacityEffect()
self.label_arrow.setGraphicsEffect(goe)
animation_o = QtCore.QPropertyAnimation(goe, "opacity")             
animation_g = QtCore.QPropertyAnimation(self.label_arrow, "geometry")
animation_v = QtCore.QPropertyAnimation(self.label_arrow, "visible")

animation_g.setDuration(5000)
animation_g.setEasingCurve(QEasingCurve.OutBounce)
animation_o.setDuration(5000)

self.group_p.addAnimation(animation_g)
self.group_p.addAnimation(animation_o)                                                                     

self.group_s.addAnimation(self.group_p)
self.group_s.addAnimation(animation_v)

self.group_sr.addAnimation(animation_v)
self.group_sr.addAnimation(self.group_p)

self.machine = QtCore.QStateMachine()
state1 = QState(self.machine)
state2 = QState(self.machine)
self.machine.setInitialState(state1)

state1.assignProperty(self.label_arrow, "geometry", QtCore.QRect(self.label_arrow.x(),\
                        self.label_arrow.y()+100, self.label_arrow.width(), self.label_arrow.height()))
state1.assignProperty(self.label_arrow, "visible", False)
state1.assignProperty(goe, "opacity", 0.5)                                      

state2.assignProperty(self.label_arrow, "geometry", self.label_arrow.geometry())
state2.assignProperty(self.label_arrow, "visible", True)
state2.assignProperty(goe, "opacity", 1)                         

transition = state1.addTransition(self.sig_arrow_animate, state2)
transition.addAnimation(self.group_sr)                            

transition2 = state2.addTransition(self.sig_arrow_animate, state1)
transition2.addAnimation(self.group_s) # set visible to False first!
self.machine.start()

Answer 1

You can’t animate the visible property, because bool isn’t a supported type for animations. You should remove it from the animation, and use only assignProperty for that property.

According to the documentation, the end value is also assigned by the QState after the end of the animation. That’s why even though the animation doesn’t work the end value is correct ((edit) and that paragraph was not very helpful, since the animation for the bool is not executed and so the state is changed immediately).

You need to divide state1 in 2 sub-states, the first with the “geometry” and “opacity” properties, and the second, triggered by the signal propertiesAssigned() that is emitted when all the animations for the current state are finished, with the “visible” property.

state1_1 = QState(state1)
state1_2 = QState(state1)
state1.setInitialState(state1_1)

state1_1.assignProperty(self.label_arrow, "geometry", QtCore.QRect(self.label_arrow.x(),\
                        self.label_arrow.y()+100, self.label_arrow.width(), self.label_arrow.height()))
state1_1.assignProperty(goe, "opacity", 0.5) 

state1_2.assignProperty(self.label_arrow, "visible", False)
state1_1.addTransition(state1_1.propertiesAssigned, state1_2)
...