mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-14 12:04:29 +00:00
web: Add examples
- `index.html` : basic example - `benchmark.html` : to check FPS, memory usage, latency(ms)
This commit is contained in:
Jinny You
Hermet Park
parent
306a30185f
commit
e3f3a97f8d
2 changed files with 380 additions and 0 deletions
277
web/example/benchmark.html
Normal file
277
web/example/benchmark.html
Normal file
|
|
@ -0,0 +1,277 @@
|
||||||
|
<!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>
|
||||||
103
web/example/index.html
Normal file
103
web/example/index.html
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>ThorVG Lottie Player</title>
|
||||||
|
<meta name="description" content="A web lottie player using ThorVG as a renderer" />
|
||||||
|
<script src="../dist/lottie-player.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<button onclick="pauseAnimation()">Pause</button>
|
||||||
|
<button onclick="stopAnimation()">Stop</button>
|
||||||
|
<button onclick="destroyAnimation()">Destroy</button>
|
||||||
|
<button onclick="playAnimation()">Play</button>
|
||||||
|
<button onclick="save2gif()">save2gif</button>
|
||||||
|
<div>
|
||||||
|
<label for="reverseCheckbox">Reverse</label>
|
||||||
|
<input type="checkbox" id="reverseCheckbox" onchange="toggleReverse(event)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="loopCheckbox">Loop</label>
|
||||||
|
<input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="speedRange">Speed</label>
|
||||||
|
<input type="range" id="speedRange" min="0.1" max="2" step="0.1" value="1" onchange="changeSpeed(this.value)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="frameRange">Frame</label>
|
||||||
|
<input type="range" id="frameRange" min="1" max="100" step="1" value="1" onchange="seekFrame(this.value)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<lottie-player
|
||||||
|
autoPlay
|
||||||
|
intermission="1000"
|
||||||
|
mode="normal"
|
||||||
|
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||||
|
style="width: 500px; height: 500px;"
|
||||||
|
></lottie-player>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
let animation;
|
||||||
|
window.onload = function() {
|
||||||
|
animation = document.querySelector('lottie-player');
|
||||||
|
const frameRange = document.querySelector('#frameRange');
|
||||||
|
|
||||||
|
animation.addEventListener('frame', function(e) {
|
||||||
|
frameRange.value = e.detail.frame / animation.totalFrame * 100;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function pauseAnimation() {
|
||||||
|
animation.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAnimation() {
|
||||||
|
animation.stop();
|
||||||
|
}
|
||||||
|
|
||||||
|
function seekFrame(framePercentage) {
|
||||||
|
animation.seek(animation.totalFrames * framePercentage / 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroyAnimation() {
|
||||||
|
animation.destory();
|
||||||
|
}
|
||||||
|
|
||||||
|
function playAnimation() {
|
||||||
|
animation.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleLoop(e) {
|
||||||
|
animation.setLooping(e.target.checked);
|
||||||
|
if (animation.currentState !== 'playing') {
|
||||||
|
animation.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeSpeed(speed) {
|
||||||
|
animation.setSpeed(speed);
|
||||||
|
if (animation.currentState !== 'playing') {
|
||||||
|
animation.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleReverse(e) {
|
||||||
|
animation.setDirection(e.target.checked ? -1 : 1);
|
||||||
|
if (animation.currentState !== 'playing') {
|
||||||
|
animation.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function save2gif() {
|
||||||
|
animation.save('gif');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue