add two animations for the example
diff --git a/player/index.html b/player/index.html
index cc6f98a..c377efd 100644
--- a/player/index.html
+++ b/player/index.html
@@ -42,6 +42,11 @@
<!-- endbuild -->
</head>
<body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:800px;height:800px;background-color:#333;display:inline-block" class="bodymovin" data-bm-path="exports/handicap" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div>
+<div style="width:800px;height:800px;background-color:#333;display:inline-block" class="bodymovin" data-bm-path="exports/handi1" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div>
+
+<nav style="position:absolute;top:10px;right:10px;cursor:pointer">
+ <div class="button" data-anim="exports/handi1" style="height:30px;width:30px;background:red;"></div>
+ <div class="button" data-anim="exports/handi2" style="height:30px;width:30px;background:blue;"></div>
+</nav>
</body>
</html>
diff --git a/player/js/index.js b/player/js/index.js
index c3c082e..ae73b6b 100644
--- a/player/js/index.js
+++ b/player/js/index.js
@@ -6,6 +6,24 @@
element: document.getElementsByClassName('bodymovin')[0],
engine: 'svg'
});
+
+ var buttons = document.getElementsByClassName('button');
+ console.log(buttons);
+ for (var i = 0; i < buttons.length; i++){
+ buttons[i].addEventListener('click', onButtonClick);
+ }
+ function onButtonClick (e) {
+
+ bodyMovin.destroy();
+
+ bodyMovin = new BodyMovin({
+ element: document.getElementsByClassName('bodymovin')[0],
+ engine: 'svg',
+ src: e.currentTarget.getAttribute('data-anim') + '/data.json'
+ });
+
+ }
+
}, false);
\ No newline at end of file
diff --git a/player/js/interface/AnimationItem.js b/player/js/interface/AnimationItem.js
index 7fb7e84..7449ebf 100644
--- a/player/js/interface/AnimationItem.js
+++ b/player/js/interface/AnimationItem.js
@@ -4,7 +4,8 @@
options = {};
}
- element = options.element;
+ this.element = options.element;
+ this.src = options.src;
this._init();
@@ -60,7 +61,7 @@
this.isLoaded = false;
this.isPaused = false;
- this.setData(element);
+ this.setData(this.element);
}
@@ -222,6 +223,8 @@
params.path = wrapperAttributes.getNamedItem('data-animation-path') ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') ? wrapperAttributes.getNamedItem('data-bm-path').value : wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';
params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value : 'canvas';
+ params.path = this.src;
+
var loop = wrapperAttributes.getNamedItem('data-anim-loop') ? wrapperAttributes.getNamedItem('data-anim-loop').value : wrapperAttributes.getNamedItem('data-bm-loop') ? wrapperAttributes.getNamedItem('data-bm-loop').value : wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';
if (loop === '') {
diff --git a/player/js/interface/BodyMovin.js b/player/js/interface/BodyMovin.js
index 9d99845..8ef43cf 100644
--- a/player/js/interface/BodyMovin.js
+++ b/player/js/interface/BodyMovin.js
@@ -67,7 +67,8 @@
BodyMovin.prototype._init = function () {
this.animationItem = new AnimationItem({
- element: this.element
+ element: this.element,
+ src: this.src
});
if (this.data){
@@ -154,6 +155,12 @@
}
+BodyMovin.prototype.destroy = function (elapsedTime) {
+
+ this.element.innerHTML = '';
+
+}
+
// -------------------------------------------------------------------o Getters
BodyMovin.prototype.getDuration = function () {