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

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

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 处重新启动时动画稍微跳跃，因此现在将其注释掉。