Resolve Transform Matrix before Animation (#13450)

sharath2727 · web-flow · commit ee9cb5f47a21 · 2024-07-16T13:38:03.000-07:00
* Resolve transform before animation

* Change files

* Minor naming fix

* noexcept
diff --git a/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json b/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Resolve transform before animation",
+  "packageName": "react-native-windows",
+  "email": "10109130+sharath2727@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
@@ -180,11 +180,46 @@ const facebook::react::LayoutMetrics &ComponentView::layoutMetrics() const noexc
   return m_layoutMetrics;
 }
 
+void ComponentView::FinalizeTransform(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    const facebook::react::ViewProps &viewProps) noexcept {
+  const auto resolveTransformMatrix = viewProps.resolveTransform(layoutMetrics);
+  winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
+  transformMatrix.m11 = resolveTransformMatrix.matrix[0];
+  transformMatrix.m12 = resolveTransformMatrix.matrix[1];
+  transformMatrix.m13 = resolveTransformMatrix.matrix[2];
+  transformMatrix.m14 = resolveTransformMatrix.matrix[3];
+  transformMatrix.m21 = resolveTransformMatrix.matrix[4];
+  transformMatrix.m22 = resolveTransformMatrix.matrix[5];
+  transformMatrix.m23 = resolveTransformMatrix.matrix[6];
+  transformMatrix.m24 = resolveTransformMatrix.matrix[7];
+  transformMatrix.m31 = resolveTransformMatrix.matrix[8];
+  transformMatrix.m32 = resolveTransformMatrix.matrix[9];
+  transformMatrix.m33 = resolveTransformMatrix.matrix[10];
+  transformMatrix.m34 = resolveTransformMatrix.matrix[11];
+  transformMatrix.m41 = resolveTransformMatrix.matrix[12];
+  transformMatrix.m42 = resolveTransformMatrix.matrix[13];
+  transformMatrix.m43 = resolveTransformMatrix.matrix[14];
+  transformMatrix.m44 = resolveTransformMatrix.matrix[15];
+
+  auto centerPointPropSet = EnsureCenterPointPropertySet();
+  if (centerPointPropSet) {
+    centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
+  }
+
+  EnsureTransformMatrixFacade();
+  m_FinalizeTransform = false;
+}
+
 void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
   if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
     finalizeBorderUpdates(m_layoutMetrics, *viewProps());
   }
 
+  if (m_FinalizeTransform) {
+    FinalizeTransform(m_layoutMetrics, *viewProps());
+  }
+
   base_type::FinalizeUpdates(updateMask);
 }
 
@@ -1246,30 +1281,7 @@ void ComponentView::updateTransformProps(
 
   // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates
   if (oldViewProps.transform != newViewProps.transform) {
-    winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
-    transformMatrix.m11 = newViewProps.transform.matrix[0];
-    transformMatrix.m12 = newViewProps.transform.matrix[1];
-    transformMatrix.m13 = newViewProps.transform.matrix[2];
-    transformMatrix.m14 = newViewProps.transform.matrix[3];
-    transformMatrix.m21 = newViewProps.transform.matrix[4];
-    transformMatrix.m22 = newViewProps.transform.matrix[5];
-    transformMatrix.m23 = newViewProps.transform.matrix[6];
-    transformMatrix.m24 = newViewProps.transform.matrix[7];
-    transformMatrix.m31 = newViewProps.transform.matrix[8];
-    transformMatrix.m32 = newViewProps.transform.matrix[9];
-    transformMatrix.m33 = newViewProps.transform.matrix[10];
-    transformMatrix.m34 = newViewProps.transform.matrix[11];
-    transformMatrix.m41 = newViewProps.transform.matrix[12];
-    transformMatrix.m42 = newViewProps.transform.matrix[13];
-    transformMatrix.m43 = newViewProps.transform.matrix[14];
-    transformMatrix.m44 = newViewProps.transform.matrix[15];
-
-    auto centerPointPropSet = EnsureCenterPointPropertySet();
-    if (centerPointPropSet) {
-      centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
-    }
-
-    EnsureTransformMatrixFacade();
+    m_FinalizeTransform = true;
   }
 }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
@@ -168,7 +168,11 @@ struct ComponentView
   std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
   FindSpecialBorderLayers() const noexcept;
   void UpdateCenterPropertySet() noexcept;
+  void FinalizeTransform(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      const facebook::react::ViewProps &viewProps) noexcept;
 
+  bool m_FinalizeTransform{false};
   ComponentViewFeatures m_flags;
   void showFocusVisual(bool show) noexcept;
   winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};
