Permalink
Browse files

Add support for animating nested styles

Summary:
This adds the ability to nest animated styles and is a follow up to #11030 .

**Test plan (required)**
Verify a component with a shadowOffset animation animates.

Example:
```
<Animated.View
  style={{
    shadowOffset: {
      width: 0,
      height: this._pressAnim.interpolate({
        inputRange: [0, 1],
        outputRange: [20, 5],
      }),
    },
  }},
/>

```

![example](https://cloud.githubusercontent.com/assets/19673711/23878825/e29f6ae4-0806-11e7-8650-9cff1f591204.gif)
Closes #12909

Differential Revision: D4723933

fbshipit-source-id: 751d7ceb4f9bb22283fb14a5e597730ffd1d9ff6
  • Loading branch information...
mlanter authored and facebook-github-bot committed Mar 16, 2017
1 parent a1694ba commit 9d3292069d105aa097c265166c0256c6b6bea159
Showing with 42 additions and 14 deletions.
  1. +29 −13 Libraries/Animated/src/AnimatedImplementation.js
  2. +13 −1 Libraries/Animated/src/__tests__/Animated-test.js
@@ -1508,32 +1508,48 @@ class AnimatedStyle extends AnimatedWithChildren {
this._style = style;
}
__getValue(): Object {
var style = {};
for (var key in this._style) {
var value = this._style[key];
// Recursively get values for nested styles (like iOS's shadowOffset)
__walkStyleAndGetValues(style) {
let updatedStyle = {};
for (let key in style) {
let value = style[key];
if (value instanceof Animated) {
if (!value.__isNative) {
// We cannot use value of natively driven nodes this way as the value we have access from
// JS may not be up to date.
style[key] = value.__getValue();
updatedStyle[key] = value.__getValue();
}
} else if (value && !Array.isArray(value) && typeof value === 'object') {
// Support animating nested values (for example: shadowOffset.height)
updatedStyle[key] = this.__walkStyleAndGetValues(value);
} else {
style[key] = value;
updatedStyle[key] = value;
}
}
return style;
return updatedStyle;
}
__getAnimatedValue(): Object {
var style = {};
for (var key in this._style) {
var value = this._style[key];
__getValue(): Object {
return this.__walkStyleAndGetValues(this._style);
}
// Recursively get animated values for nested styles (like iOS's shadowOffset)
__walkStyleAndGetAnimatedValues(style) {
let updatedStyle = {};
for (let key in style) {
let value = style[key];
if (value instanceof Animated) {
style[key] = value.__getAnimatedValue();
updatedStyle[key] = value.__getAnimatedValue();
} else if (value && !Array.isArray(value) && typeof value === 'object') {
// Support animating nested values (for example: shadowOffset.height)
updatedStyle[key] = this.__walkStyleAndGetAnimatedValues(value);
}
}
return style;
return updatedStyle;
}
__getAnimatedValue(): Object {
return this.__walkStyleAndGetAnimatedValues(this._style);
}
__attach(): void {
@@ -33,7 +33,11 @@ describe('Animated tests', () => {
outputRange: [100, 200],
})},
{scale: anim},
]
],
shadowOffset: {
width: anim,
height: anim,
},
}
}, callback);
@@ -47,6 +51,10 @@ describe('Animated tests', () => {
{translateX: 100},
{scale: 0},
],
shadowOffset: {
width: 0,
height: 0,
},
},
});
@@ -62,6 +70,10 @@ describe('Animated tests', () => {
{translateX: 150},
{scale: 0.5},
],
shadowOffset: {
width: 0.5,
height: 0.5,
},
},
});

0 comments on commit 9d32920

Please sign in to comment.