Permalink
Browse files

Add transform support for native animated on Android

Summary:
This adds support for the `transform` animated node. This brings feature parity with the iOS implementation and allows running the NativeAnimated UIExplorer example that was created with the iOS implementation on Android. This is based on some work by kmagiera in the exponent RN fork.

This also adds support for mixing static values with animated ones in the same transform as well which is not supported on iOS at the moment. It is also implemented in a way that rebuilds the transform matrix the same way as we build it in JS so it will be easy to remove some of the current limitations like forcing the transforms order and only supporting one of each type.

**Test plan (required)**

Tested with the NativeAnimated example on Android and iOS. Also tested mixing in static values in a transform (`[{ rotate: '45deg' }, { translateX: animatedValue }]`).
Closes #8839

Differential Revision: D3682143

fbshipit-source-id: 5e6fd4b0b8be6a76053f24a36d1785771690a6f8
  • Loading branch information...
1 parent 1168d0d commit df053117778d8ebcc1943f20127e49078f79da0b @janicduplessis janicduplessis committed with Facebook Github Bot Aug 7, 2016
@@ -335,7 +335,7 @@ exports.examples = [
inputRange: [0, 1],
outputRange: [0, 100],
})
- }
+ },
],
}
]}
@@ -51,10 +51,6 @@ var ComponentExamples: Array<UIExplorerExample> = [
module: require('./ModalExample'),
},
{
- key: 'NativeAnimationsExample',
- module: require('./NativeAnimationsExample'),
- },
- {
key: 'PickerExample',
module: require('./PickerExample'),
},
@@ -122,6 +118,10 @@ const APIExamples = [
module: require('./AlertExample').AlertExample,
},
{
+ key: 'AnimatedExample',
+ module: require('./AnimatedExample'),
+ },
+ {
key: 'AppStateExample',
module: require('./AppStateExample'),
},
@@ -166,6 +166,10 @@ const APIExamples = [
module: require('./LayoutExample'),
},
{
+ key: 'NativeAnimationsExample',
+ module: require('./NativeAnimationsExample'),
+ },
+ {
key: 'NavigationExperimentalExample',
module: require('./NavigationExperimental/NavigationExperimentalExample'),
},
@@ -69,10 +69,6 @@ const ComponentExamples: Array<UIExplorerExample> = [
module: require('./ModalExample'),
},
{
- key: 'NativeAnimationsExample',
- module: require('./NativeAnimationsExample'),
- },
- {
key: 'NavigatorExample',
module: require('./Navigator/NavigatorExample'),
},
@@ -228,6 +224,10 @@ const APIExamples: Array<UIExplorerExample> = [
module: require('./LinkingExample'),
},
{
+ key: 'NativeAnimationsExample',
+ module: require('./NativeAnimationsExample'),
+ },
+ {
key: 'NavigationExperimentalExample',
module: require('./NavigationExperimental/NavigationExperimentalExample'),
},
@@ -1251,9 +1251,16 @@ class AnimatedTransform extends AnimatedWithChildren {
var value = transform[key];
if (value instanceof Animated) {
transConfigs.push({
+ type: 'animated',
property: key,
nodeTag: value.__getNativeTag(),
});
+ } else {
+ transConfigs.push({
+ type: 'static',
+ property: key,
+ value,
+ });
}
}
});
@@ -37,6 +37,12 @@ - (void)performUpdate
NSArray<NSDictionary *> *transformConfigs = self.config[@"transforms"];
for (NSDictionary *transformConfig in transformConfigs) {
+ NSString *type = transformConfig[@"type"];
+ // TODO: Support static transform values.
+ if (![type isEqualToString: @"animated"]) {
+ continue;
+ }
+
NSNumber *nodeTag = transformConfig[@"nodeTag"];
RCTAnimatedNode *node = self.parentNodes[nodeTag];
@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
package com.facebook.react.animated;
import com.facebook.react.bridge.JSApplicationCausedNativeException;
@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
package com.facebook.react.animated;
import com.facebook.react.bridge.JSApplicationCausedNativeException;
@@ -78,6 +78,8 @@ public void createAnimatedNode(int tag, ReadableMap config) {
node = new AdditionAnimatedNode(config, this);
} else if ("multiplication".equals(type)) {
node = new MultiplicationAnimatedNode(config, this);
+ } else if ("transform".equals(type)) {
+ node = new TransformAnimatedNode(config, this);
} else {
throw new JSApplicationIllegalArgumentException("Unsupported node type: " + type);
}
@@ -43,6 +43,8 @@ public void collectViewUpdates(JavaOnlyMap propsMap) {
@Nullable AnimatedNode node = mNativeAnimatedNodesManager.getNodeById(entry.getValue());
if (node == null) {
throw new IllegalArgumentException("Mapped style node does not exists");
+ } else if (node instanceof TransformAnimatedNode) {
+ ((TransformAnimatedNode) node).collectViewUpdates(propsMap);
} else if (node instanceof ValueAnimatedNode) {
propsMap.putDouble(entry.getKey(), ((ValueAnimatedNode) node).mValue);
} else {
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+package com.facebook.react.animated;
+
+import com.facebook.react.bridge.JavaOnlyArray;
+import com.facebook.react.bridge.JavaOnlyMap;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Native counterpart of transform animated node (see AnimatedTransform class in AnimatedImplementation.js)
+ */
+/* package */ class TransformAnimatedNode extends AnimatedNode {
+
+ private class TransformConfig {
+ public String mProperty;
+ }
+
+ private class AnimatedTransformConfig extends TransformConfig {
+ public int mNodeTag;
+ }
+
+ private class StaticTransformConfig extends TransformConfig {
+ public double mValue;
+ }
+
+ private final NativeAnimatedNodesManager mNativeAnimatedNodesManager;
+ private final List<TransformConfig> mTransformConfigs;
+
+ TransformAnimatedNode(ReadableMap config, NativeAnimatedNodesManager nativeAnimatedNodesManager) {
+ ReadableArray transforms = config.getArray("transforms");
+ mTransformConfigs = new ArrayList<>(transforms.size());
+ for (int i = 0; i < transforms.size(); i++) {
+ ReadableMap transformConfigMap = transforms.getMap(i);
+ String property = transformConfigMap.getString("property");
+ String type = transformConfigMap.getString("type");
+ if (type.equals("animated")) {
+ AnimatedTransformConfig transformConfig = new AnimatedTransformConfig();
+ transformConfig.mProperty = property;
+ transformConfig.mNodeTag = transformConfigMap.getInt("nodeTag");
+ mTransformConfigs.add(transformConfig);
+ } else {
+ StaticTransformConfig transformConfig = new StaticTransformConfig();
+ transformConfig.mProperty = property;
+ transformConfig.mValue = transformConfigMap.getDouble("value");
+ mTransformConfigs.add(transformConfig);
+ }
+ }
+ mNativeAnimatedNodesManager = nativeAnimatedNodesManager;
+ }
+
+ public void collectViewUpdates(JavaOnlyMap propsMap) {
+ List<JavaOnlyMap> transforms = new ArrayList<>(mTransformConfigs.size());
+
+ for (TransformConfig transformConfig : mTransformConfigs) {
+ double value;
+ if (transformConfig instanceof AnimatedTransformConfig) {
+ int nodeTag = ((AnimatedTransformConfig) transformConfig).mNodeTag;
+ AnimatedNode node = mNativeAnimatedNodesManager.getNodeById(nodeTag);
+ if (node == null) {
+ throw new IllegalArgumentException("Mapped style node does not exists");
+ } else if (node instanceof ValueAnimatedNode) {
+ value = ((ValueAnimatedNode) node).mValue;
+ } else {
+ throw new IllegalArgumentException("Unsupported type of node used as a transform child " +
+ "node " + node.getClass());
+ }
+ } else {
+ value = ((StaticTransformConfig) transformConfig).mValue;
+ }
+
+ transforms.add(JavaOnlyMap.of(transformConfig.mProperty, value));
+ }
+
+ propsMap.putArray("transform", JavaOnlyArray.from(transforms));
+ }
+}
@@ -90,7 +90,23 @@ public JavaOnlyArray getArray(String name) {
@Override
public ReadableType getType(String name) {
- throw new UnsupportedOperationException("Method not implemented");
+ Object value = mBackingMap.get(name);
+ if (value == null) {
+ return ReadableType.Null;
+ } else if (value instanceof Number) {
+ return ReadableType.Number;
+ } else if (value instanceof String) {
+ return ReadableType.String;
+ } else if (value instanceof Boolean) {
+ return ReadableType.Boolean;
+ } else if (value instanceof ReadableMap) {
+ return ReadableType.Map;
+ } else if (value instanceof ReadableArray) {
+ return ReadableType.Array;
+ } else {
+ throw new IllegalArgumentException("Invalid value " + value.toString() + " for key " + name +
+ "contained in JavaOnlyMap");
+ }
}
@Override
@@ -20,13 +20,13 @@
private static double convertToRadians(ReadableMap transformMap, String key) {
double value;
- boolean inRadians = false;
+ boolean inRadians = true;
if (transformMap.getType(key) == ReadableType.String) {
String stringValue = transformMap.getString(key);
if (stringValue.endsWith("rad")) {
- inRadians = true;
stringValue = stringValue.substring(0, stringValue.length() - 3);
} else if (stringValue.endsWith("deg")) {
+ inRadians = false;
stringValue = stringValue.substring(0, stringValue.length() - 3);
}
value = Float.parseFloat(stringValue);

0 comments on commit df05311

Please sign in to comment.