Add option to trigger the backend from events (#54899)

Summary:
Pull Request resolved: #54899

Currently the backend only applies changes when it is notified of a new animation frame. This setup doesn't work properly for events, as they could come in after the current frame was already calculated. So we need to allow events to trigger the backend manually.

# Changelog

[General] [Added] - `AnimationBackend::trigger`
[General] [Changed] - Animated calls `AnimationBackend::trigger` to push updates from. events to the mounting layer

Reviewed By: zeyap

Differential Revision: D89286813

fbshipit-source-id: ffa83394bb620ad389b4888163e2206614171311

Author: Bartlomiej Bloniarz

packages/react-native/Libraries/Animated/__tests__/Animated-itest.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @fantom_flags useSharedAnimatedBackend:*
  * @flow strict-local
  * @format
  */
@@ -13,6 +14,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 import type {HostInstance} from 'react-native';
 
 import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as Fantom from '@react-native/fantom';
 import {createRef} from 'react';
 import {Animated, View, useAnimatedValue} from 'react-native';
@@ -564,12 +566,17 @@ test('animate layout props', () => {
     _heightAnimation?.stop();
   });
 
-  // $FlowFixMe[incompatible-use]
-  expect(Fantom.unstable_getDirectManipulationProps(viewElement).height).toBe(
-    100,
-  );
+  // animation backend does not push layut updates through the direct manipulation path
+  // also it's changes are not currently reflected in the getFabricUpdateProps method, as
+  // it only captures props that are updated through UIManager::updateShadowTree
+  if (!ReactNativeFeatureFlags.useSharedAnimatedBackend()) {
+    // $FlowFixMe[incompatible-use]
+    expect(Fantom.unstable_getDirectManipulationProps(viewElement).height).toBe(
+      100,
+    );
 
-  expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(100);
+    expect(Fantom.unstable_getFabricUpdateProps(viewElement).height).toBe(100);
+  }
 
   expect(root.getRenderedOutput({props: ['height']}).toJSX()).toEqual(
     <rn-view height="100.000000" />,
@@ -634,7 +641,11 @@ test('AnimatedValue.interpolate', () => {
     ),
   ).toBe('[{"translateX":0.5},{"translateY":75}]');
   expect(viewElement.getBoundingClientRect().x).toBe(0.5);
-  expect(viewElement.getBoundingClientRect().y).toBe(75);
+  // TODO (T248792461) this doesn't work with animation backend, because the commit hook overrides the value from the second render.
+  // The value displayed on the screen will be correct, but getBoundingClientRect will see the old shadow node
+  if (!ReactNativeFeatureFlags.useSharedAnimatedBackend()) {
+    expect(viewElement.getBoundingClientRect().y).toBe(75);
+  }
 });
 
 test('Animated.sequence', () => {

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -517,7 +517,15 @@ void NativeAnimatedNodesManager::handleAnimatedEvent(
     // That's why, in case this is called from the UI thread, we need to
     // proactivelly trigger the animation loop to avoid showing stale
     // frames.
-    onRender();
+    if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+#ifdef RN_USE_ANIMATION_BACKEND
+      if (auto animationBackend = animationBackend_.lock()) {
+        animationBackend->trigger();
+      }
+#endif
+    } else {
+      onRender();
+    }
   }
 }
 
@@ -968,6 +976,51 @@ void NativeAnimatedNodesManager::insertMutations(
   }
 }
 
+AnimationMutations NativeAnimatedNodesManager::onAnimationFrameForBackend(
+    AnimatedPropsBuilder& propsBuilder,
+    double timestamp) {
+  AnimationMutations mutations{};
+  // Run all active animations
+  auto hasFinishedAnimations = false;
+  std::set<int> finishedAnimationValueNodes;
+  for (const auto& [_id, driver] : activeAnimations_) {
+    driver->runAnimationStep(timestamp);
+
+    if (driver->getIsComplete()) {
+      hasFinishedAnimations = true;
+      finishedAnimationValueNodes.insert(driver->getAnimatedValueTag());
+    }
+  }
+
+  // Update all animated nodes
+  updateNodes(finishedAnimationValueNodes);
+
+  // remove finished animations
+  if (hasFinishedAnimations) {
+    std::vector<int> finishedAnimations;
+    for (const auto& [animationId, driver] : activeAnimations_) {
+      if (driver->getIsComplete()) {
+        if (getAnimatedNode<ValueAnimatedNode>(driver->getAnimatedValueTag()) !=
+            nullptr) {
+          driver->stopAnimation();
+        }
+        finishedAnimations.emplace_back(animationId);
+      }
+    }
+    for (const auto& id : finishedAnimations) {
+      activeAnimations_.erase(id);
+    }
+  }
+
+  insertMutations(updateViewPropsDirectForBackend_, mutations, propsBuilder);
+  insertMutations(updateViewPropsForBackend_, mutations, propsBuilder, true);
+
+  updateViewPropsForBackend_.clear();
+  updateViewPropsDirectForBackend_.clear();
+
+  return mutations;
+}
+
 AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
   if (!ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
     return {};
@@ -990,7 +1043,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     task();
   }
 
-  AnimationMutations mutations{};
+  AnimationMutations mutations;
 
   // Step through the animation loop
   if (isAnimationUpdateNeeded()) {
@@ -999,58 +1052,10 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
                             .count();
 
     auto timestamp = static_cast<double>(microseconds) / 1000.0;
-    bool containsChange = false;
     AnimatedPropsBuilder propsBuilder;
-    {
-      // copied from onAnimationFrame
-      // Run all active animations
-      auto hasFinishedAnimations = false;
-      std::set<int> finishedAnimationValueNodes;
-      for (const auto& [_id, driver] : activeAnimations_) {
-        driver->runAnimationStep(timestamp);
+    mutations = onAnimationFrameForBackend(propsBuilder, timestamp);
 
-        if (driver->getIsComplete()) {
-          hasFinishedAnimations = true;
-          finishedAnimationValueNodes.insert(driver->getAnimatedValueTag());
-        }
-      }
-
-      // Update all animated nodes
-      updateNodes(finishedAnimationValueNodes);
-
-      // remove finished animations
-      if (hasFinishedAnimations) {
-        std::vector<int> finishedAnimations;
-        for (const auto& [animationId, driver] : activeAnimations_) {
-          if (driver->getIsComplete()) {
-            if (getAnimatedNode<ValueAnimatedNode>(
-                    driver->getAnimatedValueTag()) != nullptr) {
-              driver->stopAnimation();
-            }
-            finishedAnimations.emplace_back(animationId);
-          }
-        }
-        for (const auto& id : finishedAnimations) {
-          activeAnimations_.erase(id);
-        }
-      }
-
-      insertMutations(
-          updateViewPropsDirectForBackend_, mutations, propsBuilder);
-
-      insertMutations(
-          updateViewPropsForBackend_, mutations, propsBuilder, true);
-
-      containsChange = !updateViewPropsForBackend_.empty() ||
-          !updateViewPropsDirectForBackend_.empty();
-
-      if (containsChange) {
-        updateViewPropsDirectForBackend_.clear();
-        updateViewPropsForBackend_.clear();
-      }
-    }
-
-    if (!containsChange) {
+    if (mutations.batch.empty()) {
       // The last animation tick didn't result in any changes to the UI.
       // It is safe to assume any event animation that was in progress has
       // completed.

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h

@@ -126,6 +126,7 @@ class NativeAnimatedNodesManager {
       AnimationMutations &mutations,
       AnimatedPropsBuilder &propsBuilder,
       bool hasLayoutUpdates = false);
+  AnimationMutations onAnimationFrameForBackend(AnimatedPropsBuilder &propsBuilder, double timestamp);
   AnimationMutations pullAnimationMutations();
 #endif
 

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp

@@ -129,6 +129,11 @@ void AnimationBackend::stop(bool isAsync) {
   callbacks.clear();
 }
 
+void AnimationBackend::trigger() {
+  onAnimationFrame(
+      std::chrono::steady_clock::now().time_since_epoch().count() / 1000);
+}
+
 void AnimationBackend::commitUpdates(
     SurfaceId surfaceId,
     SurfaceUpdates& surfaceUpdates) {

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h

@@ -78,6 +78,7 @@ class AnimationBackend : public UIManagerAnimationBackend {
   void clearRegistry(SurfaceId surfaceId) override;
 
   void onAnimationFrame(double timestamp) override;
+  void trigger() override;
   void start(const Callback &callback, bool isAsync);
   void stop(bool isAsync) override;
 };

packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationBackend.h

@@ -20,6 +20,7 @@ class UIManagerAnimationBackend {
   // TODO: T240293839 Move over start() function and mutation types
   virtual void stop(bool isAsync) = 0;
   virtual void clearRegistry(SurfaceId surfaceId) = 0;
+  virtual void trigger() = 0;
 };
 
 } // namespace facebook::react