React-native-reanimated: [Question] Is there any way to loop a animation?

[bjartebore]

I cannot find any examples/documentation on how to loop an animation, is this possible? I have tried re-setting the animation value in the completion block off timing().start() and starting a new animation, but the animation will not reanimate.

Bjarte

[F4b1n0u]

Hi,

I manage to do it like that

function runProgression() {
  const clock = new Clock()

  const state = {
    finished: new Value(0),
    position: new Value(0),
    time: new Value(0),
    frameTime: new Value(0),
  }

  const config = {
    duration: new Value(1000),
    toValue: new Value(1),
    easing: Easing.inOut(Easing.linear),
  }

  return block([
    // start right away
    startClock(clock),

    // process your state
    timing(clock, state, config),

    // when over (processed by timing at the end)
    cond(state.finished, [
      // we stop
      stopClock(clock),

      // set flag ready to be restarted
      set(state.finished, 0),
      // same value as the initial defined in the state creation
      set(state.position, 0),

      // very important to reset this ones !!! as mentioned in the doc about timing is saying
      set(state.time, 0),
      set(state.frameTime, 0),

      // and we restart
      startClock(clock),
    ]),

    state.position,
  ])
}

I'm quite new with reanimated, so there is maybe a better way !
but after tweeting a bit I ended up with this code :)

[bjartebore]

Thanks, that did exactly what I needed :) seems like we don't even need to stop and start the clock

[troublediehard]

I did tutorial https://www.youtube.com/watch?v=03CGayoqmIk, probably can be helpful.