Skip to content

Commit 86185e3

Browse files
itanka9itanka9
authored
Lottie markers demos (#27)
* demos
1 parent e2cde0c commit 86185e3

File tree

17 files changed

+298
-1
lines changed

17 files changed

+298
-1
lines changed

‎src/lottie-marker/b.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/lottie-marker/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
8+
9+
<title>Lottie Animation via bodymovin library</title>
10+
<meta name="description" content="Lottie Animation via bodymovin library" />
11+
<meta name="category" content="hidden" />
12+
13+
<style>
14+
html,
15+
body,
16+
#map {
17+
margin: 0;
18+
width: 100%;
19+
height: 100%;
20+
overflow: hidden;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<div id="map"></div>
26+
<canvas id="test"></canvas>
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie_canvas.min.js" integrity="sha512-x8wazqzbgEBzXBSx/mI+hXGwBqEwJshjRMD0gixg/a/jgozX3cz2mxp55Opswr90RxHK/pa1uDwcp/8Ad8Hh3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
28+
<script src="https://mapgl.2gis.com/api/js/v1"></script>
29+
<script src="./index.js"></script>
30+
</body>
31+
</html>

‎src/lottie-marker/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const map = new mapgl.Map('map', {
2+
center: [55.31878, 25.23584],
3+
zoom: 13,
4+
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
5+
});
6+
7+
const marker = new mapgl.HtmlMarker(map, {
8+
coordinates: [55.31878, 25.23584],
9+
interactive: true,
10+
html: '<div style="width:102px;height:102px;"></div>'
11+
});
12+
13+
map.on('styleload', () => {
14+
var animation = bodymovin.loadAnimation({
15+
container: marker.getContent().firstElementChild,
16+
renderer: 'canvas',
17+
loop: true,
18+
autoplay: true,
19+
path: './b.json',
20+
});
21+
})

‎src/lottie-marker/preview.png

394 KB
Loading

‎src/lottie-tex-thorvg/b.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/lottie-tex-thorvg/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="shortcut icon" type="image/png" href="../favicon.png" />
8+
9+
<title>Lottie Animations via ThorVG library</title>
10+
<meta name="description" content="Lottie Animations via ThorVG library" />
11+
<meta name="category" content="hidden" />
12+
13+
<style>
14+
html,
15+
body,
16+
#map {
17+
margin: 0;
18+
width: 100%;
19+
height: 100%;
20+
overflow: hidden;
21+
}
22+
23+
#test {
24+
position: absolute;
25+
top: calc(50vh - 51px);
26+
left: calc(50vw - 51px);
27+
width: 102px;
28+
height: 102px;
29+
visibility: hidden;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div id="map"></div>
35+
<canvas id="test" width="102" height="102"></canvas>
36+
<script src="https://mapgl.2gis.com/api/js/v1"></script>
37+
<script type="module" src="./index.js"></script>
38+
</body>
39+
</html>

‎src/lottie-tex-thorvg/index.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import ThorVG from './thorvg-wasm.js';
2+
3+
const map = (window.map) = new mapgl.Map('map', {
4+
center: [37.60170, 55.73004],
5+
zoom: 19,
6+
pitch: 17,
7+
rotation: 160,
8+
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
9+
});
10+
11+
const _wasmUrl = './thorvg-wasm.wasm';
12+
async function initThorvg () {
13+
const thorvg = await ThorVG({
14+
locateFile: (path, prefix) => {
15+
if (path.endsWith('.wasm')) {
16+
return _wasmUrl;
17+
}
18+
return prefix + path;
19+
}
20+
});
21+
22+
return thorvg;
23+
}
24+
25+
const canvas = document.querySelector('#test');
26+
const dpr = window.devicePixelRatio;
27+
canvas.width = 100 * dpr + 2;
28+
canvas.height = 100 * dpr + 2;
29+
30+
initThorvg()
31+
.then(tvg => {
32+
window.thorvg = tvg;
33+
})
34+
.then(() => fetch('./b.json').then(r => r.arrayBuffer()))
35+
.then(buffer => {
36+
const lottieAnimation = new window.thorvg.TvgLottieAnimation('gl', `#test`);
37+
const isLoaded = lottieAnimation.load(new Uint8Array(buffer), 'json', canvas.width, canvas.height, '');
38+
if (!isLoaded) {
39+
throw new Error('Unable to load an image. Error: ', lottieAnimation.error());
40+
}
41+
42+
const isUpdated = lottieAnimation.update();
43+
if (isUpdated) {
44+
lottieAnimation.render();
45+
}
46+
47+
window.lottieAnimation = lottieAnimation;
48+
});
49+
50+
const raster = new mapgl.Raster(map, {
51+
bounds: {
52+
northEast: [37.6020409731679, 55.7300642168048],
53+
southWest: [37.60157395741118, 55.72982724674528],
54+
},
55+
image: {
56+
url: './raster.jpg',
57+
},
58+
opacity: 0.8,
59+
});
60+
61+
const now =() => performance.now() / 1000;
62+
63+
64+
let tex;
65+
const start = now();
66+
let duration = 0;
67+
let totalFrames = 0;
68+
69+
function renderAndCopyToTexture() {
70+
if (!tex) {
71+
tex = map._impl.modules.imageManager.texturesMap.get("./raster.jpg");
72+
}
73+
const lottieAnimation = window.lottieAnimation;
74+
if (!tex || !lottieAnimation) {
75+
requestAnimationFrame(renderAndCopyToTexture);
76+
return;
77+
}
78+
79+
if (!totalFrames) {
80+
totalFrames = lottieAnimation.totalFrame();
81+
}
82+
83+
if (!duration) {
84+
duration = lottieAnimation.duration();
85+
}
86+
87+
const frame = (((now() - start) % duration) / duration) * totalFrames;
88+
89+
lottieAnimation.frame(frame);
90+
const isUpdated = lottieAnimation.update();
91+
if (isUpdated) {
92+
lottieAnimation.render();
93+
}
94+
95+
tex.subImage(map.getWebGLContext(), canvas, 0, 0);
96+
map.triggerRerender();
97+
98+
requestAnimationFrame(renderAndCopyToTexture);
99+
};
100+
renderAndCopyToTexture();

‎src/lottie-tex-thorvg/preview.png

332 KB
Loading

‎src/lottie-tex-thorvg/raster.jpg

8.04 KB
Loading

‎src/lottie-tex-thorvg/thorvg-wasm.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)