Adds color animated nodes to tick-driven animations

rozele · rozele · commit 34161d8107e6 · 2024-03-28T09:48:16.000-04:00
This change adds color animation support when `platformConfig: { useComposition: false }` is set. It unblocks usage of Animated.Color nodes with the NativeAnimated module.
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/AnimatedNodeType.h b/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;
 };
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/ColorAnimatedNode.cpp b/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
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/ColorAnimatedNode.h b/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
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.cpp b/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);
 }
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.h b/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{};
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/PropsAnimatedNode.cpp b/vnext/Microsoft.ReactNative/Modules/Animated/PropsAnimatedNode.cpp
@@ -19,6 +19,9 @@
 #include <Fabric/Composition/CompositionContextHelper.h>
 #include <Fabric/Composition/CompositionUIService.h>
 #include <Fabric/FabricUIManagerModule.h>
+#elif USE_WINUI_FABRIC
+#include <Fabric/WinUI/Components/FrameworkElementComponentView.h>
+#include <Fabric/WinUI/FabricUIManagerModule.h>
 #endif
 
 namespace Microsoft::ReactNative {
@@ -129,6 +132,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();
+        }
       }
     }
   }
@@ -347,6 +359,14 @@ xaml::UIElement PropsAnimatedNode::GetUIElement() {
 
 void PropsAnimatedNode::CommitProps() {
 #ifndef CORE_ABI
+#ifdef USE_WINUI_FABRIC
+  if (auto fabricuiManager = FabricUIManager::FromProperties(m_context.Properties())) {
+    if (fabricuiManager->synchronouslyUpdateViewOnUIThread(
+            static_cast<facebook::react::Tag>(m_connectedViewTag), m_props)) {
+      return;
+    }
+  }
+#endif
   if (const auto node = GetShadowNodeBase()) {
     if (!node->m_zombie) {
       node->updateProperties(m_props);
@@ -356,20 +376,26 @@ void PropsAnimatedNode::CommitProps() {
 }
 
 PropsAnimatedNode::AnimationView PropsAnimatedNode::GetAnimationView() {
-#ifdef USE_FABRIC
+#ifdef USE_FABRIC_CORE
   if (auto fabricuiManager = FabricUIManager::FromProperties(m_context.Properties())) {
     auto componentView = fabricuiManager->GetViewRegistry().findComponentViewWithTag(
         static_cast<facebook::react::Tag>(m_connectedViewTag));
     if (componentView) {
+#ifdef USE_WINUI_FABRIC
+      if (componentView->Element().try_as<xaml::FrameworkElement>()) {
+        return {nullptr, std::static_pointer_cast<FrameworkElementComponentView>(componentView)};
+      }
+#else
       return {nullptr, componentView};
+#endif
     }
   }
-#endif // USE_FABRIC
+#endif // USE_FABRIC_CORE
 #ifndef CORE_ABI
   if (IsRS5OrHigher()) {
     if (const auto shadowNodeBase = GetShadowNodeBase()) {
       if (const auto shadowNodeView = shadowNodeBase->GetView()) {
-#ifdef USE_FABRIC
+#ifdef USE_FABRIC_CORE
         return {shadowNodeView.as<xaml::UIElement>(), nullptr};
 #else
         return {shadowNodeView.as<xaml::UIElement>()};
@@ -379,7 +405,7 @@ PropsAnimatedNode::AnimationView PropsAnimatedNode::GetAnimationView() {
   }
 #endif // CORE_ABI
 
-#ifdef USE_FABRIC
+#ifdef USE_FABRIC_CORE
   return {nullptr, nullptr};
 #else
   return {nullptr};
@@ -412,6 +438,9 @@ void PropsAnimatedNode::StartAnimation(
       }
       visual.StartAnimation(targetProp, animation);
     }
+#elif USE_WINUI_FABRIC
+  } else if (view.m_componentView) {
+    view.m_componentView->Element().as<xaml::UIElement>().StartAnimation(animation);
 #endif
   }
 }
@@ -427,6 +456,11 @@ comp::CompositionPropertySet PropsAnimatedNode::EnsureCenterPointPropertySet(con
     return view.m_componentView.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()
         ->EnsureCenterPointPropertySet();
   }
+#endif
+#ifdef USE_WINUI_FABRIC
+  if (view.m_componentView) {
+    return view.m_componentView->EnsureCenterPointPropertySet();
+  }
 #endif
   return nullptr;
 }
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/StyleAnimatedNode.cpp b/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();
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,8 @@ void StyleAnimatedNode::CollectViewUpdates(winrt::Microsoft::ReactNative::JSValu`
`28`	`28`	`transformNode->CollectViewUpdates(propsMap);`
`29`	`29`	`} else if (const auto node = manager->GetValueAnimatedNode(propMapping.second)) {`
`30`	`30`	`propsMap[propMapping.first] = node->Value();`
	`31`	`+ } else if (const auto node = manager->GetColorAnimatedNode(propMapping.second)) {`
	`32`	`+ propsMap[propMapping.first] = node->GetColor();`
`31`	`33`	`}`
`32`	`34`	`}`
`33`	`35`	`}`