| <!DOCTYPE html> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <style> |
| body, html{ |
| background-color:#ccc; |
| margin: 0px; |
| height: 100%; |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
| |
| #lottie{ |
| background-color:#000; |
| width:960px; |
| height:540px; |
| /*width:360px; |
| height:640px;*/ |
| display:block; |
| overflow: hidden; |
| transform: translate3d(0,0,0); |
| margin: auto; |
| /*display:none;*/ |
| } |
| |
| .botas_loop_3,.botas_loop_2{ |
| display:none |
| } |
| |
| </style> |
| <!-- build:js lottie.js --> |
| <script src="js/main.js"></script> |
| <script src="js/utils/common.js"></script> |
| <script src="js/utils/BaseEvent.js"></script> |
| <script src="js/utils/helpers/arrays.js"></script> |
| <script src="js/utils/helpers/svg_elements.js"></script> |
| <script src="js/utils/helpers/html_elements.js"></script> |
| <script src="js/3rd_party/transformation-matrix.js"></script> |
| <script src="js/3rd_party/seedrandom.js"></script> |
| <script src="js/3rd_party/BezierEaser.js"></script> |
| <script src="js/utils/animationFramePolyFill.js"></script> |
| <script src="js/utils/functionExtensions.js"></script> |
| <script src="js/utils/bez.js"></script> |
| <script src="js/utils/DataManager.js"></script> |
| <script src="js/utils/FontManager.js"></script> |
| <script src="js/utils/PropertyFactory.js"></script> |
| <script src="js/utils/TransformProperty.js"></script> |
| <script src="js/utils/shapes/ShapePath.js"></script> |
| <script src="js/utils/shapes/ShapeProperty.js"></script> |
| <script src="js/utils/shapes/ShapeModifiers.js"></script> |
| <script src="js/utils/shapes/TrimModifier.js"></script> |
| <script src="js/utils/shapes/RoundCornersModifier.js"></script> |
| <script src="js/utils/shapes/RepeaterModifier.js"></script> |
| <script src="js/utils/shapes/ShapeCollection.js"></script> |
| <script src="js/utils/shapes/DashProperty.js"></script> |
| <script src="js/utils/shapes/GradientProperty.js"></script> |
| <script src="js/utils/imagePreloader.js"></script> |
| <script src="js/utils/featureSupport.js"></script> |
| <script src="js/utils/filters.js"></script> |
| <script src="js/utils/text/TextAnimatorProperty.js"></script> |
| <script src="js/utils/text/TextAnimatorDataProperty.js"></script> |
| <script src="js/utils/text/LetterProps.js"></script> |
| <script src="js/utils/text/TextProperty.js"></script> |
| <script src="js/utils/text/TextSelectorProperty.js"></script> |
| <script src="js/utils/pooling/pool_factory.js"></script> |
| <script src="js/utils/pooling/pooling.js"></script> |
| <script src="js/utils/pooling/point_pool.js"></script> |
| <script src="js/utils/pooling/shape_pool.js"></script> |
| <script src="js/utils/pooling/shapeCollection_pool.js"></script> |
| <script src="js/utils/pooling/segments_length_pool.js"></script> |
| <script src="js/utils/pooling/bezier_length_pool.js"></script> |
| <script src="js/renderers/BaseRenderer.js"></script> |
| <script src="js/renderers/SVGRenderer.js"></script> |
| <script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script> |
| <script src="js/renderers/HybridRenderer.js" data-light-skip="true"></script> |
| <script src="js/mask.js"></script> |
| <script src="js/elements/helpers/HierarchyElement.js"></script> |
| <script src="js/elements/helpers/FrameElement.js"></script> |
| <script src="js/elements/helpers/TransformElement.js"></script> |
| <script src="js/elements/helpers/RenderableElement.js"></script> |
| <script src="js/elements/helpers/RenderableDOMElement.js"></script> |
| <script src="js/elements/helpers/shapes/ProcessedElement.js"></script> |
| <script src="js/elements/helpers/shapes/SVGStyleData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGShapeData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGTransformData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGStrokeStyleData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGFillStyleData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGGradientFillStyleData.js"></script> |
| <script src="js/elements/helpers/shapes/SVGGradientStrokeStyleData.js"></script> |
| <script src="js/elements/helpers/shapes/ShapeGroupData.js"></script> |
| <script src="js/elements/BaseElement.js"></script> |
| <script src="js/elements/NullElement.js"></script> |
| <script src="js/elements/svgElements/SVGBaseElement.js"></script> |
| <script src="js/elements/ShapeElement.js"></script> |
| <script src="js/elements/TextElement.js"></script> |
| <script src="js/elements/CompElement.js"></script> |
| <script src="js/elements/ImageElement.js"></script> |
| <script src="js/elements/SolidElement.js"></script> |
| <script src="js/elements/svgElements/SVGCompElement.js"></script> |
| <script src="js/elements/svgElements/SVGTextElement.js"></script> |
| <script src="js/elements/svgElements/SVGShapeElement.js"></script> |
| <script src="js/elements/svgElements/effects/SVGTintEffect.js"></script> |
| <script src="js/elements/svgElements/effects/SVGFillFilter.js"></script> |
| <script src="js/elements/svgElements/effects/SVGStrokeEffect.js"></script> |
| <script src="js/elements/svgElements/effects/SVGTritoneFilter.js"></script> |
| <script src="js/elements/svgElements/effects/SVGProLevelsFilter.js"></script> |
| <script src="js/elements/svgElements/effects/SVGDropShadowEffect.js"></script> |
| <script src="js/elements/svgElements/effects/SVGMatte3Effect.js"></script> |
| <script src="js/elements/svgElements/SVGEffects.js"></script> |
| <script src="js/elements/canvasElements/CVContextData.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVBaseElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVImageElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVCompElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVMaskElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVShapeElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVSolidElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVTextElement.js" data-light-skip="true"></script> |
| <script src="js/elements/canvasElements/CVEffects.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HBaseElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HSolidElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HCompElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HShapeElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script> |
| <script src="js/elements/htmlElements/HEffects.js" data-light-skip="true"></script> |
| <script src="js/animation/AnimationManager.js"></script> |
| <script src="js/animation/AnimationItem.js"></script> |
| <!-- Expressions --> |
| <script src="js/utils/expressions/Expressions.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ExpressionManager.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ExpressionPropertyDecorator.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ExpressionTextPropertyDecorator.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ShapeInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/TextInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/LayerInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/CompInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/TransformInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ProjectInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/EffectInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/MaskInterface.js" data-light-skip="true"></script> |
| <script src="js/utils/expressions/ExpressionValue.js" data-light-skip="true"></script> |
| <script src="js/effects/SliderEffect.js" data-light-skip="true"></script> |
| <script src="js/EffectsManager.js" data-light-skip="true"></script> |
| <!-- end Expressions --> |
| <!-- endbuild --> |
| <script src="js/module.js" data-skip="true"></script> |
| <!-- <script src="lottie.js"></script> --> |
| <!-- <script src="bodymovin_light.js"></script> --> |
| |
| </head> |
| <body> |
| <div id="lottie"></div> |
| <div id="lottie2"></div> |
| <div id="lottie3"></div> |
| |
| <script> |
| 'use strict'; |
| var anim,anim2, anim3; |
| var elem = document.getElementById('lottie') |
| //var elem = createNS('aa') |
| var animData = { |
| container: elem, |
| renderer: 'svg', |
| loop: 5, |
| autoplay: true, |
| rendererSettings: { |
| progressiveLoad:false, |
| }, |
| path: 'exports/catrim/data.json' |
| }; |
| anim = lottie.loadAnimation(animData); |
| anim.addEventListener('DOMLoaded', function() { |
| //anim.setSubframe(false); |
| anim.setSpeed(4); |
| //setTimeout(function(){anim.play()}, 2000); |
| }) |
| var eventListener = anim.addEventListener('enterFrame', function(ev){ |
| if(ev.currentTime >= 50) { |
| //anim.playSegments([0,25], true); |
| //console.log('TI<ME') |
| //anim.setSpeed(-4); |
| eventListener(); |
| } |
| }) |
| var eventListener2 = anim.addEventListener('loopComplete', function(ev) { |
| //console.log('COMPLETE') |
| //anim.playSegments([0,20], true); |
| if (ev.currentLoop === 3) { |
| anim.setSpeed(-4); |
| anim.play(); |
| eventListener2(); |
| } |
| // eventListener2(); |
| }) |
| var eventListener3 = anim.addEventListener('complete', function() { |
| //console.log('COMPLETE') |
| /*setTimeout(function(){ |
| anim.playSegments([0,24], true); |
| },1000)*/ |
| //anim.playSegments([24,0]); |
| //anim.playSegments([0,24], true); |
| eventListener3(); |
| }) |
| window.addEventListener('resize', function(){ |
| anim.resize(); |
| }) |
| /* setTimeout(function(){ |
| anim.resetSegments(); |
| },4000)*/ |
| /*anim2 = lottie.loadAnimation({ |
| container: document.getElementById('lottie2'), |
| renderer: 'svg', |
| loop: true, |
| autoplay: false, |
| rendererSettings: { |
| progressiveLoad:false |
| }, |
| path: 'exports/bm/data.json' |
| }); |
| anim3 = lottie.loadAnimation({ |
| container: document.getElementById('lottie3'), |
| renderer: 'svg', |
| loop: true, |
| autoplay: false, |
| rendererSettings: { |
| progressiveLoad:false |
| }, |
| path: 'exports/catrim/data.json' |
| }); |
| //anim = bodymovin.loadAnimation(animData); |
| var count = 0, debug_print; |
| setTimeout(function(){ |
| anim.addEventListener('DOMLoaded', function() { |
| anim.play(); |
| anim.setSpeed(-20); |
| anim2.play(); |
| anim2.setSpeed(-20); |
| anim3.play(); |
| anim3.setSpeed(20); |
| //anim.playSegments([50,52], true) |
| function retry() { |
| setTimeout(function(){ |
| //%OptimizeFunctionOnNextCall(AnimationItem.prototype.setCurrentRawFrameValue); |
| }, 2000) |
| setTimeout(function(){ |
| //%DebugPrint(AnimationItem.prototype.setCurrentRawFrameValue); |
| //var status = printStatus(AnimationItem.prototype.setCurrentRawFrameValue); |
| if(count < 4) { |
| anim.setSpeed(-Math.random()*10); |
| anim2.setSpeed(Math.random()*10); |
| anim3.setSpeed(-Math.random()*10); |
| count += 1; |
| retry(); |
| } else { |
| anim.stop(); |
| anim2.stop(); |
| anim3.stop(); |
| } |
| }, 4000) |
| } |
| |
| retry(); |
| |
| }) |
| //Check |
| // document.getElementById("bodymovin").style['background-color'] = 'darkblue'; |
| }, 0) |
| |
| function printStatus(fn) { |
| var status = %GetOptimizationStatus(fn); |
| if (status & 1) console.log("function is function"); |
| if (status & 2) console.log("function is never optimized"); |
| if (status & 4) console.log("function is always optimized"); |
| if (status & 8) console.log("function is maybe deoptimized"); |
| if (status & 16) console.log("function is optimized"); |
| if (status & 32) console.log("function is optimized by TurboFan"); |
| if (status & 64) console.log("function is interpreted"); |
| return status; |
| }*/ |
| |
| </script> |
| </body> |
| </html> |