| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <meta charset="UTF-8"> |
| <head> |
| <script src="../old_player/v1/bodymovin.js"></script> |
| <style> |
| body{ |
| font-family: sans-serif; |
| color: #ff9f57; |
| font-weight: bold; |
| } |
| .controllers{ |
| margin-top: 30px; |
| text-align: center; |
| } |
| |
| label{ |
| cursor: pointer; |
| } |
| input{ |
| padding: 10px 0; |
| } |
| |
| </style> |
| </head> |
| <body style="background-color:#666; margin: 0;height: 100%"> |
| <div style="width:100%;height:600px;background-color:#fff;margin:auto" class="bodymovin" data-animation-path="anim" data-bm-player="0" data-anim-type="svg" data-anim-loop="true"></div> |
| <div class="controllers"> |
| <input type="checkbox" id="subframeToggle" value="subframe"><label for="subframeToggle">Enable subframe rendering</label><br /> |
| <input type="range" name="speed" min="0.01" max="2" value="1" step="0.01" id="speedRange" onChange="updateSpeed(this.speed)" onInput="updateSpeed(this.speed)"><br /> |
| <div>Current animation speed: <span id="currentSpeed"></span></div> |
| |
| </div> |
| <script> |
| var subframeToggle = document.getElementById('subframeToggle'); |
| subframeToggle.addEventListener('change',function(){ |
| bodymovin.setSubframeRendering(subframeToggle.checked); |
| }); |
| var speedRange = document.getElementById('speedRange'); |
| function updateSpeed(val){ |
| currentSpeed.innerHTML = speedRange.value; |
| bodymovin.setSpeed(speedRange.value); |
| } |
| var currentSpeed = document.getElementById('currentSpeed'); |
| currentSpeed.innerHTML = speedRange.value; |
| bodymovin.setSpeed(speedRange.value); |
| </script> |
| </body> |
| </html> |
