Sprite 精灵图
Sprite 类用于创建精灵动画，可以从一张包含多个帧的图片中播放动画序列，是 Konva 中专门用于处理精灵动画的形状类。主要功能包括：
- 动画序列管理
- 支持定义多个动画序列
- 每个动画序列由多个帧组成，每帧用 x, y, width, height 坐标定义
- 动画控制
start(): 开始播放动画stop(): 停止动画isRunning(): 检查动画是否正在运行
- 帧率控制
- 可以设置动画的帧率(FPS, Frames Per Second)
- 默认帧率为 17 FPS
构造函数
构造函数传入 config 参数，绿色部分为相对 Shape 构造函数增加的字段。
自带方法
start()
启动精灵动画。
stop()
停止精灵动画。
isRunning()
确定精灵动画是否处于运行状态，返回 true 或 false。
animation(anim)
设置/获取动画键名。
参数：
anim: String，动画键名
例子：
js
// 获取动画键名
var animation = sprite.animation();
// 设置动画键名
sprite.animation("kicking");animations(animations)
获取/设置动画序列映射。
例子：
js
// 获取动画序列映射
var animations = sprite.animations();
// 设置动画序列映射
// prettier-ignore
sprite.animations({
standing: [
// x, y, width, height (6 帧)
0, 0, 49, 109,
52, 0, 49, 109,
105, 0, 49, 109,
158, 0, 49, 109,
210, 0, 49, 109,
262, 0, 49, 109
],
kicking: [
// x, y, width, height (6 帧)
0, 109, 45, 98,
45, 109, 45, 98,
95, 109, 63, 98,
156, 109, 70, 98,
229, 109, 60, 98,
287, 109, 41, 98
]
});frameOffsets(offsets)
获取/设置帧偏移。
例子：
js
// 获取帧偏移
var offsets = sprite.frameOffsets();
// 设置帧偏移
// prettier-ignore
sprite.offsets({
standing: [
// x, y (6 frames)
0, 0,
0, 0,
5, 0,
0, 0,
0, 3,
2, 0
],
kicking: [
// x, y (6 frames)
0, 5,
5, 0,
10, 0,
0, 0,
2, 1,
0, 0
]
})image(image)
获取/设置精灵图来源图片。
frameIndex(frameIndex)
获取/设置帧索引。
例子：
js
// 获取动画帧索引
var frameIndex = sprite.frameIndex();
// 设置动画帧索引
sprite.frameIndex(3);frameRate(frameRate)
获取/设置帧率(FPS)。该值越大，表示精灵图动画越快，该值越小，表示精灵图动画越慢。默认值为 17 FPS。
参数：
frameRate:Integer
例子：
js
// 获取帧率
var frameRate = sprite.frameRate();
// 设置帧率为 2 FPS
sprite.frameRate(2);