React Native Lottie - 动画结束反转 [英] React Native Lottie - Upon Animation End Reverse

问题描述

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

I am new to lottie-react-native and have managed to implement my first animation:

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

}

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

I am now trying to create a loop with this animation that plays it forwards, then plays it backwards and then starts the process again.

我做了一些研究并得出结论，这必须使用动画值和时间来完成?我发现了很多关于向前播放的例子(in the react native docs!)向后但不在一起.

I have done some research and concluded that this must be completed using the animated values and timing? I have found many examples (in the react native docs!) of playing forwards and backwards but not together.

这可以在组件挂载时完成吗?还是必须是一个单独的功能?

Can this be completed on component did mount? or does it have to be a separate function?

提前致谢！

推荐答案

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

The solution I came up with was using a sequence inside a loop as follows:

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 重新启动时，添加缓动会使动画跳跃一点，因此现在将其注释掉.

I found that adding easing made the animation jump a little when the application restarted at 0 so it is commented out for now.

这篇关于React Native Lottie - 动画结束反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！