Color animation issue

Description

Depending on the colors you are animating, the animation might show some weird colors that should not be part of the animation. Is as easy as animating the background color from white to blue.

I added an example with normal Reanimated and with Moti to showcase the problem on a snack.

Expected behavior

The animation should go from white to blue smoothly without weird(green in this case) colors in the middle.

Actual behavior & steps to reproduce

https://user-images.githubusercontent.com/6232522/125182330-d5b93a80-e1d2-11eb-9be4-127fb8da39ed.mov

import React, { useState } from 'react';
import { Text, View, Button } from 'react-native';
import Constants from 'expo-constants';
import { MotiView } from 'moti';
import Reanimated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

const colors = ['blue', 'white'];
const between = (min, max) => Math.floor(Math.random() * (max - min) + min);
const getNewColor = () => colors[between(0, colors.length)];

export default function App() {
  const [color, setColor] = useState(colors[0]);

  const reanimatedBackgroundColor = useSharedValue(colors[0]);
  const animatedStyles = useAnimatedStyle(() => {
    return {
      backgroundColor: withTiming(reanimatedBackgroundColor.value),
    };
  });

  return (
    <View>
      <Reanimated.View
        style={[
          {
            marginBottom: 10,
            height: 300,
            width: 300,
          },
          animatedStyles,
        ]}
      />
      <MotiView
        style={{ height: 300, width: 300 }}
        animate={{ backgroundColor: color }}
      />
      <Button
        title="Change color"
        onPress={() => {
          let newColor = getNewColor();

          while (newColor === color) {
            newColor = getNewColor();
          }

          reanimatedBackgroundColor.value = newColor;
          setColor(newColor);
        }}
      />
    </View>
  );
}

Snack or minimal code example

https://snack.expo.io/@brandonma/color-bug-reanimated

Package versions

• React Native: 0.63.4
• React Native Reanimated: 2.2.0
• Expo: 42.0.0

Affected platforms

• Android (I did not try it out, but probably is also happening)
• iOS
• Web

[whalemare]

Still reproduce in reanimated 2.4.0

[NikitaDudin]

With interpolateColor helper it works correct. May be strange intermediate colors appears because you set color as animated value and it formed by processColor(for blue 4278190335, for white 4294967295) Reanimated helper fn as a number. On animation start it number changed from previous to next value as a sum of all color channels, but it must be changed by each channel independent. And interpolateColor will help to fix that.

import React, { useState } from 'react';
import { Text, View, Button } from 'react-native';
import Constants from 'expo-constants';
import { MotiView } from 'moti';
import Reanimated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  interpolateColor,
  Easing,
} from 'react-native-reanimated';

const colors = ['blue', 'white'];
const between = (min, max) => Math.floor(Math.random() * (max - min) + min);
const getNewColor = () => colors[between(0, colors.length)];

export default function App() {
  const [color, setColor] = useState(colors[0]);

  const reanimatedBackgroundColor = useSharedValue(0);
  const animatedStyles = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(reanimatedBackgroundColor.value, [0,1], colors),
    };
  }, [reanimatedBackgroundColor]);

  return (
    <View>
      <Reanimated.View
        style={[
          {
            marginBottom: 10,
            height: 300,
            width: 300,
          },
          animatedStyles,
        ]}
      />
      <MotiView
        style={{ height: 300, width: 300 }}
        animate={{ backgroundColor: color }}
      />
      <Button
        title="Change color"
        onPress={() => {
          let newColor = getNewColor();

          while (newColor === color) {
            newColor = getNewColor();
          }

          reanimatedBackgroundColor.value = withTiming(reanimatedBackgroundColor.value ^ 1);
          setColor(newColor);
        }}
      />
    </View>
  );
}

Log of list of intermediate colors:

rgba(0, 0, 255, 1)
rgba(1, 7, 255, 1)
rgba(6, 30, 255, 1)
rgba(14, 68, 255, 1)
rgba(25, 116, 255, 1)
rgba(39, 173, 255, 1)
rgba(56, 234, 255, 1)
rgba(77, 255, 216, 1)
rgba(100, 255, 165, 1)
rgba(125, 255, 129, 1)
rgba(194, 255, 153, 1)
rgba(239, 255, 178, 1)
rgba(255, 249, 198, 1)
rgba(255, 240, 215, 1)
rgba(255, 240, 229, 1)
rgba(255, 244, 241, 1)
rgba(255, 249, 249, 1)
rgba(255, 253, 253, 1)
rgba(255, 255, 255, 1)

and list of processed values for each color:

4278190335 - blue
4278323711
4278657023
4279191039
4279923711
4280922111
4281985279
4283367386
4284940197
4286644096
4291100570
4293918642
4294965447
4294963416
4294963430
4294964465
4294965752
4294966781
4294967295 - white