SpriteAnimation 组件

事件

StartAnimation [Data = {Reel}]: 当一个动画开始播放，或者从暂停状态被唤醒时触发

AnimationEnd [Data = { Reel }]: 当动画完成时触发

FrameChange [Data = { Reel }]: 每次当前卷的帧发生变化时触发。

ReelChange [Data = { Reel }]: 当卷轴改变时

用于精灵地图作为帧序列的精灵动画，必须应用于具有精灵地图组件的实体。

要定义一个动画,参见 reel 方法。要播放一个动画,参见 animate 方法。

卷轴是一个包含动画帧和动画当前状态的对象。卷轴对象具有以下属性：

id: (String): 卷轴的名字

frames: (Array): 一个帧序列，格式[xpos, ypos]

currentFrame: (Number): 当前帧的下标索引

easing: (Crafty.easing object): 处理动画内部进度的对象。

duration: (Number): 以毫秒为单位的持续时间。

许多与动画相关的事件都通过一个卷轴对象作为数据。典型情况下，以后可能被实体改变，应该被视为只读数据。如果您希望保存数据，请复制它。

.animationSpeed

动画的回放速度。此属性默认为1。

Back to top

.animate()

public this .animate([String reelId] [, Number loopCount])

reelId: 要播放的动画卷轴的id。如果没有指定，则默认为当前卷。

loopCount: 重复动画次数。使用- 1重复无限次。默认值为1。

要通过 .reel(...) 播放一个先前定义的卷轴，简单的传递名称就可以。如果你希望动画播放多次，请将次数作为附加参数传递。要让动画无限地重复，请传递 -1。

如果当前正在播放另一个动画，它将暂停。

这将始终从头开始播放动画。如果你希望从卷轴恢复当前状态，请使用resumeAnimation().

一旦动画结束，它将保持在最后一帧。

例子

// Define a sprite-map component
Crafty.sprite(16, "images/sprite.png", {
    PlayerSprite: [0,0]
});

// Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely
Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
    .reel('PlayerRunning', 20, 0, 0, 3) // setup animation
    .animate('PlayerRunning', -1); // start animation

Back to top

.getReel()

public Reel .getReel()

[Returns]: 当前卷，如果为 null 则没有活动的卷。

public Reel .getReel(reelId)

reelId: 要获取卷的ID

[Returns]: 指定的卷，不存在时返回 undefined。

Back to top

.isPlaying()

public Boolean .isPlaying([String reelId])

reelId: 我们希望检查的卷ID

[Returns]: 当前动画状态

确定指定的动画当前是否正在播放。如果没有指定reelId，检查是否有任何动画在播放。

例子

myEntity.isPlaying() // is any animation playing
myEntity.isPlaying('PlayerRunning') // is the PlayerRunning animation playing

Back to top

.loops()

public this .loops(Number loopCount)

loopCount: 播放动画的次数

设置动画将循环的次数。如果动画正在进行中调用，则当前状态将被视为第一个循环。

public Number .loops()

[Returns]: 已经播放的次数，如果没有卷处于激活则返回 0

Back to top

.pauseAnimation()

public this .pauseAnimation(void)

暂停当前正在运行的动画，如果没有动画在运行则什么也不做。

Back to top

.reel()

用于定义卷轴，改变活动卷轴，获取活动卷轴的ID。

public this .reel(String reelId, Duration duration, Number fromX, Number fromY, Number frameCount[, Number rowLength])

通过在精灵表上的起始位置和结束位置来定义卷轴。

reelId: 正在创建的动画卷轴的ID

duration: 动画的长度，单位为毫秒。

fromX: 在精灵地图上的起始横坐标 x(x 是精灵地图中精灵的水平单位).

fromY: 在精灵地图上的起始纵坐标 y (y 是精灵地图中精灵的纵向单位). 在动画中进行保持

frameCount: 动画中序列帧的个数。如果是负数，动画会向后播放。

rowLength: 精灵序列中的帧数。当到达当前行结束时，连续帧将自动换行到新行。这是一个可选参数，默认为 Infinity。

public this .reel(String reelId, Duration duration, Array frames)

通过制定的帧序列定义个卷

reelId: 正在创建的动画卷轴的ID

duration: 动画的长度，单位为毫秒

frames: 含 x 和 y 值的序列帧数组：[ [ x1，y1 ]、[ x2，y2 ]，…]（分别在精灵地图的宽度/高度单位）。

public this .reel(String reelId)

切换到指定的卷轴。精灵将更新到卷轴的当前帧。

reelID: 要切换到的ID

public Reel .reel()

[Returns]: 当前卷的ID

一种处理动画卷轴的方法。只能与 Crafty.sprite 方法创建的精灵一起工作。详见 Tween 组件的2D属性动画。

要设置一个动画卷轴，要传递卷轴的名称（用于稍后识别卷轴），或者是绝对精灵位置的数组，或者是精灵地图上的开始 x，精灵地图上的 y，然后是精灵地图上的结束 x。

例子

// Define a sprite-map component
Crafty.sprite(16, "images/sprite.png", {
    PlayerSprite: [0,0]
});

// Define an animation on the second row of the sprite map (fromY = 1)
// from the left most sprite (fromX = 0) to the fourth sprite
// on that row (frameCount = 4), with a duration of 1 second
Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, 0, 1, 4);

// This is the same animation definition, but using the alternative method
Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, [[0, 1], [1, 1], [2, 1], [3, 1]]);

Back to top

.reelPosition()

public this .reelPosition(Integer position)

按帧号设置当前卷轴的位置。

position: 跳转到的帧。当前为零。负值从最后一帧返回。

public this .reelPosition(Number position)

以百分比进度设置当前卷的位置。

position: 0和1之间的非整数。

public this .reelPosition(String position)

跳转到指定位置。目前唯一接受的值是“end”，它将跳转到卷尾。

public Number .reelPosition()

[Returns]: 当前帧号

Back to top

.resetAnimation()

public this .resetAnimation()

将当前动画重置为初始状态。将循环数重置为最后指定值，默认值为1。

既不暂停也不恢复当前动画。

Back to top

.resumeAnimation()

public this .resumeAnimation()

这将恢复当前卷轴动画的当前状态。如果一个卷轴已经播放，或没有当前卷轴，则没有任何效果。