add componentWillReceiveProps() to update internal state and view

[taichi-arai-jointcrew]

This feature allow you to update AnimatedSprite's view dynamically by changing some props.

We need to update AnimatedSprite's coordinates and size dynamically whether it animating or not. First we tried to change its props(coordinates and size) normally from parents like:

<AnimatedSprite
   ...
   size={{
          width: this.dynamicWidth,
          height: this.dynamicHeight
    }}
   ...
/>

but it seems to be nothing. So we read source code of this, and then we found there's section that props convert to state and also found there is not exist componentWillReceiveProps. It means that these state-converted props were referenced only once and never be changed from outside.

We need to change coordinates and size dynamically because our apps needs so many sprites and we need to optimized them, like cutting these image's unused blank margins, and it means we use different position and size on each motions. Thus, we need to update AnimatedSprite's view by changing its props dynamically. We actually needs only size and coordinates as trigger, but there's more captive props. So we call setState in componentWillReceiveProps and simply reset all the states set once in the constructor.

Btw, we don't use draggable functions. We just want to change image size and coordinates while animating simply without tween functions.

Now we can change sprites size and position smoothly. Hope you will marge this.

Followings are our use case (arranged)

        <AnimatedSprite
          ref={component => {
            this.symbolComponent = component;
          }}
          sprite={this.symbol}
          fps={this.symbol.fps}
          animationFrameIndex={this.symbol.animationIndex(
            this.state.motionType
          )}
          loopAnimation={this.state.loop}
          coordinates={{
            top: currentMotionLayout.top,
            left: (WINDOW.WIDTH - currentMotionLayout.width) / 2
          }}
          size={{
            width: currentMotionLayout.width,
            height: currentMotionLayout.height
          }}