| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <meta charset="UTF-8"> |
| <head> |
| <style> |
| body{ |
| background-color:#333; |
| margin: 0px; |
| height: 100%; |
| font-family: sans-serif; |
| font-size: 10px; |
| overflow: hidden; |
| } |
| #bodymovin{ |
| background-color:#000; |
| width:533px; |
| height:300px; |
| display:block; |
| overflow: hidden; |
| transform: translate3d(0,0,0); |
| margin: auto; |
| opacity: 1; |
| } |
| |
| </style> |
| <!-- build:js bodymovin.js --> |
| <script src="js/main.js"></script> |
| <script src="js/3rd_party/transformation-matrix.js"></script> |
| <script src="js/utils/MatrixManager.js"></script> |
| <script src="js/utils/animationFramePolyFill.js"></script> |
| <script src="js/utils/common.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/text_helper.js"></script> --> |
| <script src="js/utils/FontManager.js"></script> |
| <script src="js/utils/expressions/ExpressionManager.js"></script> |
| <script src="js/utils/expressions/ExpressionComp.js"></script> |
| <script src="js/utils/expressions/ShapeInterface.js"></script> |
| <script src="js/utils/PropertyFactory.js"></script> |
| <script src="js/renderers/SVGRenderer.js"></script> |
| <script src="js/renderers/CanvasRenderer.js"></script> |
| <script src="js/renderers/HybridRenderer.js"></script> |
| <script src="js/mask.js"></script> |
| <script src="js/effects/SliderEffect.js"></script> |
| <script src="js/effects.js"></script> |
| <script src="js/elements/BaseElement.js"></script> |
| <script src="js/elements/svgElements/SVGBaseElement.js"></script> |
| <script src="js/elements/TextElement.js"></script> |
| <script src="js/elements/svgElements/SVGTextElement.js"></script> |
| <script src="js/elements/PlaceHolderElement.js"></script> |
| <script src="js/elements/CompElement.js"></script> |
| <script src="js/elements/ImageElement.js"></script> |
| <script src="js/elements/ShapeElement.js"></script> |
| <script src="js/elements/ShapeItemElement.js"></script> |
| <script src="js/elements/SolidElement.js"></script> |
| <script src="js/elements/canvasElements/CVBaseElement.js"></script> |
| <script src="js/elements/canvasElements/CVCompElement.js"></script> |
| <script src="js/elements/canvasElements/CVImageElement.js"></script> |
| <script src="js/elements/canvasElements/CVMaskElement.js"></script> |
| <script src="js/elements/canvasElements/CVShapeElement.js"></script> |
| <script src="js/elements/canvasElements/CVShapeItemElement.js"></script> |
| <script src="js/elements/canvasElements/CVSolidElement.js"></script> |
| <script src="js/elements/canvasElements/CVTextElement.js"></script> |
| <script src="js/elements/htmlElements/HBaseElement.js"></script> |
| <script src="js/elements/htmlElements/HSolidElement.js"></script> |
| <script src="js/elements/htmlElements/HCompElement.js"></script> |
| <script src="js/elements/htmlElements/HShapeElement.js"></script> |
| <script src="js/elements/htmlElements/HTextElement.js"></script> |
| <script src="js/animation/AnimationManager.js"></script> |
| <script src="js/animation/AnimationItem.js"></script> |
| <script src="js/module.js"></script> |
| <!-- endbuild --> |
| <!-- <script src="bodymovin.js"></script> --> |
| <script src="exports/splitted/data.js"></script> |
| <script src="exports/splitted/data_0.js"></script> |
| <script src="exports/splitted/data_1.js"></script> |
| <script src="exports/splitted/data_2.js"></script> |
| <script src="exports/splitted/data_3.js"></script> |
| <script src="exports/splitted/data_4.js"></script> |
| <script src="exports/splitted/data_5.js"></script> |
| <script src="exports/splitted/data_6.js"></script> |
| <script src="exports/splitted/data_7.js"></script> |
| <script src="exports/splitted/data_8.js"></script> |
| </head> |
| <body> |
| <canvas id="cvs" width="100" height="100"></canvas> |
| <div id="bodymovin"></div> |
| |
| <script> |
| |
| var animData = { |
| container: document.getElementById('bodymovin'), |
| renderer: 'svg', |
| loop: true, |
| prerender: false, |
| autoplay: true, |
| animationData: bmsmd |
| }; |
| var anim = bodymovin.loadAnimation(animData); |
| setTimeout(function(){ |
| anim.includeLayers(bmsmd0); |
| anim.includeLayers(bmsmd1); |
| anim.includeLayers(bmsmd2); |
| anim.includeLayers(bmsmd3); |
| anim.includeLayers(bmsmd4); |
| anim.includeLayers(bmsmd5); |
| anim.includeLayers(bmsmd6); |
| anim.includeLayers(bmsmd7); |
| anim.includeLayers(bmsmd8); |
| },100); |
| /*anim.addEventListener('bm:config_ready', configReady); |
| anim.addEventListener('bm:data_ready', dataReady); |
| anim.addEventListener('bm:enterFrame', enterFrame);*/ |
| //anim.play(); |
| //anim.playSegments([0,40],true); |
| </script> |
| </body> |
| </html> |