throw error message for invalid property path for animations (fixes #4105) (#4122)

Author: ngokevin

examples/animation/arms/index.html

@@ -20,7 +20,7 @@
       <a-entity position="0 -10.1 -1" rotation="30 180 0">
         <a-sphere radius="7" color="#7BC8A4"></a-sphere>
 
-        <a-entity animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
+        <a-entity animation="property: object3D.rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
           <a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
           <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
@@ -168,23 +168,23 @@
 
       <a-entity animation="property: rotation; to: -360 360 -360; dur: 30000; easing: linear; loop: true; dir: normal; fill: none">
 
-        <a-entity position="0 -20 50" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; repeat: indefinite; direction: alternate">
+        <a-entity position="0 -20 50" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
           <a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
           <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-          <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; repeat: indefinite; direction: alternate">
+          <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
             <a-sphere radius="1" color="#F16745"></a-sphere>
             <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-            <a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; repeat: indefinite; direction: alternate">
+            <a-entity position="0 10 0" animation="property: rotation; to: 50 10 100; dur: 2000; delay: 0; loop: true; dir: alternate">
               <a-sphere radius="3" color="#4CC3D9"></a-sphere>
               <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-              <a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; repeat: indefinite; direction: alternate">
+              <a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
                 <a-sphere radius="4.5" color="#FFC65D"></a-sphere>
                 <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-                <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; repeat: indefinite; direction: alternate">
+                <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
                   <a-sphere radius="1.5" color="#93648D"></a-sphere>
                   <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
@@ -197,7 +197,7 @@
           </a-entity>
         </a-entity>
 
-        <a-entity position="40 20 0" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; repeat: indefinite; direction: alternate">
+        <a-entity position="40 20 0" animation="property: rotation; to: 45 100 100; dur: 5000; delay: 250; loop: true; dir: alternate">
           <a-sphere radius="1.5" color="#7BC8A4"></a-sphere>
           <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
@@ -209,11 +209,11 @@
               <a-sphere radius="3" color="#4CC3D9"></a-sphere>
               <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-              <a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; repeat: indefinite; direction: alternate">
+              <a-entity position="0 10 0" animation="property: rotation; to: 50 40 50; dur: 2000; delay: 250; loop: true; dir: alternate">
                 <a-sphere radius="4.5" color="#FFC65D"></a-sphere>
                 <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 
-                <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; repeat: indefinite; direction: alternate">
+                <a-entity position="0 10 0" animation="property: rotation; to: 90 90 0; dur: 2000; delay: 0; loop: true; dir: alternate">
                   <a-sphere radius="1.5" color="#93648D"></a-sphere>
                   <a-cylinder position="0 5 0" height="10" radius="0.075" color="#404040"></a-cylinder>
 

src/components/animation.js

@@ -568,6 +568,10 @@ function getRawProperty (el, path) {
   for (i = 0; i < split.length; i++) {
     value = value[split[i]];
   }
+  if (value === undefined) {
+    console.log(el);
+    throw new Error('[animation] property (' + path + ') could not be found');
+  }
   return value;
 }