精灵动画

基于精灵的动画，具有灵活的过渡效果

精灵引擎

Qt Quick 的精灵引擎是一个随机状态机，结合了能够将包含动画多个帧的图像进行分割的能力。

状态机

精灵引擎的一个主要功能是其内部状态机。这与Qt Quick中的状态和转换不同，更像是一个传统的状态机。精灵可以有加权的转换到其他精灵，或者回到自己。当精灵动画结束时，精灵引擎将根据刚刚结束的精灵可用的加权转换随机选择下一个精灵。

您可以通过两种方式影响当前正在播放的精灵。您可以任意强制它立即开始播放任何精灵，或者您可以告诉它逐渐过渡到给定的精灵。如果您指示它逐渐过渡，那么它将通过使用最少数量的中间精灵（但忽略相对权重）进行有效的状态转换来达到目标精灵。这使您可以轻松地在两个不同的精灵之间插入过渡动画。

../_images/spriteenginegraph.png

作为一个例子，考虑上面的图表，它展示了一个假设的2D平台游戏角色的精灵。角色开始时显示站立状态。从这个状态开始，除非有外部输入，否则他将过渡到等待动画、行走动画，或者再次播放站立动画。因为这些过渡的权重分别为一、零和三，所以当站立动画结束时，他有四分之一的机会播放等待动画，以及四分之三的机会再次播放站立动画。这使得角色在等待时具有稍微动画化和可变的行为。

因为有一个零权重的过渡到行走动画，站立动画通常不会过渡到那里。但如果你将目标动画设置为行走动画，它会在完成站立动画后播放行走动画。如果它之前处于等待动画中，它会先完成播放该动画，然后播放站立动画，接着播放行走动画。然后它会继续播放行走动画，直到目标动画被取消设置，此时它会在完成行走动画后切换到站立动画。

如果你将目标状态设置为跳跃动画，它会在播放跳跃动画之前完成行走动画。因为跳跃动画不会过渡到其他状态，它会继续播放跳跃动画，直到状态被强制改变。在这个例子中，你可以将其设置回行走并将目标动画更改为行走或为空（这将导致它在行走动画之后播放站立动画）。请注意，通过强制设置动画，你可以立即开始播放动画。

输入格式

精灵引擎接受的文件格式与其他QML类型（如Image）接受的文件格式相同。然而，为了对图像进行动画处理，精灵引擎要求图像文件包含动画的所有帧。它们应该排列在一条连续的线上，这条线可以从文件的右边缘换行到从文件左边缘开始的下方行（并且直接放置在前一行的下方）。

../_images/spritecutting.png

举个例子，以上图为例。现在，只考虑黑色数字，并假设每个方块是40x40像素。通常，图像是从左上角开始读取的。如果你将帧大小指定为40x40像素，并且帧数为8，那么它将按照编号顺序读取帧。左上角的帧将是第一帧，右上角的帧将是第五帧，然后它将换到下一行（在文件中的像素位置0,40）读取第六帧。它将在标记为8的帧之后停止读取，如果在第四帧下方的方块中有任何图像数据，则不会包含在动画中。

可以从任意偏移量加载动画，但它们仍将遵循相同的模式。现在考虑红色的数字。如果我们指定动画从像素位置120,0开始，帧数为5，帧大小与之前相同，那么它将按照红色编号加载帧。图像的前120x40部分将不会被使用，因为它从120,0的位置开始读取40x40的块。当它到达160,0的文件末尾时，它从0,40开始读取下一行。

蓝色数字显示如果您尝试加载从40,40开始的两个该大小的帧时的帧编号。请注意，可以从一个图像文件中加载多个精灵。红色、蓝色和黑色数字都可以作为单独的动画加载到同一个精灵引擎中。以下代码根据图像加载动画。它还指定动画应以每秒20帧的速度播放。

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

一个动画中的帧必须大小相同。然而，同一文件中的多个动画则不需要。没有指定frameCount的精灵会假设它们占据整个文件，你必须指定帧大小。没有指定帧大小的精灵会假设它们是正方形并占据整个文件而不进行换行，你必须指定帧数。

精灵引擎内部复制并切割图像以适应更易于阅读的内部格式，这导致了一些图形内存限制。因为它要求单个引擎的所有精灵都位于同一纹理中，尝试加载许多不同的动画可能会遇到嵌入式设备上的纹理内存限制。在这些情况下，控制台将输出包含最大纹理大小的警告。

有几种工具可以帮助将一组图像转换为精灵表。以下是一些示例：

使用精灵引擎的QML类型

精灵引擎的精灵可以使用Sprite类型来定义。此类型包括输入参数，以及动画的长度和到其他动画的加权过渡。它纯粹是一个数据类，不渲染任何内容。

SpriteSequence 是一种使用精灵引擎来绘制其中定义的精灵的类型。它是一个独立且自包含的精灵引擎，不与其他精灵引擎交互。Sprite 类型可以在使用精灵引擎的类型之间共享，但这不会自动完成。因此，如果你在一个 SpriteSequence 中定义了一个精灵，你需要在另一个 SpriteSequence 的精灵属性中重新定义它（或引用相同的 Sprite 类型）以便过渡到该动画。

此外，ImageParticle 可以使用 Sprite 类型来定义每个粒子的精灵。这同样是每种类型的单个精灵引擎。它的工作方式类似于 SpriteSequence，但它还具有由 ImageParticle 类型提供的参数化可变性。

AnimatedSprite 类型

对于不需要在动画之间过渡的用例，请考虑使用AnimatedSprite类型。此类型以相同的输入格式显示精灵动画，但一次只能显示一个。它还提供了更细粒度的手动控制，因为没有精灵引擎在幕后管理时间和过渡。