mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-08 05:33:36 +00:00
113 lines
No EOL
3.2 KiB
HTML
113 lines
No EOL
3.2 KiB
HTML
<!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>
|
|
<button onclick="save2tvg()">save2tvg</button>
|
|
<button onclick="save2png()">save2png</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');
|
|
}
|
|
|
|
function save2tvg() {
|
|
animation.save('tvg');
|
|
}
|
|
|
|
function save2png() {
|
|
animation.save('png');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |