| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <meta charset="UTF-8"> |
| <head> |
| <style> |
| |
| .bm_color1 { |
| fill: #EC592B; |
| stroke: #EC592B; |
| } |
| |
| .bm_color2 { |
| fill: #F8C916; |
| stroke: #F8C916; |
| } |
| |
| .bm_color3 { |
| fill: #3CC6F2; |
| stroke: #3CC6F2; |
| } |
| |
| .bm_color4 { |
| fill: #7A54A2; |
| stroke: #7A54A2; |
| } |
| |
| body{ |
| background-color:#ccc; |
| margin: 0px; |
| height: 100%; |
| overflow: hidden; |
| } |
| #bodymovin{ |
| background-color:#fff; |
| width:300px; |
| height:300px; |
| /*width:800px; |
| height:500px;*/ |
| display:block; |
| overflow: hidden; |
| transform: translate3d(0,0,0); |
| margin: auto; |
| opacity: 1; |
| } |
| |
| rect{ |
| /* opacity: .5!important;*/ |
| } |
| |
| svg{ |
| /*border: 1px solid red;*/ |
| } |
| |
| .rbt-black{ |
| font-weight: 900; |
| font-family: 'Roboto', sans-serif; |
| } |
| |
| .strokeClase1, .fillClase1{ |
| fill: red; |
| stroke:aquamarine; |
| stroke-opacity: 0;; |
| } |
| |
| </style> |
| <!-- build:js bodymovin.js --> |
| <script src="js/main.js"></script> |
| <script src="js/utils/common.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/MatrixManager.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/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/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/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/elements/htmlElements/HImageElement.js"></script> |
| <script src="js/elements/htmlElements/HCameraElement.js"></script> |
| <script src="js/animation/AnimationManager.js"></script> |
| <script src="js/animation/AnimationItem.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/expressions/LayerInterface.js"></script> |
| <!-- endbuild --> |
| <script src="js/module.js"></script> |
| <script src="http://lab.nearpod.com/bodymovin/demo/colors/jscolor.min.js"></script> |
| <!-- <script src="bodymovin.js"></script> --> |
| </head> |
| <body> |
| <div class="colorControls"> |
| <input class="jscolor" value="EC592B" id="color1"> |
| <input class="jscolor" value="F8C916" id="color2"> |
| <input class="jscolor" value="3CC6F2" id="color3"> |
| <input class="jscolor" value="7A54A2" id="color4"> |
| </div> |
| <div id="bodymovin"></div> |
| |
| <script> |
| var sheet = document.styleSheets[0]; |
| var rules = sheet.cssRules || sheet.rules; |
| var color1 = document.getElementById('color1'); |
| var color2 = document.getElementById('color2'); |
| var color3 = document.getElementById('color3'); |
| var color4 = document.getElementById('color4'); |
| |
| |
| |
| function changeRuleColor(rule, color) { |
| rules[rule].style.fill = '#' + color; |
| rules[rule].style.stroke = '#' + color; |
| } |
| |
| function checkColor() { |
| changeRuleColor(0, color1.value); |
| changeRuleColor(1, color2.value); |
| changeRuleColor(2, color3.value); |
| changeRuleColor(3, color4.value); |
| } |
| |
| setInterval(checkColor, 10); |
| |
| var bodymovinContainer = document.getElementById('bodymovin'); |
| var count = 0; |
| var animData = { |
| container: document.getElementById('bodymovin'), |
| renderer: 'svg', |
| loop: true, |
| prerender: false, |
| autoplay: true, |
| autoloadSegments: false, |
| //animationData: anim2 |
| path: 'exports/render/gift.json' |
| }; |
| |
| var anim; |
| |
| anim = bodymovin.loadAnimation(animData); |
| |
| </script> |
| </body> |
| </html> |
