-
Notifications
You must be signed in to change notification settings - Fork 0
/
lottie2Sprite.html
71 lines (68 loc) · 2.19 KB
/
lottie2Sprite.html
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
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<title>Generating sprite sheet from a lottie</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: 500px; height: 500px; ">
<lottie-player
renderer="svg"
src=""
style="border: 1px rgba(0, 0,0, 0.1) solid; display: inline-block"
autoplay
/>
</div>
<div
style="width: 500px; margin-top: 30px; display: grid; grid-gap: 10px; grid-template-areas: 'input load' 'imgSize txtImgSize' 'spriteName txtSpriteName' 'convert convert' 'convertPNG convertPNG' 'convertSprite convertSprite'; grid-template-columns: 1fr 150px;"
>
<input
id="lottieUrl"
type="text"
placeholder="URL or Lottie Json"
/>
<button id="load">Load</button>
<div id="imgSize" style="display: flex; gap: 5px">
<input id="imgW" placeholder="image width" type="text" />
<span>x</span>
<input id="imgH" placeholder="image height" type="text" />
</div>
<div id="txtImgSize">Image Size</div>
<input
id="spriteName"
type="text"
placeholder="Sprite name"
/>
<div id="txtSpriteName">Sprite Name</div>
<button
id="convert"
style="grid-area: convert; border: 0; padding: 10px; color: white; background-color: darkblue;"
>
Convert Frame SVGs
</button>
<button
id="convertPng"
style="grid-area: convertPNG; border: 0; padding: 10px; color: white; background-color: green;"
>
Convert Frame PNGs
</button>
<button
id="convertSprite"
style="grid-area: convertSprite; border: 0; padding: 10px; color: white; background-color: darkgoldenrod;"
>
Convert Sprite Sheet
</button>
</div>
<div
id="logs"
style="font-size: 10px; font-family: monospace; position: absolute; top: 10px; right: 10px; width: 500px; height: 500px; overflow-y: scroll;"
></div>
<script src="lottie2Sprite.js" type="module"></script>
</body>
</html>