如何在本机反应中使用洛蒂速度到持续时间

Question

I'm using this animation https://assets2.lottiefiles.com/packages/lf20_k5lht2yq.json .

For some reason, the duration prop not working.

<LottieView
          autoPlay={true}
          duration={60000}
          loop={false}
          source={assets.LOTTIE_LEVEL_PROGRESS}
          style={styles.lottie}
        />

As you can see, I'm trying to play animation for a 60 seconds, but in real time it playing about 4 seconds.

The lottie library contain speed prop that receives a number from 0 to 1.

Is there a way to play this anim for a 60 (dynamic number, may change to 120 seconds and more) seconds?

Answer 1

I think duration in this library means the ms that one animation takes in order to execute. So in your code, your animation execute only once and it takes 1 minutes. In other words it is so slow that you cant even see the execution. for execute your animation in normal speed for about 1m you need the following code:

function Example() {
  const [loop, setLoop] = useState(true);

  useEffect(
    () => {
      let timer = setTimeout(() => setLoop(false), 60000);
      return () => {
        clearTimeout(timer);
      };
    },[]);

  return (
    <LottieView
        autoPlay
        loop={loop}
        source={assets.LOTTIE_LEVEL_PROGRESS}
        style={styles.lottie}
     />
  );
}