mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-08 21:53:41 +00:00
e3f3a97f8d
- `index.html` : basic example - `benchmark.html` : to check FPS, memory usage, latency(ms)
277 lines
7.5 KiB
HTML
277 lines
7.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>@thorvg/lottie-player | Benchmark</title>
|
|
|
|
<style>
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
padding: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
canvas {
|
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|
|
<script
|
|
src="../dist/lottie-player.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<h1>ThorVG Web</h1>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<lottie-player
|
|
autoPlay
|
|
loop
|
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
|
style="width: 300px; height: 300px"
|
|
></lottie-player>
|
|
|
|
<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
|
|
<script>
|
|
var statsFPS = new Stats();
|
|
statsFPS.showPanel(0); // 0: fps
|
|
statsFPS.dom.style.cssText =
|
|
"position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
|
|
document.body.appendChild(statsFPS.dom);
|
|
|
|
var statsMS = new Stats();
|
|
statsMS.showPanel(1); // 1: ms
|
|
statsMS.dom.style.cssText =
|
|
"position:fixed;top:0;left:80px;cursor:pointer;opacity:0.9;z-index:10000";
|
|
document.body.appendChild(statsMS.dom);
|
|
|
|
var statsMB;
|
|
if (self.performance && self.performance.memory) {
|
|
statsMB = new Stats();
|
|
statsMB.showPanel(2); // 2: mb
|
|
statsMB.dom.style.cssText =
|
|
"position:fixed;top:0;left:160px;cursor:pointer;opacity:0.9;z-index:10000";
|
|
document.body.appendChild(statsMB.dom);
|
|
}
|
|
|
|
function animate() {
|
|
statsFPS.begin();
|
|
statsMS.begin();
|
|
if (statsMB) statsMB.begin();
|
|
|
|
statsFPS.end();
|
|
statsMS.end();
|
|
if (statsMB) statsMB.end();
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
</script>
|
|
</body>
|
|
</html>
|