Implement correct transparent color interpolation

Author: MatiPl01

apps/common-app/src/apps/reanimated/examples/EmptyExample.tsx

@@ -1,15 +1,57 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 
 export default function EmptyExample() {
+  const sv = useSharedValue(0);
+
+  const eStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      sv.value,
+      [0, 1],
+      ['yellow', 'transparent']
+    ),
+  }));
+
+  useEffect(() => {
+    sv.value = 0;
+    sv.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
+  }, [sv]);
+
   return (
     <View style={styles.container}>
       <Text>Hello world!</Text>
+      <Animated.View
+        style={[
+          styles.box,
+          eStyle,
+          // {
+          //   animationName: {
+          //     from: { backgroundColor: 'yellow' },
+          //     to: { backgroundColor: 'transparent' },
+          //   },
+          //   animationDuration: '3000ms',
+          //   animationIterationCount: 'infinite',
+          //   animationDirection: 'alternate',
+          // },
+        ]}
+      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+  },
   container: {
     flex: 1,
     alignItems: 'center',

packages/react-native-reanimated/__tests__/InterpolateColor.test.tsx

@@ -132,6 +132,82 @@ describe('colors interpolation', () => {
     expect(interpolatedColor).toBe(`rgba(4, 2, 0, 0)`);
   });
 
+  describe('transparent color interpolation', () => {
+    const basicCases = [
+      {
+        name: 'transparent to color at midpoint',
+        value: 0.5,
+        inputRange: [0, 1],
+        outputRange: ['transparent', '#ff0000'],
+        expected: 'rgba(255, 0, 0, 0.5)',
+      },
+      {
+        name: 'transparent at start position',
+        value: 0,
+        inputRange: [0, 1],
+        outputRange: ['transparent', '#ff0000'],
+        expected: 'rgba(255, 0, 0, 0)',
+      },
+      {
+        name: 'color at end position',
+        value: 1,
+        inputRange: [0, 1],
+        outputRange: ['transparent', '#ff0000'],
+        expected: 'rgba(255, 0, 0, 1)',
+      },
+      {
+        name: 'transparent to transparent',
+        value: 0.5,
+        inputRange: [0, 1],
+        outputRange: ['transparent', 'transparent'],
+        expected: 'rgba(0, 0, 0, 0)',
+      },
+    ];
+
+    const colorSpaces: Array<{
+      colorSpace: 'RGB' | 'HSV' | 'LAB';
+      options?: Record<string, unknown>;
+      eps?: number;
+    }> = [
+      { colorSpace: 'RGB' },
+      { colorSpace: 'RGB', options: { gamma: 1 } },
+      { colorSpace: 'HSV' },
+      { colorSpace: 'HSV', options: { useCorrectedHSVInterpolation: false } },
+      // LAB may produce slightly different results, but the differences are usually small
+      { colorSpace: 'LAB', eps: 1e-5 },
+    ];
+
+    colorSpaces.forEach(({ colorSpace, options, eps }) => {
+      test.each(basicCases)(
+        `$name using ${colorSpace}${options ? ` with options ${JSON.stringify(options)}` : ''}`,
+        ({ value, inputRange, outputRange, expected }) => {
+          const result = interpolateColor(
+            value,
+            inputRange,
+            outputRange,
+            colorSpace,
+            options
+          );
+
+          if (eps) {
+            const getChannels = (color: string) =>
+              color
+                .replace('rgba(', '')
+                .replace(')', '')
+                .split(',')
+                .map((v) => parseFloat(v.trim()));
+
+            getChannels(result).forEach((v, i) => {
+              expect(v).toBeCloseTo(getChannels(expected)[i], eps);
+            });
+          } else {
+            expect(result).toBe(expected);
+          }
+        }
+      );
+    });
+  });
+
   function TestComponent() {
     const color = useSharedValue('#105060');
 

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

@@ -169,8 +169,6 @@ export function clampRGBA(RGBA: ParsedColorArray): void {
 }
 
 const names: Record<string, number> = {
-  transparent: 0x00000000,
-
   /* spell-checker: disable */
   // http://www.w3.org/TR/css3-color/#svg-color
   aliceblue: 0xf0f8ffff,

packages/react-native-reanimated/src/css/native/style/processors/colors.ts

@@ -28,5 +28,7 @@ export const processColor: ValueProcessor<
     throw new ReanimatedError(ERROR_MESSAGES.invalidColor(value));
   }
 
+  console.log('>>> normalizedColor', normalizedColor);
+
   return normalizedColor;
 };