mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-13 19:44:28 +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
3fe025f81f
commit
e67add4d87
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