This repository has been archived by the owner on Apr 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
output.html
111 lines (94 loc) · 4.11 KB
/
output.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<body>
<style>
.preview {
width: 48px;
height: 27px;
background: black;
/* border: 5px solid black; */
margin: 0 0 8px;
display: block;
}
.textarea textarea {
width: 100%;
height: 100px;
}
</style>
<p>SVG rendered by Lottie</p>
<div id="elLottie" class="preview"></div>
<p>HTML version of SVG rendered by Lottie</p>
<div class="textarea"><textarea id="elSvg"></textarea></div>
<p>Serialized version of the SVG rendered by Lottie</p>
<div class="textarea"><textarea id="elSerializedSvg"></textarea></div>
<p>Base64 encoded version of the above serialized SVG</p>
<div class="textarea"><textarea id="elEncodedSvg"></textarea></div>
<p>Image created from Base64 encoded version and used as Pixi texture source</p>
<div id="elTextureSource" class="preview"></div>
<p>Texture rendered on 2D rendering context</p>
<canvas id="el2DCanvas" class="preview" width="48" height="27"></canvas>
<p>Texture rendered on WebGL rendering context</p>
<canvas id="elWebGLCanvas" class="preview" width="48" height="27"></canvas>
<script src="https://cdn.jsdelivr.net/npm/pixi.js-legacy@5.3.11/dist/pixi-legacy.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
<script>
const path = 'https://storage.googleapis.com/lumen5-prod-lottie/Saturate/Saturate-Title1-Land.json';
const width = 48;
const height = 27;
const elLottie = document.getElementById('elLottie');
const elSvg = document.getElementById('elSvg');
const elSerializedSvg = document.getElementById('elSerializedSvg');
const elEncodedSvg = document.getElementById('elEncodedSvg');
const elTextureSource = document.getElementById('elTextureSource');
const el2DCanvas = document.getElementById('el2DCanvas');
const elWebGLCanvas = document.getElementById('elWebGLCanvas');
const ctx = el2DCanvas.getContext('2d');
const gl = elWebGLCanvas.getContext('webgl');
const app = new PIXI.Application({ width, height, view: elWebGLCanvas });
// console.log(app.renderer.context.webGLVersion);
// console.log(gl.getSupportedExtensions());
var animation = bodymovin.loadAnimation({
container: elLottie,
path,
renderer: 'svg',
loop: false,
autoplay: false,
});
animation.goToAndStop(100, true); // render frame number 100
animation.addEventListener('data_ready', () => {
console.log('ready');
});
animation.addEventListener('enterFrame', () => {
console.log('enterFrame');
// render();
});
animation.addEventListener('DOMLoaded', () => {
console.log('DOMLoaded');
render();
});
function render() {
const svg = animation.renderer.svgElement;
svg.setAttribute('width', width);
svg.setAttribute('height', height);
elSvg.value = svg.outerHTML;
const serializedSvg = new XMLSerializer().serializeToString(svg);
elSerializedSvg.value = serializedSvg;
const imageSrc = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(serializedSvg)))}`;
elEncodedSvg.value = imageSrc;
const image = new Image();
image.onload = function () {
console.log('image loaded');
ctx.drawImage(image, 0, 0, image.width, image.height);
const resource = new PIXI.resources.ImageResource(image);
const baseTexture = new PIXI.BaseTexture(resource);
const texture = new PIXI.Texture(baseTexture);
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);
};
image.src = imageSrc;
elTextureSource.innerHTML = '';
elTextureSource.appendChild(image);
}
</script>
</body>
</html>