git_clone/thorvg
1
0
Fork 0
mirror of https://github.com/thorvg/thorvg.git synced 2025-06-08 05:33:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

web/examples: added dynamic component creation case

Browse source 
This change would help on testing dynamic creation/deletion of component.
This commit is contained in:
Jinny You 2024-04-18 23:21:41 +09:00 • committed by Hermet Park
parent f960c04474
commit edc63ce28e
1 changed files with 78 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
web/example/index.html
View file

@ -9,13 +9,14 @@
<body> <body>
<div> <div>
<div> <div>
<button onclick="playAnimation()">Play</button>
<button onclick="pauseAnimation()">Pause</button> <button onclick="pauseAnimation()">Pause</button>
<button onclick="stopAnimation()">Stop</button> <button onclick="stopAnimation()">Stop</button>
<button onclick="createAnimation()">Create</button>
<button onclick="destroyAnimation()">Destroy</button> <button onclick="destroyAnimation()">Destroy</button>
<button onclick="playAnimation()">Play</button> <button onclick="save('gif')">save2gif</button>
<button onclick="save2gif()">save2gif</button> <button onclick="save('tvg')">save2tvg</button>
<button onclick="save2tvg()">save2tvg</button> <button onclick="save('png')">save2png</button>
<button onclick="save2png()">save2png</button>
<div> <div>
<label for="reverseCheckbox">Reverse</label> <label for="reverseCheckbox">Reverse</label>
<input type="checkbox" id="reverseCheckbox" onchange="toggleReverse(event)"> <input type="checkbox" id="reverseCheckbox" onchange="toggleReverse(event)">
@ -23,7 +24,7 @@
<div> <div>
<label for="loopCheckbox">Loop</label> <label for="loopCheckbox">Loop</label>
<input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)"> <input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)" checked>
</div> </div>
<div> <div>
@ -37,17 +38,31 @@
</div> </div>
</div> </div>
<lottie-player <div class="lottie"></div>
autoPlay
intermission="1000"
mode="normal"
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
style="width: 500px; height: 500px;"
></lottie-player>
</div> </div>
<script> <script>
let animation; let animation;
window.onload = function() { 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'); animation = document.querySelector('lottie-player');
const frameRange = document.querySelector('#frameRange'); const frameRange = document.querySelector('#frameRange');
@ -57,26 +72,57 @@
} }
function pauseAnimation() { function pauseAnimation() {
animation.pause(); if (!animation) {
alert('Animation is not created yet');
return;
}
animation.pause();
} }
function stopAnimation() { function stopAnimation() {
animation.stop(); if (!animation) {
alert('Animation is not created yet');
return;
}
animation.stop();
} }
function seekFrame(framePercentage) { function seekFrame(framePercentage) {
animation.seek(animation.totalFrames * framePercentage / 100); if (!animation) {
alert('Animation is not created yet');
return;
}
animation.seek(animation.totalFrames * framePercentage / 100);
} }
function destroyAnimation() { function destroyAnimation() {
animation.destory(); if (!animation) {
alert('No animation to destroy');
return;
}
animation.destroy();
animation = undefined;
} }
function playAnimation() { function playAnimation() {
if (!animation) {
alert('Animation is not created yet');
return;
}
animation.play(); animation.play();
} }
function toggleLoop(e) { function toggleLoop(e) {
if (!animation) {
alert('Animation is not created yet');
return;
}
animation.setLooping(e.target.checked); animation.setLooping(e.target.checked);
if (animation.currentState !== 'playing') { if (animation.currentState !== 'playing') {
animation.play(); animation.play();
@ -84,6 +130,11 @@
} }
function changeSpeed(speed) { function changeSpeed(speed) {
if (!animation) {
alert('Animation is not created yet');
return;
}
animation.setSpeed(speed); animation.setSpeed(speed);
if (animation.currentState !== 'playing') { if (animation.currentState !== 'playing') {
animation.play(); animation.play();
@ -91,22 +142,24 @@
} }
function toggleReverse(e) { function toggleReverse(e) {
if (!animation) {
alert('Animation is not created yet');
return;
}
animation.setDirection(e.target.checked ? -1 : 1); animation.setDirection(e.target.checked ? -1 : 1);
if (animation.currentState !== 'playing') { if (animation.currentState !== 'playing') {
animation.play(); animation.play();
} }
} }
function save2gif() { function save(ext) {
animation.save('gif'); if (!animation) {
} alert('Animation is not created yet');
return;
}
function save2tvg() { animation.save(ext);
animation.save('tvg');
}
function save2png() {
animation.save('png');
} }
</script> </script>
</body> </body>