Sequence

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]

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!!