Share interpolation and minimize redundant calculations #783
Description
🚀 Feature Proposal
In this case, I want to animate the 3 properties in a style object (position, transform and zIndex) for an <animated.div>. Given these properties share the same interpolation logics, I'd like to do something like this:
const SomeComponent = () => {
const { scroll1, scroll2, transition } = useContext(SomeContext);
const shared = interpolate([scroll1, scroll2, transition], (a, b, c) => {
// Do some calculations based on 3 input values
// and output final a single numeric value.
});
const style = {
// Unset property when y <= 0, so that the browser won't promote it to render layer.
transform: shared.interpolate(y => y > 0 ? `transform(0, ${y}px, 0)` : undefined),
position: shared.interpolate(y => y > 0 ? 'relative' : undefined),
zIndex: shared.interpolate(y => y > 0 ? 3 : undefined)
};
return (
<animated.div style={style}>
{someChildren}
</animated.div>
);
};Although, there's the shared interpolator object, instead of calculate 1x time on each frame, the calculations are actually done 3x times (1x for each of the 3 props: position, transform and zIndex).
Motivation
Performance, simplify codes and minimize redundant calculations.
Example
Maybe something like the code example above, or even better:
const SomeComponent = () => {
const { scroll1, scroll2, transition } = useContext(SomeContext);
const shared = interpolate([scroll1, scroll2, transition], (a, b, c) => {
// Do some calculations based on 3 input values
// and output final a single numeric value.
});
// Unset property when y <= 0, so that the browser won't promote it to render layer.
const style = shared.interpolate(y => y > 0 ? {
transform: `transform(0, ${y}px, 0)`,
position: 'relative',
zIndex: 3
}: undefined);
return (
<animated.div style={style}>
{someChildren}
</animated.div>
);
};