Custom Layout Animation & interpolation

[dcorbin]

Can these two things be combined? Is there a good example?

I find the interpolation examples for regular animation difficult to understand (feels too scattered), but I don't see that there's any way to use it with a custom animation.

[MatiPl01]

In general, the layout animation's API doesn't support complex animations with interpolation. You may want to create a Keyframe layout animation if you want a similar behavior to interpolate where you can set specific values for specific animation progress values.

You can always describe what animations you are trying to build and I will try to help you use the right approach.

[dcorbin]

Mostly I was asking because I'm migrating code from React's Animated to ReAnimated, and I have an animation PathBuilder that was already structured on Animation. But I was able to adapt it mostly to KeyFrame.

I do wonder if there's any real reason to limit KeyFrame to 0-100. If the Keyframe as constructed with the last index # (defaulting to 100), it seems like you'd automatically end up with interpolation. and full backward compatibility.

[MatiPl01]

It is more like an implementation specific issue. Layout animations are implemented in the native code and the native side receives only the animation config, whereas animations created with worklets (useAnimatedStyle hook, etc.) calculate every animation frame and pass just calculated values to the native side. Because of that, you have more control on the animation and can use functions like interpolate, interpolateColor, etc.

When you are using layout animations, only the animation configuration object is created and is passed to the native side, where, based on this config, the animation is calculated. This is necessary because layout animations have to prevent view from being removed (exiting animations), detect layout calculation changes (layout transitions) or detect when the view is mounted (entering animations), so the animations should be tightly coupled with the react's layout calculation system. Because of that, we lose some flexibility.

In short, Keyframe animation is not the same as value interpolation. It just can produce a similar effect but works much different under the hood, as it is a sequence of timing animations, whilst interpolation calculates values on each animation frame.

I hope I haven't made this even more confusing by providing more details.