Findings on the performance

I went through the code and it’s some really good implementation by @chrfalch 😃

I extended the example mentioned here and simulated it to make a busy app to test out how smooth SET would be.

Here are the screen recording of 2 instance.

1. using useNativeDriver (https://media.giphy.com/media/AS4NAijk6WVGaslJOW/giphy.gif) This doesn’t not support layout properties.

2. Using the clever trick where the native driver drivers a non-native animation through an Animated.event (https://media.giphy.com/media/4KFGU2gkedfsxsQ62d/giphy.gif) This supports layout properties.

So how did I make it a busy app? Just added the below code on next button click handler.

setInterval(() => {
  for (let i = 0; i < 5e8; i++) {}
}, 1000);

Correct me if I am wrong, so what I think is happening here is that even though native driver is driving the non-native animation it has to still go through the bridge on every frame to update Animated.event.

Let me know what you think about it.

[chrfalch]

@MrLoh This library uses native animations for moving and scaling elements using a technique similar to FLIP like you are describing. The discussion here is about finding a way to open up for animating properties not supported by the native driver. There are several issues I’m working on to get this to work properly.

First of all we have the problem of not being able to use stateless components for animating (with Animated.createAnimatedComponent). This can be solved by creating a wrapper for the stateless component and transferring shared element/transition properties.

Next we have the issue with native vs. non-native animations. I’m close to solving this by creating another set of wrappers that basically creates two outer elements, one for native animations and one for non-native animations.

With these solutions I’m pretty confident that we can create a good-enough solution to the problems with animations, with the limitation in performance that @narendrashetty has pointed out for some of the animations, but with full native support where applicable.

[chrfalch]

Thanks for your feedback! It is really appreciated.

What I’m trying to do with combining native/non-native animations is to run native animations like transforms and opacity using the native driver while running other animations with the non-native driven animated value. This is not a trivial task to implement so we’ll see what the results will be.