杂乱无章的动画

Question

Clutter 没有做完整的动画。

这是我当前的代码：

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()

看看我的问题的这个说明：

对于那些不喜欢 gif 的人，这里是我用文字描述的问题： 我希望演员从中间向右移动，然后一直向左移动。相反，它只是从中间直接向左移动。

这是什么原因造成的，我该如何解决？

Answer 1

就像 ClutterActor.animate() 的文档所说：

在一个已经被动画化的actor上调用这个函数将会 使当前动画随着新的最终值而改变， 新的宽松模式和新的持续时间 https://developer.gnome.org/clutter/stable/clutter-Implicit-Animations.html#clutter-actor-animate

表示如下代码：

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

完全等同于：

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

这就是你所看到的。

如果你想链接两个动画，你必须连接到ClutterAnimation的completed信号，使用connect_after函数，这样Clutter才能创建一个新动画：

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

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

我想指出 animatev() 和 ClutterAnimation 已被弃用；它们可以通过使用显式 Clutter.KeyframeTransition 或隐式转换来替换，例如：

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()

它可以比这更复杂；您还需要记住断开transition-stopped::x 信号处理程序，并恢复缓动状态以避免每次更改演员的状态时创建隐式动画，但我将把它作为练习留给读者。

Answer 2

试试下面的代码：

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])
    )

Answer 3

当你对一行执行这些操作时

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

Clutter 无需等待对方完成即可完成这两件事。这意味着在第二个命令接管之前，第一个命令几乎没有时间移动代理。

这里是一个使用“完成”信号的例子：

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