React-native-reanimated: Sequence

[RWOverdijk]

I'm trying to replace my react-native animated calls with reanimated ones and run into a bit of a difficulty because sequence doesn't exist.

I'd be more than willing to help and contribute it once I figure out how this library even works. It looks really cool but learning resources are still a bit hard to find.

Can I help write it? If so, any pointers?

If not, how can I implement it for myself?

A first stab at supporting the BC-style animations:

export const sequence = (animations: any[]) => {
  let finished = false;
  let running = false;
  let current: any;

  return {
    start(complete: any) {
      running = true;

      run(animations, (next: any) => {
        current = next;

        return running;
      }, () => {
        finished = true;
        running = false;

        complete();
      });
    },

    stop() {
      running = false;

      if (current) {
        current.stop();
      }
    }
  };
};

const run = (animations: any[], onNext: any, onComplete: any) => {
  const animation = animations.shift();

  if (!animation) {
    return onComplete();
  }

  if (!onNext(animation)) {
    return;
  }

  animation.start(() => run(animations, onNext, onComplete));
};

The happy-flow works here. Even with nested sequences. I'd sharpen up the . types and use a state instead of let but... Yeah. Not investing more than this for now until I know it's worth it to someone.

[xaviershay]

I'm just heading down this road myself... Something like this (or at least a guide for migrating) would be useful to me. I'll report back if I figure anything interesting out.

[xaviershay]

I've ended up going with a solution that I'm not 100% sure the best way to generalize yet, but has the benefit of running all in native land without needing JS callbacks.

It needs runX functions to be written such that they set an Animation.Value after they finish, then you can set up other expressions to wait on that value with:

function waitUntilFlag(flag, expr) {
  const defaultValue = 0;

  return Animated.cond(Animated.eq(flag, 1), expr, defaultValue);
}

... the downside is you need to know the defaultValue. You could also write runX functions such that they return said value, or figure out another way to compose said function. In my case, all animations are [0, 1] and then scaled after the fact using interpolations.

I haven't written it yet, but I can imagine a sequence function that takes an _array of functions_ with the provided parameter being a the "finish" value for the returned expression to set.

[RWOverdijk]

Oh, I was doing something similar. My approach was adding a "runs" to the state, which is a number representing the index of the animation. The cond would be finished & runs < animations.length. That way it's a sequence but a single cond.

The reason I didn't go after this is because I was (am) in a hurry. Hope this helps you make something better :D

[osdnk]

Oh, I see it's solved already. Thank, @RWOverdijk! 😺

[xaviershay]

Don't need to re-open, but I think it will eventually be important to have some kind of "best practice" documentation for how to do this kind of thing. It takes a bit to get your mind around, and "one shot animations" don't really feel like the main use case of the documentation currently.

[anzorb]

@RWOverdijk do you mind posting your solution here? I am struggling to get the array index of animations to increment as I go through a sequence of array values to animate. I can't use a Value() as an array index, and no matter how I scope my index increment values, Reanimated doesn't see them.

I have an array of objects, that each define a duration, toValue, etc, I just need a way to go through each object in order. Problem is I can't seem to increment the array index so the next time the animation cycle runs with updated values. Thanks in advance!!