@react-native-ohos/react-native-reanimated 3.18.2-rc.2 → 4.0.1

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/core/CSSAnimation.cpp

@@ -0,0 +1,127 @@
+#include <reanimated/CSS/core/CSSAnimation.h>
+
+#include <memory>
+#include <string>
+#include <utility>
+
+namespace reanimated::css {
+
+CSSAnimation::CSSAnimation(
+    jsi::Runtime &rt,
+    std::shared_ptr<const ShadowNode> shadowNode,
+    std::string animationName,
+    const CSSKeyframesConfig &cssKeyframesConfig,
+    const CSSAnimationSettings &settings,
+    const double timestamp)
+    : name_(std::move(animationName)),
+      shadowNode_(std::move(shadowNode)),
+      fillMode_(settings.fillMode),
+      styleInterpolator_(cssKeyframesConfig.styleInterpolator),
+      progressProvider_(std::make_shared<AnimationProgressProvider>(
+          timestamp,
+          settings.duration,
+          settings.delay,
+          settings.iterationCount,
+          settings.direction,
+          settings.easingFunction,
+          cssKeyframesConfig.keyframeEasingFunctions)) {
+  if (settings.playState == AnimationPlayState::Paused) {
+    progressProvider_->pause(timestamp);
+  }
+}
+
+const std::string &CSSAnimation::getName() const {
+  return name_;
+}
+
+std::shared_ptr<const ShadowNode> CSSAnimation::getShadowNode() const {
+  return shadowNode_;
+}
+
+double CSSAnimation::getStartTimestamp(const double timestamp) const {
+  return progressProvider_->getStartTimestamp(timestamp);
+}
+
+AnimationProgressState CSSAnimation::getState(double timestamp) const {
+  return progressProvider_->getState(timestamp);
+}
+
+bool CSSAnimation::isReversed() const {
+  const auto direction = progressProvider_->getDirection();
+  return direction == AnimationDirection::Reverse || direction == AnimationDirection::AlternateReverse;
+}
+
+bool CSSAnimation::hasForwardsFillMode() const {
+  return fillMode_ == AnimationFillMode::Forwards || fillMode_ == AnimationFillMode::Both;
+}
+
+bool CSSAnimation::hasBackwardsFillMode() const {
+  return fillMode_ == AnimationFillMode::Backwards || fillMode_ == AnimationFillMode::Both;
+}
+
+folly::dynamic CSSAnimation::getCurrentInterpolationStyle() const {
+  return styleInterpolator_->interpolate(shadowNode_, progressProvider_, FALLBACK_INTERPOLATION_THRESHOLD);
+}
+
+folly::dynamic CSSAnimation::getBackwardsFillStyle() const {
+  return isReversed() ? styleInterpolator_->getLastKeyframeValue() : styleInterpolator_->getFirstKeyframeValue();
+}
+
+folly::dynamic CSSAnimation::getResetStyle() const {
+  return styleInterpolator_->getResetStyle(shadowNode_);
+}
+
+void CSSAnimation::run(const double timestamp) {
+  if (progressProvider_->getState(timestamp) == AnimationProgressState::Finished) {
+    return;
+  }
+  progressProvider_->play(timestamp);
+}
+
+folly::dynamic CSSAnimation::update(const double timestamp) {
+  progressProvider_->update(timestamp);
+
+  // Check if the animation has not started yet because of the delay
+  // (In general, it shouldn't be activated until the delay has passed but we
+  // add this check to make sure that animation doesn't start with the negative
+  // progress)
+  if (progressProvider_->getState(timestamp) == AnimationProgressState::Pending) {
+    return hasBackwardsFillMode() ? getBackwardsFillStyle() : folly::dynamic();
+  }
+
+  return styleInterpolator_->interpolate(shadowNode_, progressProvider_, FALLBACK_INTERPOLATION_THRESHOLD);
+}
+
+void CSSAnimation::updateSettings(const PartialCSSAnimationSettings &updatedSettings, const double timestamp) {
+  progressProvider_->resetProgress();
+
+  if (updatedSettings.duration.has_value()) {
+    progressProvider_->setDuration(updatedSettings.duration.value());
+  }
+  if (updatedSettings.easingFunction.has_value()) {
+    progressProvider_->setEasingFunction(updatedSettings.easingFunction.value());
+  }
+  if (updatedSettings.delay.has_value()) {
+    progressProvider_->setDelay(updatedSettings.delay.value());
+  }
+  if (updatedSettings.iterationCount.has_value()) {
+    progressProvider_->setIterationCount(updatedSettings.iterationCount.value());
+  }
+  if (updatedSettings.direction.has_value()) {
+    progressProvider_->setDirection(updatedSettings.direction.value());
+  }
+  if (updatedSettings.fillMode.has_value()) {
+    fillMode_ = updatedSettings.fillMode.value();
+  }
+  if (updatedSettings.playState.has_value()) {
+    if (updatedSettings.playState.value() == AnimationPlayState::Paused) {
+      progressProvider_->pause(timestamp);
+    } else {
+      progressProvider_->play(timestamp);
+    }
+  }
+
+  progressProvider_->update(timestamp);
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/core/CSSAnimation.h

@@ -0,0 +1,51 @@
+#pragma once
+
+#include <reanimated/CSS/configs/CSSAnimationConfig.h>
+#include <reanimated/CSS/configs/CSSKeyframesConfig.h>
+#include <reanimated/CSS/progress/AnimationProgressProvider.h>
+
+#include <memory>
+#include <string>
+
+namespace reanimated::css {
+
+class CSSAnimation {
+ public:
+  static constexpr double FALLBACK_INTERPOLATION_THRESHOLD = 0.5;
+
+  CSSAnimation(
+      jsi::Runtime &rt,
+      std::shared_ptr<const ShadowNode> shadowNode,
+      std::string animationName,
+      const CSSKeyframesConfig &cssKeyframesConfig,
+      const CSSAnimationSettings &settings,
+      double timestamp);
+
+  const std::string &getName() const;
+  std::shared_ptr<const ShadowNode> getShadowNode() const;
+
+  double getStartTimestamp(double timestamp) const;
+  AnimationProgressState getState(double timestamp) const;
+  bool isReversed() const;
+
+  bool hasForwardsFillMode() const;
+  bool hasBackwardsFillMode() const;
+
+  folly::dynamic getCurrentInterpolationStyle() const;
+  folly::dynamic getBackwardsFillStyle() const;
+  folly::dynamic getResetStyle() const;
+
+  void run(double timestamp);
+  folly::dynamic update(double timestamp);
+  void updateSettings(const PartialCSSAnimationSettings &updatedSettings, double timestamp);
+
+ private:
+  const std::string name_;
+  const std::shared_ptr<const ShadowNode> shadowNode_;
+  AnimationFillMode fillMode_;
+
+  const std::shared_ptr<AnimationStyleInterpolator> styleInterpolator_;
+  const std::shared_ptr<AnimationProgressProvider> progressProvider_;
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/core/CSSTransition.cpp

@@ -0,0 +1,145 @@
+#include <reanimated/CSS/core/CSSTransition.h>
+
+#include <memory>
+#include <string>
+#include <unordered_set>
+#include <utility>
+
+namespace reanimated::css {
+
+CSSTransition::CSSTransition(
+    std::shared_ptr<const ShadowNode> shadowNode,
+    const CSSTransitionConfig &config,
+    const std::shared_ptr<ViewStylesRepository> &viewStylesRepository)
+    : shadowNode_(std::move(shadowNode)),
+      viewStylesRepository_(viewStylesRepository),
+      properties_(config.properties),
+      settings_(config.settings),
+      styleInterpolator_(TransitionStyleInterpolator(shadowNode_->getComponentName(), viewStylesRepository)),
+      progressProvider_(TransitionProgressProvider()) {
+  updateAllowedDiscreteProperties();
+}
+
+Tag CSSTransition::getViewTag() const {
+  return shadowNode_->getTag();
+}
+
+std::shared_ptr<const ShadowNode> CSSTransition::getShadowNode() const {
+  return shadowNode_;
+}
+
+double CSSTransition::getMinDelay(double timestamp) const {
+  return progressProvider_.getMinDelay(timestamp);
+}
+
+TransitionProgressState CSSTransition::getState() const {
+  return progressProvider_.getState();
+}
+
+folly::dynamic CSSTransition::getCurrentInterpolationStyle() const {
+  return styleInterpolator_.interpolate(shadowNode_, progressProvider_, allowDiscreteProperties_);
+}
+
+TransitionProperties CSSTransition::getProperties() const {
+  return properties_;
+}
+
+PropertyNames CSSTransition::getAllowedProperties(const folly::dynamic &oldProps, const folly::dynamic &newProps) {
+  if (!oldProps.isObject() || !newProps.isObject()) {
+    return {};
+  }
+
+  // If specific properties are set, process only those
+  if (properties_.has_value()) {
+    PropertyNames allowedProps;
+    const auto &properties = properties_.value();
+    allowedProps.reserve(properties.size());
+
+    for (const auto &prop : properties) {
+      if (isAllowedProperty(prop)) {
+        allowedProps.push_back(prop);
+      }
+    }
+
+    return allowedProps;
+  }
+
+  // Process all properties from both old and new props
+  std::unordered_set<std::string> allAllowedProps;
+
+  for (const auto &props : {oldProps, newProps}) {
+    for (const auto &propertyName : props.keys()) {
+      if (isAllowedProperty(propertyName.asString())) {
+        allAllowedProps.insert(propertyName.asString());
+      }
+    }
+  }
+
+  return {allAllowedProps.begin(), allAllowedProps.end()};
+}
+
+void CSSTransition::updateSettings(const PartialCSSTransitionConfig &config) {
+  if (config.properties.has_value()) {
+    updateTransitionProperties(config.properties.value());
+  }
+  if (config.settings.has_value()) {
+    settings_ = config.settings.value();
+    updateAllowedDiscreteProperties();
+  }
+}
+
+folly::dynamic
+CSSTransition::run(const ChangedProps &changedProps, const folly::dynamic &lastUpdateValue, const double timestamp) {
+  progressProvider_.runProgressProviders(
+      timestamp,
+      settings_,
+      changedProps.changedPropertyNames,
+      styleInterpolator_.getReversedPropertyNames(changedProps.newProps));
+  styleInterpolator_.updateInterpolatedProperties(changedProps, lastUpdateValue);
+  return update(timestamp);
+}
+
+folly::dynamic CSSTransition::update(const double timestamp) {
+  progressProvider_.update(timestamp);
+  auto result = styleInterpolator_.interpolate(shadowNode_, progressProvider_, allowDiscreteProperties_);
+  // Remove interpolators for which interpolation has finished
+  // (we won't need them anymore in the current transition)
+  styleInterpolator_.discardFinishedInterpolators(progressProvider_);
+  // And remove finished progress providers after they were used to calculate
+  // the last frame of the transition
+  progressProvider_.discardFinishedProgressProviders();
+  return result;
+}
+
+void CSSTransition::updateTransitionProperties(const TransitionProperties &properties) {
+  properties_ = properties;
+
+  const auto isAllPropertiesTransition = !properties_.has_value();
+  if (isAllPropertiesTransition) {
+    return;
+  }
+
+  const std::unordered_set<std::string> transitionPropertyNames(properties_->begin(), properties_->end());
+
+  styleInterpolator_.discardIrrelevantInterpolators(transitionPropertyNames);
+  progressProvider_.discardIrrelevantProgressProviders(transitionPropertyNames);
+}
+
+void CSSTransition::updateAllowedDiscreteProperties() {
+  allowDiscreteProperties_.clear();
+  for (const auto &[propertyName, propertySettings] : settings_) {
+    if (propertySettings.allowDiscrete) {
+      allowDiscreteProperties_.insert(propertyName);
+    }
+  }
+}
+
+bool CSSTransition::isAllowedProperty(const std::string &propertyName) const {
+  if (!isDiscreteProperty(propertyName, shadowNode_->getComponentName())) {
+    return true;
+  }
+
+  return allowDiscreteProperties_.contains(propertyName) || allowDiscreteProperties_.contains("all");
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/core/CSSTransition.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <reanimated/CSS/configs/CSSTransitionConfig.h>
+#include <reanimated/CSS/easing/EasingFunctions.h>
+#include <reanimated/CSS/interpolation/styles/TransitionStyleInterpolator.h>
+#include <reanimated/CSS/progress/TransitionProgressProvider.h>
+
+#include <memory>
+#include <string>
+#include <unordered_set>
+
+namespace reanimated::css {
+
+class CSSTransition {
+ public:
+  CSSTransition(
+      std::shared_ptr<const ShadowNode> shadowNode,
+      const CSSTransitionConfig &config,
+      const std::shared_ptr<ViewStylesRepository> &viewStylesRepository);
+
+  Tag getViewTag() const;
+  std::shared_ptr<const ShadowNode> getShadowNode() const;
+  double getMinDelay(double timestamp) const;
+  TransitionProgressState getState() const;
+  folly::dynamic getCurrentInterpolationStyle() const;
+  TransitionProperties getProperties() const;
+  PropertyNames getAllowedProperties(const folly::dynamic &oldProps, const folly::dynamic &newProps);
+
+  void updateSettings(const PartialCSSTransitionConfig &config);
+  folly::dynamic run(const ChangedProps &changedProps, const folly::dynamic &lastUpdateValue, double timestamp);
+  folly::dynamic update(double timestamp);
+
+ private:
+  const std::shared_ptr<const ShadowNode> shadowNode_;
+  const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
+  std::unordered_set<std::string> allowDiscreteProperties_;
+  TransitionProperties properties_;
+  CSSTransitionPropertiesSettings settings_;
+  TransitionStyleInterpolator styleInterpolator_;
+  TransitionProgressProvider progressProvider_;
+
+  void updateTransitionProperties(const TransitionProperties &properties);
+  void updateAllowedDiscreteProperties();
+  bool isAllowedProperty(const std::string &propertyName) const;
+};
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/EasingFunctions.cpp

@@ -0,0 +1,69 @@
+#include <reanimated/CSS/easing/EasingFunctions.h>
+
+#include <string>
+#include <unordered_map>
+#include <vector>
+
+namespace reanimated::css {
+
+inline const std::unordered_map<std::string, EasingFunction> PREDEFINED_EASING_MAP = {
+    {"linear",
+     [](double x) {
+       return x;
+     }},
+    {"ease", cubicBezier(0.25, 0.1, 0.25, 0.1)},
+    {"ease-in", cubicBezier(0.42, 0.0, 1.0, 1.0)},
+    {"ease-out", cubicBezier(0.0, 0.0, 0.58, 1.0)},
+    {"ease-in-out", cubicBezier(0.42, 0.0, 0.58, 1.0)},
+    {"step-start", steps(std::vector<double>{0}, std::vector<double>{1})},
+    {"step-end", steps(std::vector<double>{0, 1}, std::vector<double>{0, 1})}};
+
+EasingFunction createEasingFunction(jsi::Runtime &rt, const jsi::Value &easingConfig) {
+  if (easingConfig.isString()) {
+    return getPredefinedEasingFunction(easingConfig.asString(rt).utf8(rt));
+  } else if (easingConfig.isObject()) {
+    return createParametrizedEasingFunction(rt, easingConfig.asObject(rt));
+  } else {
+    throw std::runtime_error(std::string("[Reanimated] Invalid easing function"));
+  }
+}
+
+EasingFunction getPredefinedEasingFunction(const std::string &name) {
+  auto it = PREDEFINED_EASING_MAP.find(name);
+  if (it != PREDEFINED_EASING_MAP.end()) {
+    return it->second;
+  } else {
+    throw std::runtime_error(std::string("[Reanimated] Easing function with name '" + name + "' is not defined."));
+  }
+}
+
+EasingFunction createParametrizedEasingFunction(jsi::Runtime &rt, const jsi::Object &easingConfig) {
+  const auto easingName = easingConfig.getProperty(rt, "name").asString(rt).utf8(rt);
+
+  if (easingName == "cubicBezier") {
+    return cubicBezier(rt, easingConfig);
+  }
+
+  std::vector<double> pointsX;
+  std::vector<double> pointsY;
+
+  const auto points = easingConfig.getProperty(rt, "points").asObject(rt).asArray(rt);
+  const auto pointsCount = points.size(rt);
+
+  for (size_t i = 0; i < pointsCount; i++) {
+    const auto pointObj = points.getValueAtIndex(rt, i).asObject(rt);
+    pointsX.push_back(pointObj.getProperty(rt, "x").asNumber());
+    pointsY.push_back(pointObj.getProperty(rt, "y").asNumber());
+  }
+
+  if (easingName == "linear") {
+    return linear(pointsX, pointsY);
+  } else if (easingName == "steps") {
+    return steps(pointsX, pointsY);
+  } else {
+    throw std::runtime_error(
+        std::string("[Reanimated] Parametrized easing function with name '" + easingName + "' is not defined."));
+  }
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/EasingFunctions.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include <reanimated/CSS/easing/cubicBezier.h>
+#include <reanimated/CSS/easing/linear.h>
+#include <reanimated/CSS/easing/steps.h>
+
+#include <jsi/jsi.h>
+#include <string>
+#include <unordered_map>
+
+namespace reanimated::css {
+
+using namespace facebook;
+
+extern const std::unordered_map<std::string, EasingFunction> PREDEFINED_EASING_MAP;
+
+EasingFunction getPredefinedEasingFunction(const std::string &name);
+EasingFunction createParametrizedEasingFunction(jsi::Runtime &rt, const jsi::Object &easingConfig);
+
+EasingFunction createEasingFunction(jsi::Runtime &rt, const jsi::Value &easingConfig);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/cubicBezier.cpp

@@ -0,0 +1,66 @@
+#include <reanimated/CSS/easing/cubicBezier.h>
+
+namespace reanimated::css {
+
+double sampleCurveX(const double t, const double x1, const double x2) {
+  return 3 * (1 - t) * (1 - t) * t * x1 + 3 * (1 - t) * t * t * x2 + t * t * t;
+}
+
+double sampleCurveY(const double t, const double y1, const double y2) {
+  return 3 * (1 - t) * (1 - t) * t * y1 + 3 * (1 - t) * t * t * y2 + t * t * t;
+}
+
+double sampleCurveDerivativeX(const double t, const double x1, const double x2) {
+  return -6 * (1 - t) * t * x1 + 3 * (1 - t) * (1 - t) * x1 + 6 * (1 - t) * t * x2 - 6 * t * t * x2 + 3 * t * t;
+}
+
+double solveCurveX(const double x, const double x1, const double x2, const double epsilon) {
+  double t0 = 0.0, t1 = 1.0, t2 = x, xValue, dX;
+  int iterations = 0;
+
+  while (iterations < 8) {
+    xValue = sampleCurveX(t2, x1, x2) - x;
+    if (std::abs(xValue) < epsilon) {
+      return t2;
+    }
+    dX = sampleCurveDerivativeX(t2, x1, x2);
+    if (std::abs(dX) < epsilon) {
+      break;
+    }
+    t2 = t2 - xValue / dX;
+    iterations++;
+  }
+
+  // Fallback: Use binary search
+  while (t0 < t1) {
+    t2 = (t0 + t1) / 2.0;
+    xValue = sampleCurveX(t2, x1, x2);
+    if (std::abs(xValue - x) < epsilon) {
+      return t2;
+    }
+    if (x > xValue) {
+      t0 = t2;
+    } else {
+      t1 = t2;
+    }
+  }
+
+  return t2;
+}
+
+EasingFunction cubicBezier(const double x1, const double y1, const double x2, const double y2) {
+  return [=](double x) {
+    double t = solveCurveX(x, x1, x2);
+    return sampleCurveY(t, y1, y2);
+  };
+}
+
+EasingFunction cubicBezier(jsi::Runtime &rt, const jsi::Object &easingConfig) {
+  const auto x1 = easingConfig.getProperty(rt, "x1").asNumber();
+  const auto y1 = easingConfig.getProperty(rt, "y1").asNumber();
+  const auto x2 = easingConfig.getProperty(rt, "x2").asNumber();
+  const auto y2 = easingConfig.getProperty(rt, "y2").asNumber();
+  return cubicBezier(x1, y1, x2, y2);
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/cubicBezier.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <reanimated/CSS/common/definitions.h>
+
+namespace reanimated::css {
+
+double sampleCurveX(double t, double x1, double x2);
+double sampleCurveY(double t, double y1, double y2);
+double sampleCurveDerivativeX(double t, double x1, double x2);
+double solveCurveX(double x, double x1, double x2, double epsilon = 1e-6);
+
+EasingFunction cubicBezier(double x1, double y1, double x2, double y2);
+EasingFunction cubicBezier(jsi::Runtime &rt, const jsi::Object &easingConfig);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/linear.cpp

@@ -0,0 +1,28 @@
+#include <reanimated/CSS/easing/linear.h>
+
+#include <vector>
+
+namespace reanimated::css {
+
+double
+interpolateValue(double x, size_t leftIdx, const std::vector<double> &pointsX, const std::vector<double> &pointsY) {
+  if (leftIdx == pointsX.size() - 1) {
+    // We are exactly on the last point of the curve, we just return its y
+    // coordinate
+    return pointsY[leftIdx];
+  }
+  const auto rightIdx = leftIdx + 1;
+  // Calculate the line equation for the line between leftIdx and rightIdx
+  // points
+  const auto a = (pointsY[rightIdx] - pointsY[leftIdx]) / (pointsX[rightIdx] - pointsX[leftIdx]);
+  return pointsY[leftIdx] + a * (x - pointsX[leftIdx]);
+}
+
+EasingFunction linear(const std::vector<double> &pointsX, const std::vector<double> &pointsY) {
+  return [=](double x) {
+    size_t leftIdx = firstSmallerOrEqual(x, pointsX);
+    return interpolateValue(x, leftIdx, pointsX, pointsY);
+  };
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/linear.h

@@ -0,0 +1,15 @@
+#pragma once
+
+#include <reanimated/CSS/common/definitions.h>
+#include <reanimated/CSS/utils/algorithms.h>
+
+#include <vector>
+
+namespace reanimated::css {
+
+double
+interpolateValue(double x, std::size_t leftIdx, const std::vector<double> &arrX, const std::vector<double> &arrY);
+
+EasingFunction linear(const std::vector<double> &pointsX, const std::vector<double> &pointsY);
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/steps.cpp

@@ -0,0 +1,13 @@
+#include <reanimated/CSS/easing/steps.h>
+
+#include <vector>
+
+namespace reanimated::css {
+EasingFunction steps(const std::vector<double> &pointsX, const std::vector<double> &pointsY) {
+  return [=](double x) {
+    size_t stepIdx = firstSmallerOrEqual(x, pointsX);
+    return pointsY[stepIdx];
+  };
+}
+
+} // namespace reanimated::css

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/CSS/easing/steps.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#include <reanimated/CSS/common/definitions.h>
+#include <reanimated/CSS/utils/algorithms.h>
+
+#include <vector>
+
+namespace reanimated::css {
+
+EasingFunction steps(const std::vector<double> &pointsX, const std::vector<double> &pointsY);
+
+} // namespace reanimated::css