Start working on CSS animation events

Author: MatiPl01

apps/fabric-example/ios/Podfile.lock

@@ -46,6 +46,22 @@ AnimationProgressState CSSAnimation::getState(double timestamp) const {
   return progressProvider_->getState(timestamp);
 }
 
+unsigned CSSAnimation::getCurrentIteration() const {
+  return progressProvider_->getCurrentIteration();
+}
+
+double CSSAnimation::getDuration() const {
+  return progressProvider_->getDuration();
+}
+
+double CSSAnimation::getDelay() const {
+  return progressProvider_->getDelay();
+}
+
+double CSSAnimation::getIterationCount() const {
+  return progressProvider_->getIterationCount();
+}
+
 bool CSSAnimation::isReversed() const {
   const auto direction = progressProvider_->getDirection();
   return direction == AnimationDirection::Reverse || direction == AnimationDirection::AlternateReverse;

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/CSSAnimation.cpp

@@ -26,6 +26,10 @@ class CSSAnimation {
 
   double getStartTimestamp(double timestamp) const;
   AnimationProgressState getState(double timestamp) const;
+  unsigned getCurrentIteration() const;
+  double getDuration() const;
+  double getDelay() const;
+  double getIterationCount() const;
   bool isReversed() const;
 
   bool hasForwardsFillMode() const;

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/CSSAnimation.h

@@ -0,0 +1,31 @@
+#include <reanimated/CSS/core/CSSAnimation.h>
+#include <reanimated/CSS/events/CSSAnimationEvent.h>
+
+#include <algorithm>
+
+namespace reanimated::css {
+
+CSSAnimationEvent createAnimationStartEvent(
+    const facebook::react::Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation) {
+  const auto activeDuration = animation->getDuration() * animation->getIterationCount();
+  const auto elapsedTime = std::min(std::max(-animation->getDelay(), 0.0), activeDuration);
+  return {viewTag, CSSAnimationEventType::AnimationStart, animation->getName(), elapsedTime};
+}
+
+CSSAnimationEvent createAnimationIterationEvent(
+    const facebook::react::Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation,
+    const unsigned iteration) {
+  const auto elapsedTime = static_cast<double>(iteration - 1) * animation->getDuration();
+  return {viewTag, CSSAnimationEventType::AnimationIteration, animation->getName(), elapsedTime};
+}
+
+CSSAnimationEvent createAnimationEndEvent(
+    const facebook::react::Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation) {
+  const auto elapsedTime = animation->getDuration() * animation->getIterationCount();
+  return {viewTag, CSSAnimationEventType::AnimationEnd, animation->getName(), elapsedTime};
+}
+
+} // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/events/CSSAnimationEvent.cpp

@@ -0,0 +1,43 @@
+#pragma once
+
+#include <react/renderer/core/ReactPrimitives.h>
+
+#include <cstdint>
+#include <memory>
+#include <string>
+
+namespace reanimated::css {
+
+class CSSAnimation;
+
+enum class CSSAnimationEventType : std::uint8_t {
+  AnimationStart = 1 << 0,
+  AnimationEnd = 1 << 1,
+  AnimationIteration = 1 << 2
+};
+
+// Bitmask of CSSAnimationEventType values representing which events a view
+// is listening for. A value of 0 means no listeners are registered.
+using CSSAnimationEventListeners = std::uint8_t;
+
+inline bool hasListener(CSSAnimationEventListeners listeners, CSSAnimationEventType type) {
+  return (listeners & static_cast<std::uint8_t>(type)) != 0;
+}
+
+struct CSSAnimationEvent {
+  facebook::react::Tag viewTag;
+  CSSAnimationEventType type;
+  std::string animationName;
+  double elapsedTime; // in milliseconds (convert to seconds at dispatch time)
+};
+
+CSSAnimationEvent createAnimationStartEvent(
+    facebook::react::Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation);
+CSSAnimationEvent createAnimationIterationEvent(
+    facebook::react::Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation,
+    unsigned iteration);
+CSSAnimationEvent createAnimationEndEvent(facebook::react::Tag viewTag, const std::shared_ptr<CSSAnimation> &animation);
+
+} // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/events/CSSAnimationEvent.h

@@ -35,6 +35,14 @@ AnimationDirection AnimationProgressProvider::getDirection() const {
   return direction_;
 }
 
+unsigned AnimationProgressProvider::getCurrentIteration() const {
+  return currentIteration_;
+}
+
+double AnimationProgressProvider::getIterationCount() const {
+  return iterationCount_;
+}
+
 double AnimationProgressProvider::getGlobalProgress() const {
   return applyAnimationDirection(rawProgress_.value_or(0));
 }

packages/react-native-reanimated/Common/cpp/reanimated/CSS/progress/AnimationProgressProvider.cpp

@@ -33,6 +33,8 @@ class AnimationProgressProvider final : public KeyframeProgressProvider, public
   void setEasingFunction(const EasingFunction &easingFunction);
 
   AnimationDirection getDirection() const;
+  unsigned getCurrentIteration() const;
+  double getIterationCount() const;
   double getGlobalProgress() const override;
   double getKeyframeProgress(double fromOffset, double toOffset) const override;
   AnimationProgressState getState(double timestamp) const;

packages/react-native-reanimated/Common/cpp/reanimated/CSS/progress/AnimationProgressProvider.h

@@ -5,6 +5,14 @@ namespace reanimated::css {
 RawProgressProvider::RawProgressProvider(const double timestamp, const double duration, const double delay)
     : duration_(duration), delay_(delay), creationTimestamp_(timestamp) {}
 
+double RawProgressProvider::getDuration() const {
+  return duration_;
+}
+
+double RawProgressProvider::getDelay() const {
+  return delay_;
+}
+
 void RawProgressProvider::setDuration(double duration) {
   duration_ = duration;
 }

packages/react-native-reanimated/Common/cpp/reanimated/CSS/progress/RawProgressProvider.cpp

@@ -7,6 +7,8 @@ class RawProgressProvider {
  public:
   RawProgressProvider(double timestamp, double duration, double delay);
 
+  double getDuration() const;
+  double getDelay() const;
   void setDuration(double duration);
   void setDelay(double delay);
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/progress/RawProgressProvider.h

@@ -24,10 +24,19 @@ void CSSAnimationsRegistry::apply(
     const std::optional<std::vector<std::string>> &animationNames,
     const CSSAnimationsMap &newAnimations,
     const CSSAnimationSettingsUpdatesMap &settingsUpdates,
-    double timestamp) {
+    const CSSAnimationEventListeners eventListeners,
+    const double timestamp) {
   auto animationsVector = buildAnimationsVector(rt, shadowNode, animationNames, newAnimations);
 
   const auto viewTag = shadowNode->getTag();
+
+  // Update event listener tracking based on current callback props
+  if (eventListeners != 0) {
+    eventListenersMap_[viewTag] = eventListeners;
+  } else {
+    eventListenersMap_.erase(viewTag);
+  }
+
   if (animationsVector.empty()) {
     remove(viewTag);
     return;
@@ -60,6 +69,7 @@ void CSSAnimationsRegistry::remove(const Tag viewTag) {
   removeViewAnimations(viewTag);
   removeFromUpdatesRegistry(viewTag);
   registry_.erase(viewTag);
+  eventListenersMap_.erase(viewTag);
 }
 
 void CSSAnimationsRegistry::update(const double timestamp) {
@@ -82,6 +92,12 @@ void CSSAnimationsRegistry::update(const double timestamp) {
   }
 }
 
+std::vector<CSSAnimationEvent> CSSAnimationsRegistry::flushEvents() {
+  std::vector<CSSAnimationEvent> events;
+  events.swap(pendingEvents_);
+  return events;
+}
+
 CSSAnimationsVector CSSAnimationsRegistry::buildAnimationsVector(
     jsi::Runtime &rt,
     const std::shared_ptr<const ShadowNode> &shadowNode,
@@ -175,19 +191,29 @@ void CSSAnimationsRegistry::updateViewAnimations(
   std::shared_ptr<const ShadowNode> shadowNode = nullptr;
   bool hasUpdates = false;
 
+  const bool detectEvents = eventListenersMap_.count(viewTag) > 0;
+
   for (const auto animationIndex : animationIndices) {
     const auto &animation = registry_[viewTag].animationsVector[animationIndex];
     if (!shadowNode) {
       shadowNode = animation->getShadowNode();
     }
-    if (animation->getState(timestamp) == AnimationProgressState::Pending) {
+
+    const AnimationStateSnapshot beforeSnapshot = {animation->getState(timestamp), animation->getCurrentIteration()};
+
+    if (beforeSnapshot.state == AnimationProgressState::Pending) {
       animation->run(timestamp);
     }
 
     bool updatesAddedToBatch = false;
     const auto updates = animation->update(timestamp);
     const auto newState = animation->getState(timestamp);
 
+    if (detectEvents) {
+      const AnimationStateSnapshot afterSnapshot = {newState, animation->getCurrentIteration()};
+      detectAnimationEvents(viewTag, animation, beforeSnapshot, afterSnapshot);
+    }
+
     if (newState == AnimationProgressState::Finished) {
       // Revert changes applied during animation if there is no forwards fill
       // mode
@@ -318,6 +344,29 @@ void CSSAnimationsRegistry::handleAnimationsToRevert(const double timestamp) {
   animationsToRevertMap_.clear();
 }
 
+void CSSAnimationsRegistry::detectAnimationEvents(
+    const Tag viewTag,
+    const std::shared_ptr<CSSAnimation> &animation,
+    const AnimationStateSnapshot &before,
+    const AnimationStateSnapshot &after) {
+  const auto listeners = eventListenersMap_.at(viewTag);
+
+  if (hasListener(listeners, CSSAnimationEventType::AnimationStart) &&
+      before.state == AnimationProgressState::Pending && after.state != AnimationProgressState::Pending) {
+    pendingEvents_.emplace_back(createAnimationStartEvent(viewTag, animation));
+  }
+
+  if (hasListener(listeners, CSSAnimationEventType::AnimationIteration) &&
+      after.state == AnimationProgressState::Running && after.iteration > before.iteration) {
+    pendingEvents_.emplace_back(createAnimationIterationEvent(viewTag, animation, after.iteration));
+  }
+
+  if (hasListener(listeners, CSSAnimationEventType::AnimationEnd) && before.state != AnimationProgressState::Finished &&
+      after.state == AnimationProgressState::Finished) {
+    pendingEvents_.emplace_back(createAnimationEndEvent(viewTag, animation));
+  }
+}
+
 bool CSSAnimationsRegistry::addStyleUpdates(
     folly::dynamic &target,
     const folly::dynamic &updates,