index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. body, html{
  7. background-color:#fff;
  8. margin: 0px;
  9. overflow-x: hidden;
  10. overflow-y: auto;
  11. width: 100%;
  12. height: 100%;
  13. }
  14. #lottie{
  15. background-color:#fff;
  16. width:100%;
  17. height:100%;
  18. display:block;
  19. overflow: hidden;
  20. transform: translate3d(0,0,0);
  21. pointer-events: none;
  22. /*display:none;*/
  23. }
  24. </style>
  25. <script src="/lottie.min.js" ></script>
  26. </head>
  27. <body>
  28. <div id="lottie"></div>
  29. <script>
  30. const buildRenderSettings = (searchParams) => {
  31. const defaultValues = {
  32. path: '/test/animations/adrock.json',
  33. renderer: 'svg',
  34. };
  35. searchParams.forEach((value, key) => {
  36. defaultValues[key] = value;
  37. });
  38. return defaultValues;
  39. };
  40. </script>
  41. <script>
  42. const submitAndWaitForResponse = (currentFrame, isLast) => (
  43. new Promise((resolve) => {
  44. window.onMessageReceivedEvent({
  45. currentFrame,
  46. isLast,
  47. });
  48. resolve();
  49. })
  50. );
  51. </script>
  52. <script>
  53. const waitContinueCommand = () => {
  54. return new Promise((resolve) => {
  55. window.continueExecution = resolve;
  56. })
  57. }
  58. </script>
  59. <script>
  60. window.startProcess = () => {
  61. const url = new URL(window.location);
  62. const settings = buildRenderSettings(url.searchParams)
  63. const animation = lottie.loadAnimation({
  64. container: document.getElementById('lottie'),
  65. path: settings.path,
  66. autoplay: false,
  67. loop: false,
  68. renderer: settings.renderer,
  69. })
  70. animation.addEventListener('DOMLoaded', async () => {
  71. window.onAnimationLoaded();
  72. try {
  73. let totalFrames = animation.totalFrames;
  74. let currentFrame = 0;
  75. while (currentFrame <= totalFrames) {
  76. await waitContinueCommand();
  77. animation.goToAndStop(currentFrame, true);
  78. await submitAndWaitForResponse(
  79. currentFrame,
  80. currentFrame === totalFrames,
  81. );
  82. currentFrame += 1;
  83. }
  84. } catch (error) {
  85. console.log('ERROR', error.message);
  86. }
  87. })
  88. }
  89. // window.startProcess();
  90. </script>
  91. </body>
  92. </html>