Add color interpolation (#14)

* init color interpolation

* add gamma correction to r,g,b interpolation

* fix some merge oopsies and add example

* shorten animation

* remove unneeded include

* make review requested changes

* final fixes (i hope)

* fix 0xrrggbbaa number format

Author: szydlovsky

apps/fabric-example/src/examples/AnimatedProperties/ColorsExample.tsx

@@ -1,4 +1,61 @@
-// TODO: Implement this example
+import { StyleSheet, View, SafeAreaView } from 'react-native';
+
+import React from 'react';
+import Animated from 'react-native-reanimated';
+
 export default function ColorsExample() {
-  return null;
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
+        <Animated.View
+          style={{
+            width: 200,
+            height: 200,
+            borderRadius: 30,
+            // @ts-ignore TODO
+            animationName: {
+              from: {
+                backgroundColor: 'red',
+                transform: [{ rotate: '0deg' }],
+              },
+              '16.7%': {
+                backgroundColor: 'orange',
+                transform: [{ rotate: '60deg' }],
+              },
+              '33.4%': {
+                backgroundColor: 'yellow',
+                transform: [{ rotate: '120deg' }],
+              },
+              '50.1%': {
+                backgroundColor: 'green',
+                transform: [{ rotate: '180deg' }],
+              },
+              '66.8%': {
+                backgroundColor: 'blue',
+                transform: [{ rotate: '240deg' }],
+              },
+              '83.5%': {
+                backgroundColor: 'indigo',
+                transform: [{ rotate: '300deg' }],
+              },
+              to: {
+                backgroundColor: 'violet',
+                transform: [{ rotate: '360deg' }],
+              },
+            },
+            animationDuration: '5s',
+            animationTimingFunction: 'linear',
+          }}
+        />
+      </View>
+    </SafeAreaView>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ColorValueInterpolator.cpp

@@ -2,24 +2,64 @@
 
 namespace reanimated {
 
-int ColorValueInterpolator::convertValue(
+ColorArray ColorValueInterpolator::convertValue(
     jsi::Runtime &rt,
     const jsi::Value &value) const {
-  throw std::runtime_error("[Reanimated] Not implemented");
+  // We receive colors as decimals made from AARRGGBB format hexes
+  unsigned color = static_cast<unsigned>(value.asNumber());
+  ColorArray channels;
+  channels[0] = (color << 8) >> 24; // Red
+  channels[1] = (color << 16) >> 24; // Green
+  channels[2] = (color << 24) >> 24; // Blue
+  channels[3] = color >> 24; // Alpha
+  return channels;
 }
 
 jsi::Value ColorValueInterpolator::convertToJSIValue(
     jsi::Runtime &rt,
-    const int &value) const {
-  throw std::runtime_error("[Reanimated] Not implemented");
+    const ColorArray &value) const {
+  double color =
+      (value[3] << 24) | (value[0] << 16) | (value[1] << 8) | value[2];
+  return jsi::Value(color);
 }
 
-int ColorValueInterpolator::interpolate(
+ColorArray ColorValueInterpolator::interpolate(
     double localProgress,
-    const int &fromValue,
-    const int &toValue,
+    const ColorArray &fromValue,
+    const ColorArray &toValue,
     const InterpolationUpdateContext context) const {
-  throw std::runtime_error("[Reanimated] Not implemented");
+  ColorArray resultChannels;
+
+  // interpolate rgb cahnnels using gamma correction and alpha channel without it
+  for (int i = 0; i < 4; i++) {
+    double fromChannelValue =
+        i == 3 ? fromValue[i] : toLinearSpace(fromValue[i]);
+    double toChannelValue = i == 3 ? toValue[i] : toLinearSpace(toValue[i]);
+    double interpolatedValue =
+        (toChannelValue - fromChannelValue) * localProgress + fromChannelValue;
+    resultChannels[i] =
+        i == 3 ? interpolatedValue : toGammaCorrectedSpace(interpolatedValue);
+  }
+
+  return resultChannels;
+}
+
+double ColorValueInterpolator::toLinearSpace(uint8_t value) const {
+  double normalized = double(value) / 255.0;
+  if (normalized <= 0.04045) {
+    return normalized / 12.92;
+  } else {
+    return std::pow((normalized + 0.055) / 1.055, 2.4);
+  }
+}
+
+uint8_t ColorValueInterpolator::toGammaCorrectedSpace(double value) const {
+  if (value <= 0.0031308) {
+    value = 12.92 * value;
+  } else {
+    value = 1.055 * std::pow(value, 1.0 / 2.4) - 0.055;
+  }
+  return value * 255.0 + 0.5;
 }
 
 } // namespace reanimated

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ColorValueInterpolator.h

@@ -7,18 +7,23 @@
 
 namespace reanimated {
 
-class ColorValueInterpolator : public ValueInterpolator<int> {
+class ColorValueInterpolator : public ValueInterpolator<ColorArray> {
  protected:
-  int convertValue(jsi::Runtime &rt, const jsi::Value &value) const override;
+  ColorArray convertValue(jsi::Runtime &rt, const jsi::Value &value)
+      const override;
 
-  jsi::Value convertToJSIValue(jsi::Runtime &rt, const int &value)
+  jsi::Value convertToJSIValue(jsi::Runtime &rt, const ColorArray &value)
       const override;
 
-  int interpolate(
+  ColorArray interpolate(
       double localProgress,
-      const int &fromValue,
-      const int &toValue,
+      const ColorArray &fromValue,
+      const ColorArray &toValue,
       const InterpolationUpdateContext context) const override;
+
+ private:
+  double toLinearSpace(uint8_t value) const;
+  uint8_t toGammaCorrectedSpace(double value) const;
 };
 
 } // namespace reanimated

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ValueInterpolator.cpp

@@ -133,6 +133,7 @@ template class ValueInterpolator<int>;
 template class ValueInterpolator<double>;
 template class ValueInterpolator<std::string>;
 template class ValueInterpolator<std::vector<double>>;
+template class ValueInterpolator<ColorArray>;
 template class ValueInterpolator<RelativeInterpolatorValue>;
 
 } // namespace reanimated

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ValueInterpolator.h

@@ -21,6 +21,8 @@ struct Keyframe {
   T value;
 };
 
+using ColorArray = std::array<uint8_t, 4>;
+
 template <typename T>
 class ValueInterpolator : public Interpolator {
  public:

packages/react-native-reanimated/src/Colors.ts

@@ -724,3 +724,12 @@ export function toGammaSpace(
   res.push(RGBA[3]);
   return res as ParsedColorArray;
 }
+
+export function processCSSAnimationColor(value: string | number) {
+  if (typeof value === 'string') {
+    return processColor(value);
+  } else {
+    // case of number format 0xRRGGBBAA format needs to be re-formatted
+    return processColor(`#${value.toString(16).padStart(8, '0')}`);
+  }
+}

packages/react-native-reanimated/src/css/normalization.ts

@@ -14,6 +14,7 @@ import type {
   NormalizedOffsetKeyframe,
 } from './types';
 import { ReanimatedError } from '../errors';
+import { processCSSAnimationColor } from '../Colors';
 
 const VALID_ANIMATION_DIRECTIONS = [
   'normal',
@@ -45,6 +46,8 @@ export const ERROR_MESSAGES = {
     `[Reanimated] Unsupported timing function "${timingFunction}". Supported functions: linear, ease-in-out-back.`,
   invalidAnimationName: (animationName: any) =>
     `[Reanimated] Invalid animation "${animationName}". Expected an object containing keyframes.`,
+  unsupportedColorFormat: (value: any, prop: string) =>
+    `[Reanimated] Unsupported color format ${value} for ${prop} in CSS animation`,
 };
 
 function normalizeTimeUnit(timeUnit: CSSAnimationTimeUnit): number | null {
@@ -241,7 +244,21 @@ export function handlePrimitiveValue(
   if (!keyframedStyle[prop]) {
     (keyframedStyle as any)[prop] = [];
   }
-  (keyframedStyle[prop] as any[]).push({ offset, value });
+
+  let processedValue = value;
+  if (
+    prop.toLowerCase().includes('color') &&
+    (typeof value === 'string' || typeof value === 'number')
+  ) {
+    processedValue = processCSSAnimationColor(value);
+    if (!processedValue) {
+      throw new ReanimatedError(
+        ERROR_MESSAGES.unsupportedColorFormat(value, prop)
+      );
+    }
+  }
+
+  (keyframedStyle[prop] as any[]).push({ offset, value: processedValue });
 }
 
 function addSubPropertyValue(