React-Move animation background color change

问题

if you want to change color in react-move animate:

import React from "react";
import ReactDOM from "react-dom";

import { interpolate, interpolateTransformSvg } from "d3-interpolate";
import Animate from "react-move/Animate";

function Stripes(props) {

  return (
    <Animate
      start={{

        backgroundColor: "red"
      }}

      enter={{
        backgroundColor:["blue"]
      }}
      interpolation={(begValue, endValue, attr) => {
        if (attr === "transform") {
          return interpolateTransformSvg(begValue, endValue);
        }

        return interpolate(begValue, endValue);
      }}
    >
      {({ backgroundColor }) => <div style={{ backgroundColor }}>adasd</div>}
    </Animate>
  );
}

ReactDOM.render(<Stripes />, document.getElementById("root"));

without interpolation props you will get this error

> Warning: NaN is an invalid value for the backgroundColor css style property.

the issue is in color change for this it needs to use another library named d3-interpolate it makes color between start and end colors. this function goes with props interpolation

来源：https://stackoverflow.com/questions/61069635/react-move-animation-background-color-change