React Native Lottie - 动画结束后反转

Question

上下文

我是 lottie-react-native 的新手，已经成功实现了我的第一个动画：

constructor(props) {
    super(props);
    this.state = {
        progress: new Animated.Value(0),
        loop: true
    }
}
componentDidMount() {
    this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
    <View style={{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
    <LottieView
    ref={animation => {
        this.animation = animation;
      }}
    speed={1}
    autoPlay
    source={NOACTIVITY}
    progress={progress}
    loop={loop}
    height={300}
    width={300}
    style={{margin:0,}}
  />
  </View>
)

}

问题

我现在正尝试用这个动画创建一个循环，向前播放，然后向后播放，然后再次开始这个过程。

我做了一些研究并得出结论，这必须使用动画值和时间来完成？我发现了很多向前和向后但不是一起玩的例子（in the react native docs!）。

这可以在挂载的组件上完成吗？还是它必须是一个单独的函数？

提前致谢！

Answer 1

因此，您可以做的一件事是对 this.state.progress 使用 Animated.loop()，然后在每次迭代时反转动画的速度。

AnimateFunction = () => {
  Animated.loop(
    Animated.timing(
      this.state.progress,
      {
        toValue: 1,
        duration: (your duration of anim),
        easing: Easing.linear()
      }
    )
  ).start(
    () => {
      this.animation.setSpeed(this.animation.speed * -1);
    }
  );
}

然后将您的 componentDidMount 更改为：

componentDidMount() {
  this.AnimateFunction();
}

未经测试我不确定，但您可能需要在设置速度的同时重置 this.state.progress.setValue(0) 在每个循环之后。请记住这一点，以防它一开始不起作用。

虽然我很想看看你是否有和我一样的以下问题。当我出于某种原因在 React Native 中循环 lottie 动画时，它们会在循环之间暂停......无论如何希望这对你有用

Answer 2

我想出的解决方案是在循环中使用一个序列，如下所示：

AnimateFunction = () => {
    Animated.loop(
        Animated.sequence([
            Animated.timing(
                this.state.progress,
                {
                  toValue: 1,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              ),
              Animated.timing(
                this.state.progress,
                {
                  toValue: 0,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              )
        ])

    ).start();
  }

我发现当应用程序从 0 处重新启动时，添加缓动会使动画跳动一点，因此暂时将其注释掉。

Answer 3

更好更干净的解决方案

const defaultEvent = {
    eventName: 'complete',
    callback: () => {
        alert("loopComplete")
       /*Insert your handlers here*/
    },
};

然后在您的 Lottie 组件上：

<Lottie
    options={defaultOptions}
    height={400}
    width={400}
    eventListeners={[defaultEvent]}
/>

您可以使用的事件名称：complete、loopComplete、enterFrame、segmentStart、config_ready、data_ready、loaded_images、DOMLoaded、destroy

（编辑）后来我读到这是针对 react-native 的，很遗憾，我很抱歉，这是一个 react-js 解决方案

Answer 4

onAnimationFinish 可以在动画完成时使用

<LottieView
          ref={(el) => {
            lottie = el;
          }}
          autoPlay={false}
          loop={false}
          style={styles.lottie}
          source={animationFile}
          enableMergePathsAndroidForKitKatAndAbove
          onAnimationFinish={onAnimationFinish}
        />

React Native Lottie - 动画结束后反转

React Native Lottie - Upon Animation End Reverse

reactjs

loops

native

lottie

上下文

问题

更好更干净的解决方案