Animation: Implement 'Hooks.transition' hook

[bryphe]

Today, we have a Hooks.animation hook here:
https://github.com/revery-ui/revery/blob/master/src/UI_Hooks/Revery_UI_Hooks.re and https://github.com/revery-ui/revery/blob/master/src/UI_Hooks/Animation.re

That is used as follows:

      let (rotationY, pauseRotationY, restartRotationY, hooks) =
        Hooks.animation(
          Animated.floatValue(0.),
          Animated.options(
            ~toValue=6.28,
            ~duration=Seconds(4.),
            ~delay=Seconds(0.5),
            ~repeat=true,
            (),
          ),
          hooks,
        );

(from https://github.com/revery-ui/revery/blob/master/examples/Hello.re)

I think it'd be convenient to have a Hooks.transition hook, that would work as follows:

let currentValue = Hooks.transition(1.0, { duration: Seconds(1) });

The idea is that you could use this along with some other events, for example:

let (opacity, setOpacity) = Hooks.state(1.0);

let transitionedOpacity = Hooks.transition(opacity, { duration: Seconds(1) });

let onMouseDown  = () => setOpacity(0.5);
let onMouseUp = () => setOpacity(1.0);

<view style={Style.make(~opacity=transitionedOpacity, ())} ... />

This would enable a smooth transition between the opacity values, as opposed to just directly switching from 0.5 <-> 1.0. The Hooks.transition hook could leverage Hooks.state under the hood to keep track of the last value. If the last value is different, it could start an animation and use the animated value. Otherwise, it could just return the current value.

[albertorestifo]

I'll give this a shot

[bryphe]

@albertorestifo - awesome, thank you!