useTiming delay

[kuriel-dev]

Description

in order to combine useTiming, but another animation or operation can start after some time, add delay prop:

  const progress = useTiming({
    from: 0,
    to: 1,
    loop: true,
  }, {
    // THIS IS THE FEATURE REQUEST
    delay: 1000, // starts after 1 sec
    duration: 5000, // total duration including delay, so progress starts from 1 sec to 5 sec. Every iteration (loop).
  });

  const progressBounce = useTiming({
    from: 0,
    to: 1,
    loop: true,
  }, {
    duration: 5000, // total duration including delay = 0, so progressBounce starts from 0 sec to 5 sec. Every iteration (loop).
    easing: Easing.bounce,
  });

Maybe a final delay is also needed.

[wcandillon]

This is a great question.

We have an API that allows you to build any custom animation (delay, timing, pause, etc). The problem is that is it not documented and it might be feel a bit hard to get into it. This is an example with the decay function. First we have a function that given an animation state, returns a new animation state: https://github.com/Shopify/react-native-skia/blob/main/package/src/animation/decay/decay.ts#L6 Then we have a function that create the animation for you: https://github.com/Shopify/react-native-skia/blob/main/package/src/animation/decay/runDecay.ts#L14

This is highly inspired from Reanimated 2 and this the suggested solution is a bit too involved, you can use the Reanimated 2 connector to drive the animation for now: https://shopify.github.io/react-native-skia/docs/animations/reanimated

[ScreamZ]

@wcandillon Do you expect some documentation pass someday about hidden API ?

[wcandillon]

@ScreamZ Yes. In the very short term, we will ship UI-thread-level reanimated support. So here you can use the animations you know and love and the APIs are well documented. Later, we may to ship our own built-in UI-thread animations. When we do, we will make sure that these are documented properly.

I'm closing this issue for now. My recommendation is to use Reanimated. Right now, it will work on the JS-thread (like the current built-in Skia animations) and in the next release it will work on the UI-thread. If you are looking to use our own build-in animations for now (on the JS-thread), you can use the pointers above to try to build custom animation you want.