Support for animated tracking in native driver

Summary:
This PR adds support for Animated tracking to Animated Native Driver implementation on Android and iOS.

Animated tracking allows for animation to be started with a "dynamic" end value. Instead of passing a fixed number as end value we can pass a reference to another Animated.Value. Then when that value changes, the animation will be reconfigured to drive the animation to the new destination point. What is important is that animation will keep its state in the process of updating "toValue". That is if it is a spring animation and the end value changes while the previous animation still hasn't settled the new animation will start from the current position and will inherit current velocity. This makes end value transitions very smooth.

Animated tracking is available in JS implementation of Animated library but not in the native implementation. Therefore until now, it wasn't possible to utilize native driver when using animated tracking. Offloading animation from JS thread turns out to be crucial for gesture driven animations. This PR is a step forward towards feature parity between JS and native implementations of Animated.

Here is a link to example video that shows how tracking can be used to implement chat heads effect: https://twitter.com/kzzzf/status/958362032650244101

In addition this PR fixes an issue with frames animation driver on Android that because of rounding issues was taking one extra frame to start. Because of that change I had to update a number of Android unit tests that were relying on that behavior and running that one additional animation step prior to performing checks.

As a part of this PR I'm adding three unit tests for each of the platforms that verifies most important aspects of this implementation. Please refer to the code and look at the test cases top level comments to learn what they do.

I'm also adding a section to "Native Animated Example" screen in RNTester app that provides a test case for tracking. In the example we have blue square that fallows the red line drawn on screen. Line uses Animated.Value for it's position while square is connected via tracking spring animation to that value. So it is ought to follow the line. When user taps in the area surrounding the button new position for the red line is selected at random and the value updates. Then we can watch blue screen animate to that position.

You can also refer to this video that I use to demonstrate how tracking can be linked with native gesture events using react-native-gesture-handler lib: https://twitter.com/kzzzf/status/958362032650244101

[GENERAL][FEATURE][Native Animated] - Added support for animated tracking to native driver. Now you can use `useNativeDriver` flag with animations that track other Animated.Values
Closes https://github.com/facebook/react-native/pull/17896

Differential Revision: D6974170

Pulled By: hramos

fbshipit-source-id: 50e918b36ee10f80c1deb866c955661d4cc2619b
This commit is contained in:
Krzysztof Magiera
2018-02-16 11:43:34 -08:00
committed by Facebook Github Bot
parent 574c70e771
commit b48f7e5605
22 changed files with 899 additions and 121 deletions

View File

@@ -171,11 +171,6 @@ public class NativeAnimatedNodeTraversalTest {
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("opacity", Double.NaN)).isEqualTo(0);
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
@@ -205,11 +200,6 @@ public class NativeAnimatedNodeTraversalTest {
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("opacity", Double.NaN)).isEqualTo(0);
for (int iteration = 0; iteration < 5; iteration++) {
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
@@ -270,9 +260,6 @@ public class NativeAnimatedNodeTraversalTest {
JavaOnlyMap.of("type", "frames", "frames", frames, "toValue", 1d),
animationCallback);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(valueListener).onValueUpdate(eq(0d));
for (int i = 0; i < frames.size(); i++) {
reset(valueListener);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
@@ -600,7 +587,6 @@ public class NativeAnimatedNodeTraversalTest {
reset(animationCallback);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verifyNoMoreInteractions(animationCallback);
reset(animationCallback);
@@ -629,10 +615,10 @@ public class NativeAnimatedNodeTraversalTest {
double secondValue) {
mNativeAnimatedNodesManager.createAnimatedNode(
1,
JavaOnlyMap.of("type", "value", "value", 100d, "offset", 0d));
JavaOnlyMap.of("type", "value", "value", firstValue, "offset", 0d));
mNativeAnimatedNodesManager.createAnimatedNode(
2,
JavaOnlyMap.of("type", "value", "value", 1000d, "offset", 0d));
JavaOnlyMap.of("type", "value", "value", secondValue, "offset", 0d));
mNativeAnimatedNodesManager.createAnimatedNode(
3,
@@ -648,7 +634,7 @@ public class NativeAnimatedNodeTraversalTest {
mNativeAnimatedNodesManager.connectAnimatedNodes(2, 3);
mNativeAnimatedNodesManager.connectAnimatedNodes(3, 4);
mNativeAnimatedNodesManager.connectAnimatedNodes(4, 5);
mNativeAnimatedNodesManager.connectAnimatedNodeToView(5, 50);
mNativeAnimatedNodesManager.connectAnimatedNodeToView(5, viewTag);
}
@Test
@@ -677,12 +663,6 @@ public class NativeAnimatedNodeTraversalTest {
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)
@@ -722,12 +702,6 @@ public class NativeAnimatedNodeTraversalTest {
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)
@@ -777,11 +751,6 @@ public class NativeAnimatedNodeTraversalTest {
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());
@@ -843,11 +812,6 @@ public class NativeAnimatedNodeTraversalTest {
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(5d);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(5d);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
@@ -949,11 +913,6 @@ public class NativeAnimatedNodeTraversalTest {
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(50), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("opacity", Double.NaN)).isEqualTo(0d);
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
@@ -1088,11 +1047,6 @@ public class NativeAnimatedNodeTraversalTest {
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(viewTag), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("opacity", Double.NaN)).isEqualTo(1);
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
@@ -1106,4 +1060,228 @@ public class NativeAnimatedNodeTraversalTest {
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(viewTag), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().isNull("opacity"));
}
/**
* Creates a following graph of nodes:
* Value(3, initialValue) ----> Style(4) ---> Props(5) ---> View(viewTag)
*
* Value(3) is set to track Value(1) via Tracking(2) node with the provided animation config
*/
private void createAnimatedGraphWithTrackingNode(
int viewTag,
double initialValue,
JavaOnlyMap animationConfig) {
mNativeAnimatedNodesManager.createAnimatedNode(
1,
JavaOnlyMap.of("type", "value", "value", initialValue, "offset", 0d));
mNativeAnimatedNodesManager.createAnimatedNode(
3,
JavaOnlyMap.of("type", "value", "value", initialValue, "offset", 0d));
mNativeAnimatedNodesManager.createAnimatedNode(
2,
JavaOnlyMap.of("type", "tracking", "animationId", 70, "value", 3, "toValue", 1, "animationConfig", animationConfig));
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, 2);
mNativeAnimatedNodesManager.connectAnimatedNodes(3, 4);
mNativeAnimatedNodesManager.connectAnimatedNodes(4, 5);
mNativeAnimatedNodesManager.connectAnimatedNodeToView(5, viewTag);
}
/**
* In this test we verify that when value is being tracked we can update destination value in the
* middle of ongoing animation and the animation will update and animate to the new spot. This is
* tested using simple 5 frame backed timing animation.
*/
@Test
public void testTracking() {
JavaOnlyArray frames = JavaOnlyArray.of(0d, 0.25d, 0.5d, 0.75d, 1d);
JavaOnlyMap animationConfig = JavaOnlyMap.of("type", "frames", "frames", frames);
createAnimatedGraphWithTrackingNode(1000, 0d, animationConfig);
ArgumentCaptor<ReactStylesDiffMap> stylesCaptor =
ArgumentCaptor.forClass(ReactStylesDiffMap.class);
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock).synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN)).isEqualTo(0d);
// update "toValue" to 100, we expect tracking animation to animate now from 0 to 100 in 5 steps
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 100d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime()); // kick off the animation
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock)
.synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN))
.isEqualTo(frames.getDouble(i) * 100d);
}
// update "toValue" to 0 but run only two frames from the animation,
// we expect tracking animation to animate now from 100 to 75
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 0d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime()); // kick off the animation
for (int i = 0; i < 2; i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock)
.synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN))
.isEqualTo(100d * (1d - frames.getDouble(i)));
}
// at this point we expect tracking value to be at 75
assertThat(((ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(3)).getValue())
.isEqualTo(75d);
// we update "toValue" again to 100 and expect the animation to restart from the current place
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 100d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime()); // kick off the animation
for (int i = 0; i < frames.size(); i++) {
reset(mUIImplementationMock);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verify(mUIImplementationMock)
.synchronouslyUpdateViewOnUIThread(eq(1000), stylesCaptor.capture());
assertThat(stylesCaptor.getValue().getDouble("translateX", Double.NaN))
.isEqualTo(50d + 50d * frames.getDouble(i));
}
}
/**
* In this test we verify that when tracking is set up for a given animated node and when the
* animation settles it will not be registered as an active animation and therefore will not
* consume resources on running the animation that has already completed. Then we verify that when
* the value updates the animation will resume as expected and the complete again when reaches the
* end.
*/
@Test
public void testTrackingPausesWhenEndValueIsReached() {
JavaOnlyArray frames = JavaOnlyArray.of(0d, 0.5d, 1d);
JavaOnlyMap animationConfig = JavaOnlyMap.of("type", "frames", "frames", frames);
createAnimatedGraphWithTrackingNode(1000, 0d, animationConfig);
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 100d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime()); // make sure animation starts
reset(mUIImplementationMock);
for (int i = 0; i < frames.size(); i++) {
assertThat(mNativeAnimatedNodesManager.hasActiveAnimations()).isTrue();
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
}
verify(mUIImplementationMock, times(frames.size()))
.synchronouslyUpdateViewOnUIThread(eq(1000), any(ReactStylesDiffMap.class));
// the animation has completed, we expect no updates to be done
reset(mUIImplementationMock);
assertThat(mNativeAnimatedNodesManager.hasActiveAnimations()).isFalse();
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verifyNoMoreInteractions(mUIImplementationMock);
// we update end value and expect the animation to restart
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 200d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime()); // make sure animation starts
reset(mUIImplementationMock);
for (int i = 0; i < frames.size(); i++) {
assertThat(mNativeAnimatedNodesManager.hasActiveAnimations()).isTrue();
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
}
verify(mUIImplementationMock, times(frames.size()))
.synchronouslyUpdateViewOnUIThread(eq(1000), any(ReactStylesDiffMap.class));
// the animation has completed, we expect no updates to be done
reset(mUIImplementationMock);
assertThat(mNativeAnimatedNodesManager.hasActiveAnimations()).isFalse();
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
verifyNoMoreInteractions(mUIImplementationMock);
}
/**
* In this test we verify that when tracking is configured to use spring animation and when the
* destination value updates the current speed of the animated value will be taken into account
* while updating the spring animation and it will smoothly transition to the new end value.
*/
@Test
public void testSpringTrackingRetainsSpeed() {
// this spring config correspomds to tension 20 and friction 0.5 which makes the spring settle
// very slowly
JavaOnlyMap springConfig = JavaOnlyMap.of(
"type",
"spring",
"restSpeedThreshold",
0.001,
"mass",
1d,
"restDisplacementThreshold",
0.001,
"initialVelocity",
0.5d,
"damping",
2.5,
"stiffness",
157.8,
"overshootClamping",
false);
createAnimatedGraphWithTrackingNode(1000, 0d, springConfig);
// update "toValue" to 1, we expect tracking animation to animate now from 0 to 1
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 1d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
// we run several steps of animation until the value starts bouncing, has negative speed and
// passes the final point (that is 1) while going backwards
boolean isBoucingBack = false;
double previousValue = ((ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(3)).getValue();
for (int maxFrames = 500; maxFrames > 0; maxFrames--) {
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
double currentValue = ((ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(3)).getValue();
if (previousValue >= 1d && currentValue < 1d) {
isBoucingBack = true;
break;
}
previousValue = currentValue;
}
assertThat(isBoucingBack).isTrue();
// we now update "toValue" to 1.5 but since the value have negative speed and has also pretty
// low friction we expect it to keep going in the opposite direction for a few more frames
mNativeAnimatedNodesManager.setAnimatedNodeValue(1, 1.5d);
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
int bounceBackInitialFrames = 0;
boolean hasTurnedForward = false;
// we run 8 seconds of animation
for (int i = 0; i < 8 * 60; i++) {
mNativeAnimatedNodesManager.runUpdates(nextFrameTime());
double currentValue = ((ValueAnimatedNode) mNativeAnimatedNodesManager.getNodeById(3)).getValue();
if (!hasTurnedForward) {
if (currentValue <= previousValue) {
bounceBackInitialFrames++;
} else {
hasTurnedForward = true;
}
}
previousValue = currentValue;
}
assertThat(hasTurnedForward).isEqualTo(true);
assertThat(bounceBackInitialFrames).isGreaterThan(3);
// we verify that the value settled at 2
assertThat(previousValue).isEqualTo(1.5d);
}
}