react-native-windows 0.70.9 → 0.71.0-preview.2

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.cpp

@@ -25,12 +25,41 @@
 #include <Modules/NativeUIManager.h>
 #include <Modules/PaperUIManagerModule.h>
 #include <Windows.Foundation.h>
+#include <queue>
+
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionContextHelper.h>
+#include <Fabric/Composition/CompositionUIService.h>
+#endif
 
 namespace Microsoft::ReactNative {
+
+NativeAnimatedNodeManager::NativeAnimatedNodeManager(winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : m_context(reactContext) {}
+
+const winrt::Microsoft::ReactNative::ReactContext &NativeAnimatedNodeManager::ReactContext() const noexcept {
+  return m_context;
+}
+
+comp::Compositor NativeAnimatedNodeManager::Compositor() const noexcept {
+#ifdef USE_FABRIC
+  auto compositionContext =
+      winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+          m_context.Properties().Handle());
+  if (compositionContext) {
+    return winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
+        compositionContext);
+  }
+#endif
+  // TODO: Islands - need to get the XamlView associated with this animation in order to
+  // use the compositor Microsoft::ReactNative::GetCompositor(xamlView)
+  return Microsoft::ReactNative::GetCompositor();
+}
+
 void NativeAnimatedNodeManager::CreateAnimatedNode(
     int64_t tag,
-    const folly::dynamic &config,
-    const Mso::CntPtr<Mso::React::IReactContext> &context,
+    const ::React::JSValueObject &config,
+    const winrt::Microsoft::ReactNative::ReactContext &context,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager) {
   if (m_transformNodes.count(tag) > 0 || m_propsNodes.count(tag) > 0 || m_styleNodes.count(tag) > 0 ||
       m_valueNodes.count(tag) > 0) {
@@ -38,7 +67,7 @@ void NativeAnimatedNodeManager::CreateAnimatedNode(
     return;
   }
 
-  switch (const auto type = AnimatedNodeTypeFromString(config.find("type").dereference().second.getString())) {
+  switch (const auto type = AnimatedNodeTypeFromString(config["type"].AsString())) {
     case AnimatedNodeType::Style: {
       m_styleNodes.emplace(tag, std::make_unique<StyleAnimatedNode>(tag, config, manager));
       break;
@@ -94,29 +123,50 @@ void NativeAnimatedNodeManager::CreateAnimatedNode(
   }
 }
 
-void NativeAnimatedNodeManager::GetValue(int64_t animatedNodeTag, const Callback &saveValueCallback) {
+void NativeAnimatedNodeManager::GetValue(
+    int64_t animatedNodeTag,
+    std::function<void(double)> const &saveValueCallback) {
   if (const auto valueNode = m_valueNodes.at(animatedNodeTag).get()) {
-    saveValueCallback(std::vector<folly::dynamic>{folly::dynamic(valueNode->Value())});
+    saveValueCallback(valueNode->Value());
   }
 }
 
 void NativeAnimatedNodeManager::ConnectAnimatedNodeToView(int64_t propsNodeTag, int64_t viewTag) {
-  m_propsNodes.at(propsNodeTag)->ConnectToView(viewTag);
+  const auto &propsNode = m_propsNodes.at(propsNodeTag);
+  propsNode->ConnectToView(viewTag);
+  if (!propsNode->UseComposition()) {
+    m_updatedNodes.insert(propsNodeTag);
+    EnsureRendering();
+  }
 }
 
 void NativeAnimatedNodeManager::DisconnectAnimatedNodeToView(int64_t propsNodeTag, int64_t viewTag) {
   m_propsNodes.at(propsNodeTag)->DisconnectFromView(viewTag);
 }
 
+void NativeAnimatedNodeManager::RestoreDefaultValues(int64_t tag) {
+  if (const auto propsNode = GetPropsAnimatedNode(tag)) {
+    propsNode->RestoreDefaultValues();
+  }
+}
+
 void NativeAnimatedNodeManager::ConnectAnimatedNode(int64_t parentNodeTag, int64_t childNodeTag) {
   if (const auto parentNode = GetAnimatedNode(parentNodeTag)) {
     parentNode->AddChild(childNodeTag);
+    if (!parentNode->UseComposition()) {
+      m_updatedNodes.insert(childNodeTag);
+      EnsureRendering();
+    }
   }
 }
 
 void NativeAnimatedNodeManager::DisconnectAnimatedNode(int64_t parentNodeTag, int64_t childNodeTag) {
   if (const auto parentNode = GetAnimatedNode(parentNodeTag)) {
     parentNode->RemoveChild(childNodeTag);
+    if (!parentNode->UseComposition()) {
+      m_updatedNodes.insert(childNodeTag);
+      EnsureRendering();
+    }
   }
 }
 
@@ -125,33 +175,38 @@ void NativeAnimatedNodeManager::StopAnimation(int64_t animationId, bool isTracki
     if (const auto animation = m_activeAnimations.at(animationId)) {
       animation->StopAnimation(isTrackingAnimation);
 
-      // Insert the animation into the pending completion set to ensure it is
-      // not destroyed before the callback occurs. It's safe to assume the
-      // scoped batch completion callback has not run, since if it had, the
-      // animation would have been removed from the set of active animations.
-      m_pendingCompletionAnimations.insert({animationId, animation});
-
-      const auto nodeTag = animation->AnimatedValueTag();
-      if (nodeTag != -1) {
-        const auto deferredAnimation = m_deferredAnimationForValues.find(nodeTag);
-        if (deferredAnimation != m_deferredAnimationForValues.end()) {
-          // We can assume that the currently deferred animation is the one
-          // being stopped given the constraint that only one animation can
-          // be active for a given value node.
-          assert(deferredAnimation->second == animationId);
-          // If the animation is deferred, just remove the deferred animation
-          // entry as two animations cannot animate the same value concurrently.
-          m_deferredAnimationForValues.erase(nodeTag);
-        } else {
-          // Since only one animation can be active at a time, there shouldn't
-          // be any stopped animations for the value node if the animation has
-          // not been deferred.
-          assert(!m_valuesWithStoppedAnimation.count(nodeTag));
-          // In this case, add the value tag to the set of values with stopped
-          // animations. This is used to optimize the lookup when determining
-          // if an animation needs to be deferred (rather than iterating over
-          // the map of pending completion animations).
-          m_valuesWithStoppedAnimation.insert(nodeTag);
+      // We need to update the node manager state for composition animations
+      // to ensure new animations on the same animated value do not start until
+      // the completion callback has fired for the stopped animation.
+      if (animation->UseComposition()) {
+        // Insert the animation into the pending completion set to ensure it is
+        // not destroyed before the callback occurs. It's safe to assume the
+        // scoped batch completion callback has not run, since if it had, the
+        // animation would have been removed from the set of active animations.
+        m_pendingCompletionAnimations.insert({animationId, animation});
+
+        const auto nodeTag = animation->AnimatedValueTag();
+        if (nodeTag != -1) {
+          const auto deferredAnimation = m_deferredAnimationForValues.find(nodeTag);
+          if (deferredAnimation != m_deferredAnimationForValues.end()) {
+            // We can assume that the currently deferred animation is the one
+            // being stopped given the constraint that only one animation can
+            // be active for a given value node.
+            assert(deferredAnimation->second == animationId);
+            // If the animation is deferred, just remove the deferred animation
+            // entry as two animations cannot animate the same value concurrently.
+            m_deferredAnimationForValues.erase(nodeTag);
+          } else {
+            // Since only one animation can be active at a time, there shouldn't
+            // be any stopped animations for the value node if the animation has
+            // not been deferred.
+            assert(!m_valuesWithStoppedAnimation.count(nodeTag));
+            // In this case, add the value tag to the set of values with stopped
+            // animations. This is used to optimize the lookup when determining
+            // if an animation needs to be deferred (rather than iterating over
+            // the map of pending completion animations).
+            m_valuesWithStoppedAnimation.insert(nodeTag);
+          }
         }
       }
 
@@ -166,8 +221,9 @@ void NativeAnimatedNodeManager::RestartTrackingAnimatedNode(
     const std::shared_ptr<NativeAnimatedNodeManager> &manager) {
   if (m_activeAnimations.count(animationId)) {
     if (const auto animation = m_activeAnimations.at(animationId).get()) {
+      assert(animation->UseComposition());
       auto const animatedValueTag = animation->AnimatedValueTag();
-      auto const animationConfig = animation->AnimationConfig();
+      auto const &animationConfig = animation->AnimationConfig();
       auto const endCallback = animation->EndCallback();
       animation->StopAnimation(true);
       m_activeAnimations.erase(animationId);
@@ -187,40 +243,35 @@ void NativeAnimatedNodeManager::StartTrackingAnimatedNode(
     int64_t animationId,
     int64_t animatedNodeTag,
     int64_t animatedToValueTag,
-    const folly::dynamic &animationConfig,
-    const Callback &endCallback,
+    const winrt::Microsoft::ReactNative::JSValueObject &animationConfig,
+    const EndCallback &endCallback,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager,
     bool track) {
-  auto updatedAnimationConfig = animationConfig;
+  auto updatedAnimationConfig = animationConfig.Copy();
   for (auto &item : m_activeAnimations) {
     if (item.second->AnimatedValueTag() == animatedToValueTag) {
-      updatedAnimationConfig.insert(static_cast<folly::StringPiece>(s_toValueIdName), item.second->ToValue());
-
-      switch (AnimationTypeFromString(animationConfig.find("type").dereference().second.getString())) {
-        case AnimationType::Frames:
+      updatedAnimationConfig[s_toValueIdName] = item.second->ToValue();
+
+      switch (AnimationTypeFromString(animationConfig["type"].AsString())) {
+        case AnimationType::Frames: {
+          winrt::Microsoft::ReactNative::JSValueArray frames;
+          for (auto const &frame : animationConfig["frames"].AsArray()) {
+            frames.push_back(0.0);
+          }
+          for (auto const &frame : item.second->Frames()) {
+            frames.push_back(frame);
+          }
           updatedAnimationConfig.insert(
-              static_cast<folly::StringPiece>(s_framesName), [animationConfig, activeFrames = item.second->Frames()]() {
-                auto frames = folly::dynamic::array();
-                for (auto const &frame : animationConfig.find("frames").dereference().second) {
-                  (void)frame;
-                  frames.push_back(0.0);
-                }
-                for (auto const &frame : activeFrames) {
-                  frames.push_back(frame);
-                }
-                return frames;
-              }());
-          break;
-        case AnimationType::Spring:
+              std::make_pair(s_framesName, winrt::Microsoft::ReactNative::JSValue(std::move(frames))));
+        } break;
+        case AnimationType::Spring: {
+          winrt::Microsoft::ReactNative::JSValueArray frames;
+          for (auto const &frame : item.second->Frames()) {
+            frames.push_back(frame);
+          }
           updatedAnimationConfig.insert(
-              static_cast<folly::StringPiece>(s_dynamicToValuesName), [activeFrames = item.second->Frames()]() {
-                auto dynamicToValues = folly::dynamic::array();
-                for (auto const &frame : activeFrames) {
-                  dynamicToValues.push_back(frame);
-                }
-                return dynamicToValues;
-              }());
-          break;
+              std::make_pair(s_dynamicToValuesName, winrt::Microsoft::ReactNative::JSValue(std::move(frames))));
+        } break;
           // Animated.Decay does not have a to value,
           // so they cannot track other nodes. So we'll never
           // have a decay tracking node.
@@ -242,10 +293,10 @@ void NativeAnimatedNodeManager::StartTrackingAnimatedNode(
 void NativeAnimatedNodeManager::StartAnimatingNode(
     int64_t animationId,
     int64_t animatedNodeTag,
-    const folly::dynamic &animationConfig,
-    const Callback &endCallback,
+    const winrt::Microsoft::ReactNative::JSValueObject &animationConfig,
+    const EndCallback &endCallback,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager) {
-  switch (AnimationTypeFromString(animationConfig.find("type").dereference().second.getString())) {
+  switch (AnimationTypeFromString(animationConfig["type"].AsString())) {
     case AnimationType::Decay:
       m_activeAnimations.emplace(
           animationId,
@@ -257,14 +308,15 @@ void NativeAnimatedNodeManager::StartAnimatingNode(
           std::make_shared<FrameAnimationDriver>(animationId, animatedNodeTag, endCallback, animationConfig, manager));
       break;
     case AnimationType::Spring: {
-      folly::dynamic dynamicValues = [animationConfig]() {
-        const auto dynamicValues = animationConfig.count(s_dynamicToValuesName);
-        return dynamicValues ? animationConfig.at(s_dynamicToValuesName) : folly::dynamic::array();
-      }();
       m_activeAnimations.emplace(
           animationId,
           std::make_shared<SpringAnimationDriver>(
-              animationId, animatedNodeTag, endCallback, animationConfig, manager, dynamicValues));
+              animationId,
+              animatedNodeTag,
+              endCallback,
+              animationConfig,
+              manager,
+              animationConfig[s_dynamicToValuesName].AsArray()));
       break;
     }
     default:
@@ -275,14 +327,19 @@ void NativeAnimatedNodeManager::StartAnimatingNode(
   // If the animated value node has any stopped animations, defer start until
   // all stopped animations fire completion callback and have latest values.
   if (m_activeAnimations.count(animationId)) {
-    if (m_valuesWithStoppedAnimation.count(animatedNodeTag)) {
-      // Since only one animation can be active per value at a time, there will
-      // not be any other deferred animations for the value node.
-      assert(!m_deferredAnimationForValues.count(animatedNodeTag));
-      // Add the animation to the deferred animation map for the value tag.
-      m_deferredAnimationForValues.insert({animatedNodeTag, animationId});
+    const auto &animation = m_activeAnimations.at(animationId);
+    if (animation->UseComposition()) {
+      if (m_valuesWithStoppedAnimation.count(animatedNodeTag)) {
+        // Since only one animation can be active per value at a time, there will
+        // not be any other deferred animations for the value node.
+        assert(!m_deferredAnimationForValues.count(animatedNodeTag));
+        // Add the animation to the deferred animation map for the value tag.
+        m_deferredAnimationForValues.insert({animatedNodeTag, animationId});
+      } else {
+        StartAnimationAndTrackingNodes(animationId, animatedNodeTag, manager);
+      }
     } else {
-      StartAnimationAndTrackingNodes(animationId, animatedNodeTag, manager);
+      EnsureRendering();
     }
   }
 }
@@ -292,17 +349,27 @@ void NativeAnimatedNodeManager::DropAnimatedNode(int64_t tag) {
   m_propsNodes.erase(tag);
   m_styleNodes.erase(tag);
   m_transformNodes.erase(tag);
+  m_updatedNodes.erase(tag);
 }
 
 void NativeAnimatedNodeManager::SetAnimatedNodeValue(int64_t tag, double value) {
   if (const auto valueNode = m_valueNodes.at(tag).get()) {
     valueNode->RawValue(static_cast<float>(value));
+    if (!valueNode->UseComposition()) {
+      StopAnimationsForNode(tag);
+      m_updatedNodes.insert(tag);
+      EnsureRendering();
+    }
   }
 }
 
 void NativeAnimatedNodeManager::SetAnimatedNodeOffset(int64_t tag, double offset) {
   if (const auto valueNode = m_valueNodes.at(tag).get()) {
     valueNode->Offset(static_cast<float>(offset));
+    if (!valueNode->UseComposition()) {
+      m_updatedNodes.insert(tag);
+      EnsureRendering();
+    }
   }
 }
 
@@ -318,13 +385,25 @@ void NativeAnimatedNodeManager::ExtractAnimatedNodeOffset(int64_t tag) {
   }
 }
 
+void NativeAnimatedNodeManager::StartListeningToAnimatedNodeValue(int64_t tag, const ValueListenerCallback &callback) {
+  if (const auto valueNode = m_valueNodes.at(tag).get()) {
+    valueNode->ValueListener(callback);
+  }
+}
+
+void NativeAnimatedNodeManager::StopListeningToAnimatedNodeValue(int64_t tag) {
+  if (const auto valueNode = m_valueNodes.at(tag).get()) {
+    valueNode->ValueListener(nullptr);
+  }
+}
+
 void NativeAnimatedNodeManager::AddAnimatedEventToView(
     int64_t viewTag,
     const std::string &eventName,
-    const folly::dynamic &eventMapping,
+    const ReactNativeSpecs::AnimatedModuleSpec_EventMapping &eventMapping,
     const std::shared_ptr<NativeAnimatedNodeManager> &manager) {
-  const auto valueNodeTag = static_cast<int64_t>(eventMapping.find("animatedValueTag").dereference().second.asDouble());
-  const auto pathList = eventMapping.find("nativeEventPath").dereference().second;
+  const auto valueNodeTag = eventMapping.animatedValueTag ? static_cast<int64_t>(*eventMapping.animatedValueTag) : 0;
+  const auto pathList = eventMapping.nativeEventPath;
 
   const auto key = std::make_tuple(viewTag, eventName);
   if (m_eventDrivers.count(key)) {
@@ -375,10 +454,13 @@ void NativeAnimatedNodeManager::ProcessDelayedPropsNodes() {
 
 void NativeAnimatedNodeManager::AddDelayedPropsNode(
     int64_t propsNodeTag,
-    const Mso::CntPtr<Mso::React::IReactContext> &context) {
+    const winrt::Microsoft::ReactNative::ReactContext &context) {
+#if DEBUG
+  assert(m_propsNodes.at(propsNodeTag)->UseComposition());
+#endif
   m_delayedPropsNodes.push_back(propsNodeTag);
   if (m_delayedPropsNodes.size() <= 1) {
-    if (const auto uiManger = Microsoft::ReactNative::GetNativeUIManager(*context).lock()) {
+    if (const auto uiManger = Microsoft::ReactNative::GetNativeUIManager(context).lock()) {
       uiManger->AddBatchCompletedCallback([this]() { ProcessDelayedPropsNodes(); });
     }
   }
@@ -480,4 +562,176 @@ void NativeAnimatedNodeManager::StartAnimationAndTrackingNodes(
     }
   }
 }
+
+void NativeAnimatedNodeManager::RunUpdates(winrt::TimeSpan renderingTime) {
+  auto hasFinishedAnimations = false;
+  std::unordered_set<int64_t> updatingNodes{};
+  updatingNodes = std::move(m_updatedNodes);
+
+  // Increment animation drivers
+  for (auto id : m_activeAnimationIds) {
+    auto &animation = m_activeAnimations.at(id);
+    animation->RunAnimationStep(renderingTime);
+    updatingNodes.insert(animation->AnimatedValueTag());
+    if (animation->IsComplete()) {
+      hasFinishedAnimations = true;
+    }
+  }
+
+  UpdateNodes(updatingNodes);
+
+  if (hasFinishedAnimations) {
+    for (auto id : m_activeAnimationIds) {
+      auto &animation = m_activeAnimations.at(id);
+      if (animation->IsComplete()) {
+        animation->DoCallback(true);
+        m_activeAnimations.erase(id);
+      }
+    }
+  }
+}
+
+void NativeAnimatedNodeManager::EnsureRendering() {
+  m_renderingRevoker =
+      xaml::Media::CompositionTarget::Rendering(winrt::auto_revoke, {this, &NativeAnimatedNodeManager::OnRendering});
+}
+
+void NativeAnimatedNodeManager::OnRendering(winrt::IInspectable const &sender, winrt::IInspectable const &args) {
+  // The `UpdateActiveAnimationIds` method only tracks animations where
+  // composition is not used, so if only UI.Composition animations are active,
+  // this rendering callback will not run.
+  UpdateActiveAnimationIds();
+  if (m_activeAnimationIds.size() > 0 || m_updatedNodes.size() > 0) {
+    if (const auto renderingArgs = args.try_as<xaml::Media::RenderingEventArgs>()) {
+      RunUpdates(renderingArgs.RenderingTime());
+    }
+  } else {
+    m_renderingRevoker.revoke();
+  }
+}
+
+void NativeAnimatedNodeManager::StopAnimationsForNode(int64_t tag) {
+  UpdateActiveAnimationIds();
+  for (auto id : m_activeAnimationIds) {
+    auto &animation = m_activeAnimations.at(id);
+    if (tag == animation->AnimatedValueTag()) {
+      animation->DoCallback(false);
+      m_activeAnimations.erase(id);
+    }
+  }
+}
+
+void NativeAnimatedNodeManager::UpdateActiveAnimationIds() {
+  m_activeAnimationIds.clear();
+  for (const auto &pair : m_activeAnimations) {
+    if (!pair.second->UseComposition()) {
+      m_activeAnimationIds.push_back(pair.first);
+    }
+  }
+}
+
+void NativeAnimatedNodeManager::UpdateNodes(std::unordered_set<int64_t> &nodes) {
+  auto activeNodesCount = 0;
+  auto updatedNodesCount = 0;
+
+  // BFS state
+  std::unordered_map<int64_t, int64_t> bfsColors;
+  std::unordered_map<int64_t, int64_t> incomingNodeCounts;
+
+  // STEP 1.
+  // BFS over graph of nodes starting from IDs in `nodes` argument and IDs that are attached to
+  // active animations (from `m_activeAnimations)`. Update `incomingNodeCounts` map for each node
+  // during that BFS. Store number of visited nodes in `activeNodesCount`. We "execute" active
+  // animations as a part of this step.
+
+  m_animatedGraphBFSColor++; /* use new color */
+  if (m_animatedGraphBFSColor == 0) {
+    // value "0" is used as an initial color for a new node, using it in BFS may cause some nodes to be skipped.
+    m_animatedGraphBFSColor++;
+  }
+
+  std::queue<int64_t> nodesQueue{};
+  for (auto id : nodes) {
+    if (!bfsColors.count(id) || bfsColors.at(id) != m_animatedGraphBFSColor) {
+      bfsColors[id] = m_animatedGraphBFSColor;
+      activeNodesCount++;
+      nodesQueue.push(id);
+    }
+  }
+
+  while (nodesQueue.size() > 0) {
+    auto id = nodesQueue.front();
+    nodesQueue.pop();
+    if (auto node = GetAnimatedNode(id)) {
+      for (auto &childId : node->Children()) {
+        if (!incomingNodeCounts.count(childId)) {
+          incomingNodeCounts[childId] = 1;
+        } else {
+          incomingNodeCounts.at(childId)++;
+        }
+
+        if (!bfsColors.count(childId) || bfsColors.at(childId) != m_animatedGraphBFSColor) {
+          bfsColors[childId] = m_animatedGraphBFSColor;
+          activeNodesCount++;
+          nodesQueue.push(childId);
+        }
+      }
+    }
+  }
+
+  // STEP 2
+  // BFS over the graph of active nodes in topological order -> visit node only when all its
+  // "predecessors" in the graph have already been visited. It is important to visit nodes in that
+  // order as they may often use values of their predecessors in order to calculate "next state"
+  // of their own. We start by determining the starting set of nodes by looking for nodes with
+  // `incomingNodeCounts[id] = 0` (those can only be the ones that we start BFS in the previous
+  // step). We store number of visited nodes in this step in `updatedNodesCount`
+
+  m_animatedGraphBFSColor++;
+  if (m_animatedGraphBFSColor == 0) {
+    // see reasoning for this check a few lines above
+    m_animatedGraphBFSColor++;
+  }
+
+  // find nodes with zero "incoming nodes", those can be either nodes from `m_updatedNodes` or
+  // ones connected to active animations
+  for (auto id : nodes) {
+    if (!incomingNodeCounts.count(id) ||
+        incomingNodeCounts.at(id) == 0 && bfsColors.at(id) != m_animatedGraphBFSColor) {
+      bfsColors[id] = m_animatedGraphBFSColor;
+      updatedNodesCount++;
+      nodesQueue.push(id);
+    }
+  }
+
+  // Run main "update" loop
+  while (nodesQueue.size() > 0) {
+    auto id = nodesQueue.front();
+    nodesQueue.pop();
+    if (auto node = GetAnimatedNode(id)) {
+      node->Update();
+      if (auto propsNode = GetPropsAnimatedNode(id)) {
+        propsNode->UpdateView();
+      } else if (auto valueNode = GetValueAnimatedNode(id)) {
+        valueNode->OnValueUpdate();
+      }
+
+      for (auto &childId : node->Children()) {
+        auto &incomingCount = incomingNodeCounts.at(childId);
+        auto &bfsColor = bfsColors.at(childId);
+        incomingCount--;
+        if (bfsColor != m_animatedGraphBFSColor && incomingCount == 0) {
+          bfsColor = m_animatedGraphBFSColor;
+          updatedNodesCount++;
+          nodesQueue.push(childId);
+        }
+      }
+    }
+  }
+
+  // Verify that we've visited *all* active nodes. Throw otherwise as this would mean there is a
+  // cycle in animated node graph. We also take advantage of the fact that all active nodes are
+  // visited in the step above so that `incomingNodeCounts` for all node IDs are set to zero
+  assert(activeNodesCount == updatedNodesCount);
+}
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.h

@@ -5,6 +5,7 @@
 // Licensed under the MIT License.
 
 #include <IReactInstance.h>
+#include <UI.Xaml.Media.h>
 #include <cxxreact/CxxModule.h>
 #include <folly/dynamic.h>
 #include "AnimatedNode.h"
@@ -16,6 +17,8 @@
 #include "TransformAnimatedNode.h"
 #include "ValueAnimatedNode.h"
 
+#include "codegen/NativeAnimatedModuleSpec.g.h"
+
 namespace Microsoft::ReactNative {
 /// <summary>
 /// This is the main class that coordinates how native animated JS
@@ -27,7 +30,8 @@ namespace Microsoft::ReactNative {
 ///
 /// </summary>
 
-typedef std::function<void(std::vector<folly::dynamic>)> Callback;
+typedef std::function<void(bool)> EndCallback;
+typedef std::function<void(double)> ValueListenerCallback;
 
 class AnimatedNode;
 class StyleAnimatedNode;
@@ -39,14 +43,18 @@ class AnimationDriver;
 class EventAnimationDriver;
 class NativeAnimatedNodeManager {
  public:
+  NativeAnimatedNodeManager(winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+  const winrt::Microsoft::ReactNative::ReactContext &ReactContext() const noexcept;
+  comp::Compositor Compositor() const noexcept;
   void CreateAnimatedNode(
       int64_t tag,
-      const folly::dynamic &config,
-      const Mso::CntPtr<Mso::React::IReactContext> &context,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
+      const winrt::Microsoft::ReactNative::ReactContext &context,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
-  void GetValue(int64_t animatedNodeTag, const Callback &endCallback);
+  void GetValue(int64_t animatedNodeTag, std::function<void(double)> const &endCallback);
   void ConnectAnimatedNodeToView(int64_t propsNodeTag, int64_t viewTag);
   void DisconnectAnimatedNodeToView(int64_t propsNodeTag, int64_t viewTag);
+  void RestoreDefaultValues(int64_t tag);
   void ConnectAnimatedNode(int64_t parentNodeTag, int64_t childNodeTag);
   void DisconnectAnimatedNode(int64_t parentNodeTag, int64_t childNodeTag);
   void StopAnimation(int64_t animationId, bool isTrackingAnimation = false);
@@ -58,29 +66,31 @@ class NativeAnimatedNodeManager {
       int64_t animationId,
       int64_t animatedNodeTag,
       int64_t animatedToValueTag,
-      const folly::dynamic &animationConfig,
-      const Callback &endCallback,
+      const winrt::Microsoft::ReactNative::JSValueObject &animationConfig,
+      const EndCallback &endCallback,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager,
       bool track = true);
   void StartAnimatingNode(
       int64_t animationId,
       int64_t animatedNodeTag,
-      const folly::dynamic &animationConfig,
-      const Callback &endCallback,
+      const winrt::Microsoft::ReactNative::JSValueObject &animationConfig,
+      const EndCallback &endCallback,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   void DropAnimatedNode(int64_t tag);
   void SetAnimatedNodeValue(int64_t tag, double value);
   void SetAnimatedNodeOffset(int64_t tag, double offset);
   void FlattenAnimatedNodeOffset(int64_t tag);
   void ExtractAnimatedNodeOffset(int64_t tag);
+  void StartListeningToAnimatedNodeValue(int64_t tag, const ValueListenerCallback &callback);
+  void StopListeningToAnimatedNodeValue(int64_t tag);
   void AddAnimatedEventToView(
       int64_t viewTag,
       const std::string &eventName,
-      const folly::dynamic &eventMapping,
+      const ReactNativeSpecs::AnimatedModuleSpec_EventMapping &eventMapping,
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
   void RemoveAnimatedEventFromView(int64_t viewTag, const std::string &eventName, int64_t animatedValueTag);
   void ProcessDelayedPropsNodes();
-  void AddDelayedPropsNode(int64_t propsNodeTag, const Mso::CntPtr<Mso::React::IReactContext> &context);
+  void AddDelayedPropsNode(int64_t propsNodeTag, const winrt::Microsoft::ReactNative::ReactContext &context);
 
   AnimatedNode *GetAnimatedNode(int64_t tag);
   ValueAnimatedNode *GetValueAnimatedNode(int64_t tag);
@@ -100,6 +110,13 @@ class NativeAnimatedNodeManager {
       const std::shared_ptr<NativeAnimatedNodeManager> &manager);
 
  private:
+  void EnsureRendering();
+  void OnRendering(winrt::IInspectable const &sender, winrt::IInspectable const &args);
+  void RunUpdates(winrt::TimeSpan renderingTime);
+  void StopAnimationsForNode(int64_t tag);
+  void UpdateActiveAnimationIds();
+  void UpdateNodes(std::unordered_set<int64_t> &nodes);
+
   std::unordered_map<int64_t, std::unique_ptr<ValueAnimatedNode>> m_valueNodes{};
   std::unordered_map<int64_t, std::unique_ptr<PropsAnimatedNode>> m_propsNodes{};
   std::unordered_map<int64_t, std::unique_ptr<StyleAnimatedNode>> m_styleNodes{};
@@ -113,6 +130,12 @@ class NativeAnimatedNodeManager {
   std::unordered_map<int64_t, int64_t> m_deferredAnimationForValues{};
   std::vector<std::tuple<int64_t, int64_t>> m_trackingAndLeadNodeTags{};
   std::vector<int64_t> m_delayedPropsNodes{};
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+
+  std::unordered_set<int64_t> m_updatedNodes{};
+  std::vector<int64_t> m_activeAnimationIds{};
+  int64_t m_animatedGraphBFSColor{};
+  xaml::Media::CompositionTarget::Rendering_revoker m_renderingRevoker;
 
   static constexpr std::string_view s_toValueIdName{"toValue"};
   static constexpr std::string_view s_framesName{"frames"};