mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-11 22:40:37 +08:00
Support for Animated.add
Summary:This change adds suport native animated support for Animated.add. Animated.add lets you declare node that outputs a sum of it input nodes. **Test Plan** Play with the following playground app: https://gist.github.com/39de37faf07480fcd7d1 Run JS tests: `npm test Libraries/Animated/src/__tests__/AnimatedNative-test.js` Run java tests: `buck test ReactAndroid/src/test/java/com/facebook/react/animated` Closes https://github.com/facebook/react-native/pull/6641 Differential Revision: D3195963 fb-gh-sync-id: bb1e1a36821a0e071ad0e7d0fa99ce0d6b088b0a fbshipit-source-id: bb1e1a36821a0e071ad0e7d0fa99ce0d6b088b0a
This commit is contained in:
committed by
Facebook Github Bot 8
parent
64d5da7754
commit
b5375bdc09
@@ -165,4 +165,180 @@ public class NativeAnimatedNodeTraversalTest {
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verifyNoMoreInteractions(animationCallback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a following graph of nodes:
|
||||
* Value(1, firstValue) ----> Add(3) ---> Style(4) ---> Props(5) ---> View(viewTag)
|
||||
* |
|
||||
* Value(2, secondValue) --+
|
||||
*
|
||||
* Add(3) node maps to a "translateX" attribute of the Style(4) node.
|
||||
*/
|
||||
private void createAnimatedGraphWithAdditionNode(
|
||||
int viewTag,
|
||||
double firstValue,
|
||||
double secondValue) {
|
||||
mNativeAnimatedNodesManager.createAnimatedNode(
|
||||
1,
|
||||
JavaOnlyMap.of("type", "value", "value", 100d));
|
||||
mNativeAnimatedNodesManager.createAnimatedNode(
|
||||
2,
|
||||
JavaOnlyMap.of("type", "value", "value", 1000d));
|
||||
|
||||
mNativeAnimatedNodesManager.createAnimatedNode(
|
||||
3,
|
||||
JavaOnlyMap.of("type", "addition", "input", JavaOnlyArray.of(1, 2)));
|
||||
|
||||
mNativeAnimatedNodesManager.createAnimatedNode(
|
||||
4,
|
||||
JavaOnlyMap.of("type", "style", "style", JavaOnlyMap.of("translateX", 3)));
|
||||
mNativeAnimatedNodesManager.createAnimatedNode(
|
||||
5,
|
||||
JavaOnlyMap.of("type", "props", "props", JavaOnlyMap.of("style", 4)));
|
||||
mNativeAnimatedNodesManager.connectAnimatedNodes(1, 3);
|
||||
mNativeAnimatedNodesManager.connectAnimatedNodes(2, 3);
|
||||
mNativeAnimatedNodesManager.connectAnimatedNodes(3, 4);
|
||||
mNativeAnimatedNodesManager.connectAnimatedNodes(4, 5);
|
||||
mNativeAnimatedNodesManager.connectAnimatedNodeToView(5, 50);
|
||||
}
|
||||
|
||||
@Test
|
||||
public void testAdditionNode() {
|
||||
createAnimatedGraphWithAdditionNode(50, 100d, 1000d);
|
||||
|
||||
Callback animationCallback = mock(Callback.class);
|
||||
JavaOnlyArray frames = JavaOnlyArray.of(0d, 1d);
|
||||
mNativeAnimatedNodesManager.startAnimatingNode(
|
||||
1,
|
||||
JavaOnlyMap.of("type", "frames", "frames", frames, "toValue", 101d),
|
||||
animationCallback);
|
||||
|
||||
mNativeAnimatedNodesManager.startAnimatingNode(
|
||||
2,
|
||||
JavaOnlyMap.of("type", "frames", "frames", frames, "toValue", 1010d),
|
||||
animationCallback);
|
||||
|
||||
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
|
||||
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock)
|
||||
.synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock)
|
||||
.synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1111d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verifyNoMoreInteractions(mUIImplementationMock);
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifies that {@link NativeAnimatedNodesManager#runUpdates} updates the view correctly in case
|
||||
* when one of the addition input nodes has started animating while the other one has not.
|
||||
*
|
||||
* We expect that the output of the addition node will take the starting value of the second input
|
||||
* node even though the node hasn't been connected to an active animation driver.
|
||||
*/
|
||||
@Test
|
||||
public void testViewReceiveUpdatesIfOneOfAnimationHasntStarted() {
|
||||
createAnimatedGraphWithAdditionNode(50, 100d, 1000d);
|
||||
|
||||
// Start animating only the first addition input node
|
||||
Callback animationCallback = mock(Callback.class);
|
||||
JavaOnlyArray frames = JavaOnlyArray.of(0d, 1d);
|
||||
mNativeAnimatedNodesManager.startAnimatingNode(
|
||||
1,
|
||||
JavaOnlyMap.of("type", "frames", "frames", frames, "toValue", 101d),
|
||||
animationCallback);
|
||||
|
||||
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
|
||||
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock)
|
||||
.synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock)
|
||||
.synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1101d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verifyNoMoreInteractions(mUIImplementationMock);
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifies that {@link NativeAnimatedNodesManager#runUpdates} updates the view correctly in case
|
||||
* when one of the addition input nodes animation finishes before the other.
|
||||
*
|
||||
* We expect that the output of the addition node after one of the animation has finished will
|
||||
* take the last value of the animated node and the view will receive updates up until the second
|
||||
* animation is over.
|
||||
*/
|
||||
@Test
|
||||
public void testViewReceiveUpdatesWhenOneOfAnimationHasFinished() {
|
||||
createAnimatedGraphWithAdditionNode(50, 100d, 1000d);
|
||||
|
||||
Callback animationCallback = mock(Callback.class);
|
||||
|
||||
// Start animating for the first addition input node, will have 2 frames only
|
||||
JavaOnlyArray firstFrames = JavaOnlyArray.of(0d, 1d);
|
||||
mNativeAnimatedNodesManager.startAnimatingNode(
|
||||
1,
|
||||
JavaOnlyMap.of("type", "frames", "frames", firstFrames, "toValue", 200d),
|
||||
animationCallback);
|
||||
|
||||
// Start animating for the first addition input node, will have 6 frames
|
||||
JavaOnlyArray secondFrames = JavaOnlyArray.of(0d, 0.2d, 0.4d, 0.6d, 0.8d, 1d);
|
||||
mNativeAnimatedNodesManager.startAnimatingNode(
|
||||
2,
|
||||
JavaOnlyMap.of("type", "frames", "frames", secondFrames, "toValue", 1010d),
|
||||
animationCallback);
|
||||
|
||||
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
|
||||
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(1100d);
|
||||
|
||||
for (int i = 1; i < secondFrames.size(); i++) {
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verify(mUIImplementationMock)
|
||||
.synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
|
||||
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN))
|
||||
.isEqualTo(1200d + secondFrames.getDouble(i) * 10d);
|
||||
}
|
||||
|
||||
reset(mUIImplementationMock);
|
||||
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
|
||||
verifyNoMoreInteractions(mUIImplementationMock);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user