Extend AnimatedTransform to support transformation value arrays and…

… objects

Summary:
Changelog:
[Internal][Added] - Add support for passing objects with `AnimatedNode` values and arrays of `AnimatedNode` elements in the `transform` styling prop.

Reviewed By: javache

Differential Revision: D40379943

fbshipit-source-id: 826b9cd0c0cfe02b55d86d1c735f8faf31196e64

Libraries/Animated/__tests__/Animated-test.js

@@ -31,6 +31,10 @@ describe('Animated tests', () => {
   describe('Animated', () => {
     it('works end to end', () => {
       const anim = new Animated.Value(0);
+      const translateAnim = anim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [100, 200],
+      });
 
       const callback = jest.fn();
 
@@ -41,10 +45,10 @@ describe('Animated tests', () => {
             opacity: anim,
             transform: [
               {
-                translateX: anim.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [100, 200],
-                }),
+                translate: [translateAnim, translateAnim],
+              },
+              {
+                translateX: translateAnim,
               },
               {scale: anim},
             ],
@@ -61,7 +65,7 @@ describe('Animated tests', () => {
         style: {
           backgroundColor: 'red',
           opacity: 0,
-          transform: [{translateX: 100}, {scale: 0}],
+          transform: [{translate: [100, 100]}, {translateX: 100}, {scale: 0}],
           shadowOffset: {
             width: 0,
             height: 0,
@@ -83,7 +87,7 @@ describe('Animated tests', () => {
         style: {
           backgroundColor: 'red',
           opacity: 0.5,
-          transform: [{translateX: 150}, {scale: 0.5}],
+          transform: [{translate: [150, 150]}, {translateX: 150}, {scale: 0.5}],
           shadowOffset: {
             width: 0.5,
             height: 0.5,

Libraries/Animated/nodes/AnimatedTransform.js

@@ -37,34 +37,11 @@ export default class AnimatedTransform extends AnimatedWithChildren {
   }
 
   __getValue(): $ReadOnlyArray<Object> {
-    return this._transforms.map(transform => {
-      const result: {[string]: any} = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getValue();
-        } else {
-          result[key] = value;
-        }
-      }
-      return result;
-    });
+    return this._get(animatedNode => animatedNode.__getValue());
   }
 
   __getAnimatedValue(): $ReadOnlyArray<Object> {
-    return this._transforms.map(transform => {
-      const result: {[string]: any} = {};
-      for (const key in transform) {
-        const value = transform[key];
-        if (value instanceof AnimatedNode) {
-          result[key] = value.__getAnimatedValue();
-        } else {
-          // All transform components needed to recompose matrix
-          result[key] = value;
-        }
-      }
-      return result;
-    });
+    return this._get(animatedNode => animatedNode.__getAnimatedValue());
   }
 
   __attach(): void {
@@ -118,4 +95,36 @@ export default class AnimatedTransform extends AnimatedWithChildren {
       transforms: transConfigs,
     };
   }
+
+  _get(getter: AnimatedNode => any): $ReadOnlyArray<Object> {
+    return this._transforms.map(transform => {
+      const result: {[string]: any} = {};
+      for (const key in transform) {
+        const value = transform[key];
+        if (value instanceof AnimatedNode) {
+          result[key] = getter(value);
+        } else if (Array.isArray(value)) {
+          result[key] = value.map(element => {
+            if (element instanceof AnimatedNode) {
+              return getter(element);
+            } else {
+              return element;
+            }
+          });
+        } else if (typeof value === 'object') {
+          result[key] = {};
+          for (const [nestedKey, nestedValue] of Object.entries(value)) {
+            if (nestedValue instanceof AnimatedNode) {
+              result[key][nestedKey] = getter(nestedValue);
+            } else {
+              result[key][nestedKey] = nestedValue;
+            }
+          }
+        } else {
+          result[key] = value;
+        }
+      }
+      return result;
+    });
+  }
 }