Initial non-native implementation of AnimatedColor

Summary:
Creates Animated.Color for animating color props.

Implement AnimatedColor, which basically consists of 4 AnimatedValues (along the same vein as ValueXY) which allows us to just use AnimatedValue's interpolation. Provides a string color value of shape 'rgba(r, g, b, a)'

AnimationNode DAG looks like:

{F696076974}

Followup changes will include support for string color values, platform colors, and native driver.

Changelog:
[General][Added] - New Animated.Color node

Reviewed By: mdvacca

Differential Revision: D33778456

fbshipit-source-id: 83ddbc955156bf589c864f229a5f83fe6875fd0e

Author: genkikondo

Libraries/Animated/AnimatedImplementation.js

@@ -38,6 +38,8 @@ import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 import type {Mapping, EventConfig} from './AnimatedEvent';
 
+import AnimatedColor from './nodes/AnimatedColor';
+
 export type CompositeAnimation = {
   start: (callback?: ?EndCallback) => void,
   stop: () => void,
@@ -102,7 +104,7 @@ const _combineCallbacks = function (
 };
 
 const maybeVectorAnim = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: Object,
   anim: (value: AnimatedValue, config: Object) => CompositeAnimation,
 ): ?CompositeAnimation {
@@ -121,16 +123,42 @@ const maybeVectorAnim = function (
     // We use `stopTogether: false` here because otherwise tracking will break
     // because the second animation will get stopped before it can update.
     return parallel([aX, aY], {stopTogether: false});
+  } else if (value instanceof AnimatedColor) {
+    const configR = {...config};
+    const configG = {...config};
+    const configB = {...config};
+    const configA = {...config};
+    for (const key in config) {
+      const {r, g, b, a} = config[key];
+      if (
+        r !== undefined &&
+        g !== undefined &&
+        b !== undefined &&
+        a !== undefined
+      ) {
+        configR[key] = r;
+        configG[key] = g;
+        configB[key] = b;
+        configA[key] = a;
+      }
+    }
+    const aR = anim((value: AnimatedColor).r, configR);
+    const aG = anim((value: AnimatedColor).g, configG);
+    const aB = anim((value: AnimatedColor).b, configB);
+    const aA = anim((value: AnimatedColor).a, configA);
+    // We use `stopTogether: false` here because otherwise tracking will break
+    // because the second animation will get stopped before it can update.
+    return parallel([aR, aG, aB, aA], {stopTogether: false});
   }
   return null;
 };
 
 const spring = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: SpringAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: SpringAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -179,11 +207,11 @@ const spring = function (
 };
 
 const timing = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: TimingAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: TimingAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -233,11 +261,11 @@ const timing = function (
 };
 
 const decay = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: DecayAnimationConfig,
 ): CompositeAnimation {
   const start = function (
-    animatedValue: AnimatedValue | AnimatedValueXY,
+    animatedValue: AnimatedValue | AnimatedValueXY | AnimatedColor,
     configuration: DecayAnimationConfig,
     callback?: ?EndCallback,
   ): void {
@@ -547,6 +575,10 @@ module.exports = {
    * See https://reactnative.dev/docs/animatedvaluexy
    */
   ValueXY: AnimatedValueXY,
+  /**
+   * Value class for driving color animations.
+   */
+  Color: AnimatedColor,
   /**
    * Exported to use the Interpolation type in flow.
    *

Libraries/Animated/AnimatedMock.js

@@ -24,6 +24,8 @@ import type {TimingAnimationConfig} from './animations/TimingAnimation';
 import type {DecayAnimationConfig} from './animations/DecayAnimation';
 import type {SpringAnimationConfig} from './animations/SpringAnimation';
 
+import AnimatedColor from './nodes/AnimatedColor';
+
 /**
  * Animations are a source of flakiness in snapshot testing. This mock replaces
  * animation functions from AnimatedImplementation with empty animations for
@@ -89,7 +91,7 @@ const mockCompositeAnimation = (
 });
 
 const spring = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: SpringAnimationConfig,
 ): CompositeAnimation {
   const anyValue: any = value;
@@ -103,7 +105,7 @@ const spring = function (
 };
 
 const timing = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: TimingAnimationConfig,
 ): CompositeAnimation {
   const anyValue: any = value;
@@ -117,7 +119,7 @@ const timing = function (
 };
 
 const decay = function (
-  value: AnimatedValue | AnimatedValueXY,
+  value: AnimatedValue | AnimatedValueXY | AnimatedColor,
   config: DecayAnimationConfig,
 ): CompositeAnimation {
   return emptyAnimation;
@@ -164,6 +166,7 @@ const loop = function (
 module.exports = {
   Value: AnimatedValue,
   ValueXY: AnimatedValueXY,
+  Color: AnimatedColor,
   Interpolation: AnimatedInterpolation,
   Node: AnimatedNode,
   decay,

Libraries/Animated/__tests__/Animated-test.js

@@ -972,4 +972,84 @@ describe('Animated tests', () => {
       }
     });
   });
+
+  describe('Animated Colors', () => {
+    it('should animate colors', () => {
+      const color = new Animated.Color({r: 255, g: 0, b: 0, a: 1.0});
+      const callback = jest.fn();
+      const node = new AnimatedProps(
+        {
+          style: {
+            backgroundColor: color,
+            transform: [
+              {
+                scale: color.a.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 2],
+                }),
+              },
+            ],
+          },
+        },
+        callback,
+      );
+
+      expect(node.__getValue()).toEqual({
+        style: {
+          backgroundColor: 'rgba(255, 0, 0, 1)',
+          transform: [{scale: 2}],
+        },
+      });
+
+      node.__attach();
+      expect(callback.mock.calls.length).toBe(0);
+
+      color.setValue({r: 11, g: 22, b: 33, a: 0.5});
+      expect(callback.mock.calls.length).toBe(4);
+      expect(node.__getValue()).toEqual({
+        style: {
+          backgroundColor: 'rgba(11, 22, 33, 0.5)',
+          transform: [{scale: 1.5}],
+        },
+      });
+
+      node.__detach();
+      color.setValue({r: 255, g: 0, b: 0, a: 1.0});
+      expect(callback.mock.calls.length).toBe(4);
+    });
+
+    it('should track colors', () => {
+      const color1 = new Animated.Color();
+      const color2 = new Animated.Color();
+      Animated.timing(color2, {
+        toValue: color1,
+        duration: 0,
+        useNativeDriver: false,
+      }).start();
+      color1.setValue({r: 11, g: 22, b: 33, a: 0.5});
+      expect(color2.__getValue()).toEqual('rgba(11, 22, 33, 0.5)');
+
+      // Make sure tracking keeps working (see stopTogether in ParallelConfig used
+      // by maybeVectorAnim).
+      color1.setValue({r: 255, g: 0, b: 0, a: 1.0});
+      expect(color2.__getValue()).toEqual('rgba(255, 0, 0, 1)');
+    });
+
+    it('should track with springs', () => {
+      const color1 = new Animated.Color();
+      const color2 = new Animated.Color();
+      Animated.spring(color2, {
+        toValue: color1,
+        tension: 3000, // faster spring for faster test
+        friction: 60,
+        useNativeDriver: false,
+      }).start();
+      color1.setValue({r: 11, g: 22, b: 33, a: 0.5});
+      jest.runAllTimers();
+      expect(color2.__getValue()).toEqual('rgba(11, 22, 33, 0.5)');
+      color1.setValue({r: 44, g: 55, b: 66, a: 0.0});
+      jest.runAllTimers();
+      expect(color2.__getValue()).toEqual('rgba(44, 55, 66, 0)');
+    });
+  });
 });

Libraries/Animated/animations/SpringAnimation.js

@@ -23,6 +23,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
 
+import AnimatedColor from '../nodes/AnimatedColor';
+
 export type SpringAnimationConfig = {
   ...AnimationConfig,
   toValue:
@@ -34,6 +36,14 @@ export type SpringAnimationConfig = {
         ...
       }
     | AnimatedValueXY
+    | {
+        r: number,
+        g: number,
+        b: number,
+        a: number,
+        ...
+      }
+    | AnimatedColor
     | AnimatedInterpolation,
   overshootClamping?: boolean,
   restDisplacementThreshold?: number,

Libraries/Animated/animations/TimingAnimation.js

@@ -20,6 +20,8 @@ const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {AnimationConfig, EndCallback} from './Animation';
 
+import AnimatedColor from '../nodes/AnimatedColor';
+
 export type TimingAnimationConfig = {
   ...AnimationConfig,
   toValue:
@@ -31,6 +33,14 @@ export type TimingAnimationConfig = {
         ...
       }
     | AnimatedValueXY
+    | {
+        r: number,
+        g: number,
+        b: number,
+        a: number,
+        ...
+      }
+    | AnimatedColor
     | AnimatedInterpolation,
   easing?: (value: number) => number,
   duration?: number,