Move queueAnimation to component

[grabbou]

So it's overridable and we can easily ignore animationKind and provide own LayoutAnimations. Just an idea, as I am not that happy with the current one and I am investigating changing the LayoutAnimations to something different at all.

[Kureev]

I'd like to implement react-motion for that. Just waiting it to be a bit more stable and tested.

[grabbou]

Hm, what about Animated?

[Kureev]

@grabbou Animated? If you're talking about AnimatedExperimental, then you should check it out facebook/react-native#796

[grabbou]

No, I am talking about Animated - https://facebook.github.io/react-native/docs/animations.html#animated they presented that library during ReactEurope and looks like a quite powerful tool to do native animations (it looks a lot like CoreAnimations in terms of how you group different bits, but haven't dig into the details yet) 💃

[Kureev]

Now I'm already using it and you can pass animation prop to component. Am I missing something? What's the idea you want me to implement? Something like support queues?

[grabbou]

Nah you are using LayoutAnimation, just saying Animated is worth investigating as a good alternative to react-motion (esp. given the fact Animated might be more performant as I am pretty sure they have some really good bindings for that)

[Kureev]

That's true. So, you want to animate opening/closing of the side menu. What is your propose for API? something like

const queue = [
  Animated.decay(position, {   // coast to a stop
    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
    deceleration: 0.997,
  }),
  Animated.parallel([          // after decay, in parallel:
    Animated.spring(position, {
      toValue: {x: 0, y: 0}    // return to start
    }),
    Animated.timing(twirl, {   // and twirl
      toValue: 360,
    }),
  ]),
];
// ...
<SideMenu animationQueue={queue}/>

right?
And in the background it may be used like this:

updatePosition() {
  // this.sideMenu.setNativeProps({ left: this.left, });
  Animated.queue(this.prop.animationQueue).start();
}

where this.state.left = Animated.Value(0);?

[Kureev]

Should be solved in 0.12.1