100 lines
2.5 KiB
Plaintext
100 lines
2.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body, html{
|
|
background-color:#fff;
|
|
margin: 0px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#lottie{
|
|
background-color:#fff;
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
overflow: hidden;
|
|
transform: translate3d(0,0,0);
|
|
pointer-events: none;
|
|
/*display:none;*/
|
|
}
|
|
|
|
</style>
|
|
<script src="/lottie.min.js" ></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div id="lottie"></div>
|
|
<script>
|
|
const buildRenderSettings = (searchParams) => {
|
|
const defaultValues = {
|
|
path: '/test/animations/adrock.json',
|
|
renderer: 'svg',
|
|
};
|
|
searchParams.forEach((value, key) => {
|
|
defaultValues[key] = value;
|
|
});
|
|
|
|
return defaultValues;
|
|
};
|
|
</script>
|
|
<script>
|
|
const submitAndWaitForResponse = (currentFrame, isLast) => (
|
|
new Promise((resolve) => {
|
|
window.onMessageReceivedEvent({
|
|
currentFrame,
|
|
isLast,
|
|
});
|
|
resolve();
|
|
})
|
|
);
|
|
</script>
|
|
<script>
|
|
const waitContinueCommand = () => {
|
|
return new Promise((resolve) => {
|
|
window.continueExecution = resolve;
|
|
})
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
window.startProcess = () => {
|
|
const url = new URL(window.location);
|
|
const settings = buildRenderSettings(url.searchParams)
|
|
const animation = lottie.loadAnimation({
|
|
container: document.getElementById('lottie'),
|
|
path: settings.path,
|
|
autoplay: false,
|
|
loop: false,
|
|
renderer: settings.renderer,
|
|
})
|
|
animation.addEventListener('DOMLoaded', async () => {
|
|
window.onAnimationLoaded();
|
|
try {
|
|
let totalFrames = animation.totalFrames;
|
|
let currentFrame = 0;
|
|
while (currentFrame <= totalFrames) {
|
|
await waitContinueCommand();
|
|
animation.goToAndStop(currentFrame, true);
|
|
await submitAndWaitForResponse(
|
|
currentFrame,
|
|
currentFrame === totalFrames,
|
|
);
|
|
currentFrame += 1;
|
|
|
|
}
|
|
} catch (error) {
|
|
console.log('ERROR', error.message);
|
|
}
|
|
})
|
|
}
|
|
// window.startProcess();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |