| <!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', |
| }; |
| 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, |
| }) |
| 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> |
