This repository was archived by the owner on Sep 15, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathkeyframes.spritesheet.js
More file actions
62 lines (55 loc) · 1.83 KB
/
keyframes.spritesheet.js
File metadata and controls
62 lines (55 loc) · 1.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
export default (Keyframes) => {
Keyframes.spriteSheets = {};
Keyframes.spriteSheet = (opts) => {
const defaults = {
name: '',
rows: 1,
cols: 1,
height: 0,
width: 0,
offsetX: 0,
offsetY: 0,
count: (opts.rows * opts.cols),
spriteWidth: (opts.width / opts.cols),
spriteHeight: (opts.height / opts.rows),
loop: true,
};
opts = Object.assign({}, defaults, opts);
Keyframes.spriteSheets[opts.name] = opts;
const spriteStep = 100 / opts.count;
const spriteFrames = {};
let x = opts.offsetX;
let y = opts.offsetY;
for (let i = 0; i < opts.count; i += 1) {
spriteFrames[`${Math.round(spriteStep * i)}%`] = {
'background-position': `-${x}px -${y}px`,
};
if (x >= opts.width - opts.spriteWidth) {
y += opts.spriteHeight;
x = opts.offsetX;
} else {
x += opts.spriteWidth;
}
}
return Object.assign({}, { name: opts.name }, spriteFrames);
};
Keyframes.prototype.playSpriteSheet = function (name, time, loops, keyframes) {
if (keyframes) {
Keyframes.define(keyframes);
}
if (loops) {
if (loops < 0) {
loops = 'infinite';
}
} else {
loops = 'infinite';
}
let animate = `${name} ${time} steps(1) ${loops}`;
const existingAnimation = this.mountedElement.style.animation;
if (existingAnimation && existingAnimation.split(' ')[0] !== 'none') {
animate = `${existingAnimation}, ${animate}`;
}
this.mountedElement.style.animation = animate;
return this;
};
};