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

95
web/example/index.html
View file

@ -9,13 +9,14 @@
<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="playAnimation()">Play</button>
<button onclick="save2gif()">save2gif</button>
<button onclick="save2tvg()">save2tvg</button>
<button onclick="save2png()">save2png</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)">
@ -23,7 +24,7 @@
<div>
<label for="loopCheckbox">Loop</label>
<input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)">
<input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)" checked>
</div>
<div>
@ -37,17 +38,31 @@
</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 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');
@ -57,26 +72,57 @@
}
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() {
animation.destory();
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();
@ -84,6 +130,11 @@
}
function changeSpeed(speed) {
if (!animation) {
alert('Animation is not created yet');
return;
}
animation.setSpeed(speed);
if (animation.currentState !== 'playing') {
animation.play();
@ -91,22 +142,24 @@
}
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 save2gif() {
animation.save('gif');
function save(ext) {
if (!animation) {
alert('Animation is not created yet');
return;
}
function save2tvg() {
animation.save('tvg');
}
function save2png() {
animation.save('png');
animation.save(ext);
}
</script>
</body>