diff --git a/Libraries/Animated/__tests__/Animated-test.js b/Libraries/Animated/__tests__/Animated-test.js index f51acd818c3..698dee83e99 100644 --- a/Libraries/Animated/__tests__/Animated-test.js +++ b/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, diff --git a/Libraries/Animated/nodes/AnimatedTransform.js b/Libraries/Animated/nodes/AnimatedTransform.js index d68c844c313..3b553c9a3d3 100644 --- a/Libraries/Animated/nodes/AnimatedTransform.js +++ b/Libraries/Animated/nodes/AnimatedTransform.js @@ -37,34 +37,11 @@ export default class AnimatedTransform extends AnimatedWithChildren { } __getValue(): $ReadOnlyArray { - 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 { - 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 { + 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; + }); + } }