Clutter messing up animations

Question

Clutter is not doing the full animation.

This is my current code:

from gi.repository import Clutter, Gtk
import sys

def onClick(actor, event):
    actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280])  # clutter does not seem to be running this line
    actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

def main():
    Clutter.init(sys.argv)

    # Colors
    red = Clutter.Color().new(255, 0, 0, 255)
    black = Clutter.Color().new(0, 0, 0, 255)

    # Create Stage
    stage = Clutter.Stage()
    stage.set_title("Basic Usage")
    stage.set_size(400, 200)
    stage.set_color(black)

    # Rectangle Actor
    actor = Clutter.Rectangle()
    actor.set_size(100, 50)
    actor.set_position(150, 100)
    actor.set_color(red)
    actor.set_reactive(True)
    actor.connect("button-press-event", onClick)

    # Add Actor to the Stage
    stage.add_actor(actor)
    stage.connect("destroy", lambda w:  Clutter.main_quit())
    stage.show_all()

    Clutter.main()

if __name__ == '__main__':
    main()

Behold this illustration of my problem:

enter image description here

For those of you who don't like gifs, here is my problem described in words: I want the actor to move from the middle to the right, then all the way to the left. Instead it just moves from the middle straight to the left.

What is causing this, and how can I fix it?

Would you mind switching the order of the animate statements and telling me what it does? I think I know the answer to this. — Stephan, Jul 24 '13 at 04:02
@Stephan Thanks. Switching the two lines makes it move from the middle to the right, instead of the from the middle to the left. — DanielTA, Jul 24 '13 at 04:05
... hell that's how we should explain our questions to each other. +1 just for the gif! — Boris Burkov, Jul 24 '13 at 16:30

score 3 · Accepted Answer · answered Jul 24 '13 at 16:42

like the documentation for ClutterActor.animate() says:

Calling this function on an actor that is already being animated will cause the current animation to change with the new final values, the new easing mode and the new duration https://developer.gnome.org/clutter/stable/clutter-Implicit-Animations.html#clutter-actor-animate

which means that the following code:

actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280])
actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

is exactly equivalent to:

actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

which is what you're seeing.

if you want to chain up two animations you have to connect to the completed signal of ClutterAnimation, using the connect_after function, so that Clutter can create a new animation:

def moveLeft (animation, actor):
    actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280]).connect_after('completed', moveLeft)

I'd like to point out that animatev() and ClutterAnimation are deprecated; they can be replaced by using an explicit Clutter.KeyframeTransition or an implicit transition, for instance:

from gi.repository import Clutter

Clutter.init(None)

stage = Clutter.Stage()
stage.connect('destroy', lambda x: Clutter.main_quit())

actor = Clutter.Actor()
actor.set_background_color(Clutter.Color.get_static(Clutter.StaticColor.RED))
actor.set_reactive(True)
actor.set_size(32, 32)
stage.add_child(actor)
actor.set_position(82, 82)

def moveLeft(actor):
    actor.set_x(20)

def moveRight(actor):

    actor.set_easing_duration(1000)
    actor.set_easing_mode(Clutter.AnimationMode.LINEAR)
    actor.set_x(280)
    actor.connect('transition-stopped::x', lambda a, n, t: moveLeft(actor))

actor.connect('button-press-event', lambda a, e: moveRight(actor))

stage.show()
Clutter.main()

it can be arbitrarily more complex than this; you also need to remember to disconnect the transition-stopped::x signal handler, and restore the easing state to avoid creating implicit animations every time you change the actor's state, but I'll leave that as an exercise to the reader.

score 1 · Answer 2 · answered Jul 24 '13 at 06:32

Try following code:

def onClick(actor, event):
    animation1 = actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280])
    animation1.connect_after(
        'completed',
        lambda animation: actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])
    )

Stephan · Answer 3 · 2013-07-24T16:43:28.973

0

When you do these to lines immediately after each other

def onClick(actor, event):
    actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280])
    actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

Clutter does them both without waiting for the other to finish. This means that the first command has almost no time to move the agent at all before the second command takes over.

Here is an example of using the "completed" signal:

def onClick(actor, event):
    animate(actor)

def animate(actor):
    firstAnimation = actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [280]) 

    firstAnimation.connect_after("completed", moveLeft)

def moveLeft():
    self.actor.animatev(Clutter.AnimationMode.LINEAR, 1000, ["x"], [20])

Here is the documentation on clutter animations
Here is the documentation on the "completed" signal
Here is some working example code

edited Jul 24 '13 at 16:43

answered Jul 24 '13 at 04:18

Stephan

16,509
7
35
61

When I add this between the two lines: while (actor.get_x() < 280): continue My CPU spikes and it never does anything. The actor stays put. – DanielTA Jul 24 '13 at 04:24
@DanielTA I suspected as much, you need to do it the legit way, and not the hack way. I finished the real answer recently – Stephan Jul 24 '13 at 04:33
@DanielTA Sorry for the bad answer, it was just a temporary hack while i submitted this one, please see updated answer. – Stephan Jul 24 '13 at 04:44
You are getting closer, it moves it to the left, but immediately, it doesn't animate. It animates to the right and then just appears on the left side. – DanielTA Jul 24 '13 at 04:45
@DanielTA [here](http://www.eurion.net/python-snippets/snippet/Clutter%20Animation.html) is what i'm trying to emulate Maybe read that and try to tweak? I'll keep looking into it – Stephan Jul 24 '13 at 04:47
Ok. Thanks for spending time on this. – DanielTA Jul 24 '13 at 04:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34029/discussion-between-stephan-and-danielta) – Stephan Jul 24 '13 at 04:58

Clutter messing up animations

3 Answers3