Adds color animated nodes to tick-driven animations

This change adds color animation support when `platformConfig: { useComposition: false }` is set. It unblocks usage of Animated.Color nodes with the NativeAnimated module.

Author: rozele

vnext/Microsoft.ReactNative/Modules/Animated/AnimatedNodeType.h

@@ -18,6 +18,7 @@ enum class AnimatedNodeType {
   Diffclamp,
   Transform,
   Tracking,
+  Color,
 };
 
 static AnimatedNodeType AnimatedNodeTypeFromString(const std::string &string) {
@@ -43,7 +44,8 @@ static AnimatedNodeType AnimatedNodeTypeFromString(const std::string &string) {
     return AnimatedNodeType::Diffclamp;
   if (string == "transform")
     return AnimatedNodeType::Transform;
-
-  assert(string == "tracking");
-  return AnimatedNodeType::Tracking;
+  if (string == "tracking")
+    return AnimatedNodeType::Tracking;
+  assert(string == "color");
+  return AnimatedNodeType::Color;
 };

vnext/Microsoft.ReactNative/Modules/Animated/ColorAnimatedNode.cpp

@@ -0,0 +1,81 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+
+#include <UI.Composition.h>
+#include "ColorAnimatedNode.h"
+#include "NativeAnimatedNodeManager.h"
+#include <Utils/ValueUtils.h>
+
+namespace Microsoft::ReactNative {
+ColorAnimatedNode::ColorAnimatedNode(
+    int64_t tag,
+    const winrt::Microsoft::ReactNative::JSValueObject &config,
+    const std::shared_ptr<NativeAnimatedNodeManager> &manager)
+    : AnimatedNode(tag, config, manager) {
+  m_rNodeId = config[s_rNodeName].AsInt32();
+  m_gNodeId = config[s_gNodeName].AsInt32();
+  m_bNodeId = config[s_bNodeName].AsInt32();
+  m_aNodeId = config[s_aNodeName].AsInt32();
+  m_nativeColor = config[s_nativeColorName].Copy();
+
+  if (!m_useComposition) {
+    TryApplyNativeColor();
+  } else {
+    assert(false && "ColorAnimatedNode not supported");
+  }
+}
+
+uint32_t ColorAnimatedNode::GetColor() {
+  uint8_t r = 0;
+  uint8_t g = 0;
+  uint8_t b = 0;
+  uint8_t a = 0;
+
+  if (const auto manager = m_manager.lock()) {
+    if (const auto rNode = manager->GetValueAnimatedNode(m_rNodeId)) {
+      r = std::clamp(static_cast<uint32_t>(std::round(rNode->Value())), 0u, 255u);
+    }
+    if (const auto gNode = manager->GetValueAnimatedNode(m_gNodeId)) {
+      g = std::clamp(static_cast<uint32_t>(std::round(gNode->Value())), 0u, 255u);
+    }
+    if (const auto bNode = manager->GetValueAnimatedNode(m_bNodeId)) {
+      b = std::clamp(static_cast<uint32_t>(std::round(bNode->Value())), 0u, 255u);
+    }
+    if (const auto aNode = manager->GetValueAnimatedNode(m_aNodeId)) {
+      a = std::clamp(static_cast<uint32_t>(std::round(aNode->Value() * 255)), 0u, 255u);
+    }
+  }
+
+  const auto result = (a << 24) | (r << 16) | (g << 8) | b;
+  return result;
+}
+
+void ColorAnimatedNode::TryApplyNativeColor() {
+  if (m_nativeColor.IsNull()) {
+    return;
+  }
+
+  const auto brush = BrushFromColorObject(m_nativeColor).try_as<xaml::Media::SolidColorBrush>();
+  if (!brush) {
+    return;
+  }
+
+  if (const auto manager = m_manager.lock()) {
+    if (const auto rNode = manager->GetValueAnimatedNode(m_rNodeId)) {
+      rNode->RawValue(brush.Color().R);
+    }
+    if (const auto gNode = manager->GetValueAnimatedNode(m_gNodeId)) {
+      gNode->RawValue(brush.Color().G);
+    }
+    if (const auto bNode = manager->GetValueAnimatedNode(m_bNodeId)) {
+      bNode->RawValue(brush.Color().B);
+    }
+    if (const auto aNode = manager->GetValueAnimatedNode(m_aNodeId)) {
+      aNode->RawValue(static_cast<double>(brush.Color().A) / 255);
+    }
+  }
+}
+
+} // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Modules/Animated/ColorAnimatedNode.h

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+#include "AnimatedNode.h"
+
+namespace Microsoft::ReactNative {
+class ColorAnimatedNode final : public AnimatedNode {
+ public:
+  ColorAnimatedNode(
+      int64_t tag,
+      const winrt::Microsoft::ReactNative::JSValueObject &config,
+      const std::shared_ptr<NativeAnimatedNodeManager> &manager);
+
+  uint32_t GetColor();
+
+ private:
+  void TryApplyNativeColor();
+
+  int32_t m_rNodeId{};
+  int32_t m_gNodeId{};
+  int32_t m_bNodeId{};
+  int32_t m_aNodeId{};
+  winrt::Microsoft::ReactNative::JSValue m_nativeColor{};
+
+  static constexpr std::string_view s_rNodeName{"r"};
+  static constexpr std::string_view s_gNodeName{"g"};
+  static constexpr std::string_view s_bNodeName{"b"};
+  static constexpr std::string_view s_aNodeName{"a"};
+  static constexpr std::string_view s_nativeColorName{"nativeColor"};
+};
+} // namespace Microsoft::ReactNative

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

@@ -118,6 +118,10 @@ void NativeAnimatedNodeManager::CreateAnimatedNode(
       m_trackingNodes.emplace(tag, std::make_unique<TrackingAnimatedNode>(tag, config, manager));
       break;
     }
+    case AnimatedNodeType::Color: {
+      m_colorNodes.emplace(tag, std::make_unique<ColorAnimatedNode>(tag, config, manager));
+      break;
+    }
     default: {
       assert(false);
       break;
@@ -483,6 +487,9 @@ AnimatedNode *NativeAnimatedNodeManager::GetAnimatedNode(int64_t tag) {
   if (m_trackingNodes.count(tag)) {
     return m_trackingNodes.at(tag).get();
   }
+  if (m_colorNodes.count(tag)) {
+    return m_colorNodes.at(tag).get();
+  }
   return static_cast<AnimatedNode *>(nullptr);
 }
 
@@ -521,6 +528,13 @@ TrackingAnimatedNode *NativeAnimatedNodeManager::GetTrackingAnimatedNode(int64_t
   return nullptr;
 }
 
+ColorAnimatedNode *NativeAnimatedNodeManager::GetColorAnimatedNode(int64_t tag) {
+  if (m_colorNodes.count(tag)) {
+    return m_colorNodes.at(tag).get();
+  }
+  return nullptr;
+}
+
 void NativeAnimatedNodeManager::RemoveActiveAnimation(int64_t tag) {
   m_activeAnimations.erase(tag);
 }

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

@@ -10,6 +10,7 @@
 #include <folly/dynamic.h>
 #include "AnimatedNode.h"
 #include "AnimationDriver.h"
+#include "ColorAnimatedNode.h"
 #include "EventAnimationDriver.h"
 #include "PropsAnimatedNode.h"
 #include "StyleAnimatedNode.h"
@@ -98,6 +99,7 @@ class NativeAnimatedNodeManager {
   StyleAnimatedNode *GetStyleAnimatedNode(int64_t tag);
   TransformAnimatedNode *GetTransformAnimatedNode(int64_t tag);
   TrackingAnimatedNode *GetTrackingAnimatedNode(int64_t tag);
+  ColorAnimatedNode *GetColorAnimatedNode(int64_t tag);
 
   void RemoveActiveAnimation(int64_t tag);
   void RemoveStoppedAnimation(int64_t tag, const std::shared_ptr<NativeAnimatedNodeManager> &manager);
@@ -122,6 +124,7 @@ class NativeAnimatedNodeManager {
   std::unordered_map<int64_t, std::unique_ptr<StyleAnimatedNode>> m_styleNodes{};
   std::unordered_map<int64_t, std::unique_ptr<TransformAnimatedNode>> m_transformNodes{};
   std::unordered_map<int64_t, std::unique_ptr<TrackingAnimatedNode>> m_trackingNodes{};
+  std::unordered_map<int64_t, std::unique_ptr<ColorAnimatedNode>> m_colorNodes{};
   std::unordered_map<std::tuple<int64_t, std::string>, std::vector<std::unique_ptr<EventAnimationDriver>>>
       m_eventDrivers{};
   std::unordered_map<int64_t, std::shared_ptr<AnimationDriver>> m_activeAnimations{};

vnext/Microsoft.ReactNative/Modules/Animated/PropsAnimatedNode.cpp

@@ -129,6 +129,15 @@ void PropsAnimatedNode::UpdateView() {
         } else {
           m_props[entry.first] = valueNode->Value();
         }
+      } else if (const auto &colorNode = manager->GetColorAnimatedNode(entry.second)) {
+        if (m_useComposition) {
+          const auto &facade = StringToFacadeType(entry.first);
+          if (facade != FacadeType::None) {
+            MakeAnimation(entry.second, facade);
+          }
+        } else {
+          m_props[entry.first] = colorNode->GetColor();
+        }
       }
     }
   }

vnext/Microsoft.ReactNative/Modules/Animated/StyleAnimatedNode.cpp

@@ -28,6 +28,8 @@ void StyleAnimatedNode::CollectViewUpdates(winrt::Microsoft::ReactNative::JSValu
         transformNode->CollectViewUpdates(propsMap);
       } else if (const auto node = manager->GetValueAnimatedNode(propMapping.second)) {
         propsMap[propMapping.first] = node->Value();
+      } else if (const auto node = manager->GetColorAnimatedNode(propMapping.second)) {
+        propsMap[propMapping.first] = node->GetColor();
       }
     }
   }