mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-08 05:33:36 +00:00
166 lines
No EOL
4.4 KiB
HTML
166 lines
No EOL
4.4 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="playAnimation()">Play</button>
|
|
<button onclick="pauseAnimation()">Pause</button>
|
|
<button onclick="stopAnimation()">Stop</button>
|
|
<button onclick="createAnimation()">Create</button>
|
|
<button onclick="destroyAnimation()">Destroy</button>
|
|
<button onclick="save('gif')">save2gif</button>
|
|
<button onclick="save('tvg')">save2tvg</button>
|
|
<button onclick="save('png')">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)" checked>
|
|
</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>
|
|
|
|
<div class="lottie"></div>
|
|
</div>
|
|
<script>
|
|
let animation;
|
|
window.onload = function() {
|
|
createAnimation();
|
|
}
|
|
|
|
function createAnimation() {
|
|
if (animation) {
|
|
alert('Animation already exists');
|
|
return;
|
|
}
|
|
|
|
const lottie = document.querySelector('.lottie');
|
|
animation = document.createElement('lottie-player');
|
|
|
|
animation.autoPlay = true;
|
|
animation.loop = true;
|
|
animation.src = "https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json";
|
|
animation.style.width = "500px";
|
|
animation.style.height = "500px";
|
|
|
|
lottie.appendChild(animation);
|
|
|
|
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() {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.pause();
|
|
}
|
|
|
|
function stopAnimation() {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.stop();
|
|
}
|
|
|
|
function seekFrame(framePercentage) {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.seek(animation.totalFrames * framePercentage / 100);
|
|
}
|
|
|
|
function destroyAnimation() {
|
|
if (!animation) {
|
|
alert('No animation to destroy');
|
|
return;
|
|
}
|
|
|
|
animation.destroy();
|
|
animation = undefined;
|
|
}
|
|
|
|
function playAnimation() {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.play();
|
|
}
|
|
|
|
function toggleLoop(e) {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.setLooping(e.target.checked);
|
|
if (animation.currentState !== 'playing') {
|
|
animation.play();
|
|
}
|
|
}
|
|
|
|
function changeSpeed(speed) {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.setSpeed(speed);
|
|
if (animation.currentState !== 'playing') {
|
|
animation.play();
|
|
}
|
|
}
|
|
|
|
function toggleReverse(e) {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.setDirection(e.target.checked ? -1 : 1);
|
|
if (animation.currentState !== 'playing') {
|
|
animation.play();
|
|
}
|
|
}
|
|
|
|
function save(ext) {
|
|
if (!animation) {
|
|
alert('Animation is not created yet');
|
|
return;
|
|
}
|
|
|
|
animation.save(ext);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |