bump animejs to one with memory/garbage reduction patches

ngokevin · ngokevin · commit 3ebda564b196 · 2019-02-17T21:21:45.000-08:00
diff --git a/examples/animation/aframe-logo/index.html b/examples/animation/aframe-logo/index.html
@@ -5,6 +5,7 @@
     <title>A-Frame Logo</title>
     <meta name="description" content="A-Frame Logo - A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
+    <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
   </head>
   <body>
     <a-scene vr-mode-ui="enabled: false;"
@@ -16,7 +17,7 @@
           id="tree"
           position="0 10 0"
           animation="property: object3D.position.y; to: 0; dur: 800; easing: easeOutCubic"
-          animation__visible="property: visible; to: true; dur: 1"
+          event-set__loaded="visible: true; _delay: 100"
           gltf-model="#treeModel"
           scale="2.5 2.5 2.5"
           visible="false"></a-mixin>
@@ -32,7 +33,9 @@
       <a-entity id="logo" rotation="0 45 0">
         <!-- Right side -->
         <a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 200; dur: 1000; easing: easeOutCubic"
-                  rotation="-20 0 0" position="0 0 10.75" scale="1 0.0001 1">
+                  rotation="-20 0 0" position="0 0 10.75" scale="1 0.0001 1"
+                  event-set__loaded="visible: true; _delay: 300"
+                  visible="false">
           <a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0">
 
             <!-- Left side -->
@@ -46,7 +49,9 @@
 
         <!-- Cross-bar -->
         <a-entity animation="property: object3D.scale.y; from: 0.0001; to: 1; delay: 800; dur: 600; easing: easeOutCubic"
-                  rotation="-90 0 0" position="0 8 7.5" scale="1 0.0001 1">
+                  rotation="-90 0 0" position="0 8 7.5" scale="1 0.0001 1"
+                  event-set__loaded="visible: true; _delay: 500"
+                  visible="false">
           <a-box width="12.45" depth=".1" height="14" color="#F2E646" position="0 7 .52" shader="flat"></a-box>
           <a-box width="12.5" depth="1" height="14" color="#EF2D5E" position="0 7 0"></a-box>
         </a-entity>
@@ -62,7 +67,7 @@
 
           <!-- Behind the A -->
           <a-box animation="property: object3D.position.z; to: 100; delay: 1000; dur: 36000"
-                 animation__visible="property: visible; from: false; to: true; delay: 1000; dur: 1"
+                 event-set__loaded="visible: true; _delay: 1000"
                  position="10 12 -10" color="white" opacity="0.75" width="6" depth="9" height="4" visible="false"></a-box>
 
           <a-box animation="property: object3D.position.z; to: 120; delay: 200; dur: 52000; easing: linear; loop: true"
@@ -89,7 +94,7 @@
 
         <!-- Trees -->
         <a-entity position="-10 0.2 -10">
-          <a-entity mixin="tree" animation="delay: 650" animation__visible="delay: 800"></a-entity>
+          <a-entity id="tree" mixin="tree" animation="delay: 650" animation__visible="delay: 800"></a-entity>
         </a-entity>
         <a-entity position="-10 0.2 6">
           <a-entity mixin="tree" animation="delay: 400" animation__visible="delay: 400"></a-entity>
diff --git a/examples/showcase/anime-UI/index.html b/examples/showcase/anime-UI/index.html
@@ -5,13 +5,14 @@
     <title>Anime UI</title>
     <meta name="description" content="Anime UI — A-Frame">
     <script src="../../../dist/aframe-master.js"></script>
+    <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
   </head>
   <body>
     <a-scene renderer="colorManagement: true;">
       <a-assets>
         <a-asset-item id="engine" src="models/engine.glb"></a-asset-item>
         <a-mixin id="image" geometry="height: 2; width: 2"></a-mixin>
-        <a-mixin id="toggleAnimation" animation="property: visible; from: false; to: true; dur: 1" visible="false"></a-mixin>
+        <a-mixin id="delayVisible" event-set__loaded="visible: true" visible="false"></a-mixin>
         <audio id="blip1" src="audio/321103__nsstudios__blip1.wav"></audio>
         <audio id="blip2" src="audio/321104__nsstudios__blip2.wav"></audio>
         <img id="glow1" src="img/glow1.png">
@@ -41,110 +42,110 @@
 
       <a-entity id="wall-lights" position="-7.25 1.5 2.9" rotation="0 90 0" scale="1.25 1.25 1.25">
         <a-entity position="0 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 350"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 350"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="1 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 400"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 400"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="2 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 450"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 450"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="3 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 500"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 500"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="4 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 550"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 550"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="5 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 600"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 600"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="6 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 650"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 650"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="7 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 700"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 700"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="8 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 750"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 750"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="9 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 800"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 800"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="10 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 850"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 850"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="11 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 900"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 900"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="12 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 950"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 950"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
 
         <a-entity position="13 0 0" scale="0.05 0.05 0.05">
-          <a-plane mixin="toggleAnimation" width="1" height="4" shader="flat" color="#B4E2F8" animation="delay: 1000"></a-plane>
+          <a-plane mixin="delayVisible" width="1" height="4" shader="flat" color="#B4E2F8" event-set__loaded="_delay: 1000"></a-plane>
           <a-plane width="6" height="4" color="#586266" opacity="0.6" position="0 0 -.01"></a-plane>
         </a-entity>
       </a-entity>
 
       <a-entity id="schematic-2" position="0 0 -6" scale="0.7 0.7 0.7">
-        <a-image mixin="image toggleAnimation" src="#glow1" scale="5 5 5" position="0 0 -2" animation="delay: 1500"></a-image>
-        <a-image mixin="image toggleAnimation" src="#ring2" scale="1.75 1.75 1.75" position="0 0 -1.2" animation="delay: 1400"></a-image>
-        <a-image mixin="image toggleAnimation" src="#ring5" scale="1.2 1.2 1.2" position="0 -1.5 -2.1" animation="delay: 1550"></a-image>
-        <a-image mixin="image toggleAnimation" src="#schematic5" scale="2 2 2" position="2.5 0 -1.02" opacity="0.75" animation="delay: 1500"></a-image>
-        <a-image mixin="image toggleAnimation" src="#schematic4" scale="1.5 1.5 1.5" position="0 -3 -1.01" rotation="0 0 90" opacity="0.75" animation="delay: 1500"></a-image>
-        <a-image mixin="image toggleAnimation" src="#schematic3" scale="1 1 1" position="0 2.7 -1" opacity="0.75" animation="delay: 1450"></a-image>
-        <a-image mixin="image toggleAnimation" src="#schematic1" scale="2 2 2" animation="delay: 1400"></a-image>
-        <a-image mixin="image toggleAnimation" src="#text2" scale=".5 .5 .5" position="-1 3 .02" animation="delay: 1350"></a-image>
-        <a-image mixin="image toggleAnimation" src="#text4" position="-2 -2 .03" animation="delay: 1300"></a-image>
+        <a-image mixin="image delayVisible" src="#glow1" scale="5 5 5" position="0 0 -2" event-set__loaded="_delay: 1500"></a-image>
+        <a-image mixin="image delayVisible" src="#ring2" scale="1.75 1.75 1.75" position="0 0 -1.2" event-set__loaded="_delay: 1400"></a-image>
+        <a-image mixin="image delayVisible" src="#ring5" scale="1.2 1.2 1.2" position="0 -1.5 -2.1" event-set__loaded="_delay: 1550"></a-image>
+        <a-image mixin="image delayVisible" src="#schematic5" scale="2 2 2" position="2.5 0 -1.02" opacity="0.75" event-set__loaded="_delay: 1500"></a-image>
+        <a-image mixin="image delayVisible" src="#schematic4" scale="1.5 1.5 1.5" position="0 -3 -1.01" rotation="0 0 90" opacity="0.75" event-set__loaded="_delay: 1500"></a-image>
+        <a-image mixin="image delayVisible" src="#schematic3" scale="1 1 1" position="0 2.7 -1" opacity="0.75" event-set__loaded="_delay: 1450"></a-image>
+        <a-image mixin="image delayVisible" src="#schematic1" scale="2 2 2" event-set__loaded="_delay: 1400"></a-image>
+        <a-image mixin="image delayVisible" src="#text2" scale=".5 .5 .5" position="-1 3 .02" event-set__loaded="_delay: 1350"></a-image>
+        <a-image mixin="image delayVisible" src="#text4" position="-2 -2 .03" event-set__loaded="_delay: 1300"></a-image>
       </a-entity>
 
       <a-entity id="schematic-1" position="0 0 -3">
-        <a-image mixin="image toggleAnimation" src="#schematic2" scale="0.7 0.7 0.7" animation="delay: 1200"></a-image>
-        <a-image mixin="image toggleAnimation" src="#text1" scale="0.2 0.2 0.2" position="2 0 .02" animation="delay: 1200"></a-image>
-        <a-image mixin="image toggleAnimation" src="#text3" scale="0.4 0.4 0.4" position="-1 1 .01" animation="delay: 1200"></a-image>
+        <a-image mixin="image delayVisible" src="#schematic2" scale="0.7 0.7 0.7" event-set__loaded="_delay: 1200"></a-image>
+        <a-image mixin="image delayVisible" src="#text1" scale="0.2 0.2 0.2" position="2 0 .02" event-set__loaded="_delay: 1200"></a-image>
+        <a-image mixin="image delayVisible" src="#text3" scale="0.4 0.4 0.4" position="-1 1 .01" event-set__loaded="_delay: 1200"></a-image>
       </a-entity>
 
       <a-entity id="rings-group-3" position="0 0 -2" scale="0.5 0.5 0.5">
-        <a-image mixin="image toggleAnimation" src="#ring3" scale=".8 .8 .8" animation="delay: 1000"></a-image>
-        <a-image mixin="image toggleAnimation" src="#ring5" scale=".9 .9 .9" position="0 0 .01" animation="delay: 1100"></a-image>
-        <a-image mixin="image toggleAnimation" src="#ring3" position="0 0 .02" animation="delay: 1100"
+        <a-image mixin="image delayVisible" src="#ring3" scale=".8 .8 .8" event-set__loaded="_delay: 1000"></a-image>
+        <a-image mixin="image delayVisible" src="#ring5" scale=".9 .9 .9" position="0 0 .01" event-set__loaded="_delay: 1100"></a-image>
+        <a-image mixin="image delayVisible" src="#ring3" position="0 0 .02" event-set__loaded="_delay: 1100"
                  animation__scale="property: scale; from: 1 1 1; to: 1.2 1.2 1.2; delay: 1100; dur: 250; easing: easeOutCubic"></a-image>
       </a-entity>
 
       <a-entity id="rings-group-2" position="0 0 -1" scale="0.5 0.5 0.5">
-        <a-image mixin="image toggleAnimation" src="#ring2" scale="1.2 1.2 1.2" position="0 0 .01" animation="delay: 800"></a-image>
-        <a-image mixin="image toggleAnimation" src="#text1" scale="0.3 0.3 0.3" position="1.4 0 .02" animation="delay: 900"></a-image>
+        <a-image mixin="image delayVisible" src="#ring2" scale="1.2 1.2 1.2" position="0 0 .01" event-set__loaded="_delay: 800"></a-image>
+        <a-image mixin="image delayVisible" src="#text1" scale="0.3 0.3 0.3" position="1.4 0 .02" event-set__loaded="_delay: 900"></a-image>
       </a-entity>
 
       <a-entity id="rings-group-1" scale="0.6 0.6 0.6">
-        <a-image mixin="toggleAnimation" mixin="image" src="#ring5" scale="1.2 1.2 1.2" position="0 0 0" animation="delay: 600"></a-image>
-        <a-image mixin="toggleAnimation" mixin="image" src="#ring4" scale="1.2 1.2 1.2" position="0 0 .01" animation="delay: 600"></a-image>
-        <a-image mixin="toggleAnimation" mixin="image" src="#ring3" position="0 0 .02" animation="delay: 700"
+        <a-image mixin="delayVisible" mixin="image" src="#ring5" scale="1.2 1.2 1.2" position="0 0 0" event-set__loaded="_delay: 600"></a-image>
+        <a-image mixin="delayVisible" mixin="image" src="#ring4" scale="1.2 1.2 1.2" position="0 0 .01" event-set__loaded="_delay: 600"></a-image>
+        <a-image mixin="delayVisible" mixin="image" src="#ring3" position="0 0 .02" event-set__loaded="_delay: 700"
                  animation__scale="property: scale; from: 1 1 1; to: 1.25 1.25 1.25; delay: 700; dur: 250; easing: easeOutCubic"></a-image>
       </a-entity>
 
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "present": "0.0.6",
     "promise-polyfill": "^3.1.0",
     "style-attr": "^1.0.2",
+    "super-animejs": "^3.0.0",
     "super-three": "^0.101.0",
     "three-bmfont-text": "^2.1.0",
     "webvr-polyfill": "^0.10.10"
diff --git a/src/components/animation.js b/src/components/animation.js
@@ -1,4 +1,4 @@
-var anime = require('animejs');
+var anime = require('super-animejs');
 var components = require('../core/component').components;
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
@@ -165,6 +165,7 @@ module.exports.Component = registerComponent('animation', {
     this.updateConfig();
     this.animationIsPlaying = false;
     this.animation = anime(this.config);
+    this.animation.began = true;
 
     this.removeEventListeners();
     this.addEventListeners();
@@ -188,6 +189,7 @@ module.exports.Component = registerComponent('animation', {
    */
   beginAnimation: function () {
     this.updateConfig();
+    this.animation.began = true;
     this.time = 0;
     this.animationIsPlaying = true;
     this.stopRelatedAnimations();
