React Native Lottie View动画播放/暂停问题

Question

我将使用React Native Lottie Wrapper来显示屏幕上的动画。我需要一种功能来播放/暂停/恢复动画。

这是我的部分代码：

...

constructor(props) {
  super(props);
  this.state = {
    progress: new Animated.Value(0)
  };
}

static navigationOptions = {
  title: "Details",
  headerStyle: {
    backgroundColor: '#f4511e',
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerTruncatedBackTitle: 'List'
};

componentDidMount() {
  this.animation.play();
}

playLottie() {
 console.log('play');
}

pauseLottie() {
  console.log('pause');
}

render() {
  return (
    <View>
      <Animation
        ref={animation => { this.animation = animation; }}
        source={require('../../../../assets/anim/balloons.json')}
        style={{height: 300, width: '100%'}}
        loop={false}
        progress={this.state.progress}
      />
      <Text>Course with id: {this.props.navigation.state.params.courseId}</Text>
        <Button 
          onPress={this.playLottie}
          title="Play Lottie"
          color="#841584"
          accessibilityLabel="Play video"
        />
        <Button 
          onPress={this.pauseLottie}
          title="Pause Lottie"
          color="#841584"
          accessibilityLabel="Pause video"
        />
     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

...

动画播放得很好，但我无法暂停和恢复它。 有人有解决这个问题的方法吗？

附言：我尝试在pauseLottie（）方法中使用this.animation，但它说未定义。

提前感谢！

- Heril Muratovic

---

在播放和暂停时，使用setState({ progress: true })或false。 - parohy

它说 this.setState 未定义。 - Heril Muratovic

我设置了按钮的 onPress={() => this.pauseLottie}，错误已经消失了，但是动画没有暂停。 - Heril Muratovic

我发布了一个答案，请看一下。 - parohy

Answer 1

您可以通过更改speed属性来暂停和播放Lottie动画，其中speed={0}将LottieView组件置于暂停状态，speed={1}以正常速度播放它。

以下是一个例子：

playAnimation = () => {
    this.setState({speed: 1})
}

pauseAnimation = () => {
    this.setState({speed: 0})
}

<LottieView
    source={this.state.sourceAnimation}
    speed={this.state.speed} />

- pedrosimao

Answer 2

你需要从播放/暂停功能中设置状态。为了访问组件的状态，你需要将该函数绑定到组件类:

第一种选项是在构造函数中:

constructor(props) {
  super(props);
  this.playLottie.bind(this);
  this.pauseLottie.bind(this);
}

或者在类内部声明时使用ES6函数语法的第二个选项：

playLottie = () => {
 ...
}

pauseLottie = () => {
 ...
}

在那些函数调用中，使用setState并添加您想要设置的值。在您的情况下，我会这样做：

playLottie = () => {
  this.setState({ progress: true })
}

pauseLottie = () => {
  this.setState({ progress: false })
}

重要的是将这两个函数绑定到您的类组件，因为您无法访问组件道具。这就是为什么它会抛出错误 setState is not a function

您的渲染看起来很不错 ;)

- parohy

---

谢谢您的回答，但是“progress true/false”不是有效的值。它只能是数字。 - Heril Muratovic

Answer 3

对我来说，它的效果不好：我们需要添加setValue(0)，然后需要改进暂停/重新开始以保持播放速度并更改缓动函数以避免缓慢重新启动。让我们还要添加循环：

constructor(props) {
  super(props);
  this.playLottie.bind(this);
  this.pauseLottie.bind(this);
  this.state = {
    progress: new Animated.Value(0),
    pausedProgress: 0
  };
}

playLottie = () => {
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: (10000 * (1 - this.state.pausedProgress)),
    easing: Easing.linear,
  }).start((value) => { 
    if (value.finished) this.restartAnimation();
  });
}

restartAnimation = () => {
  this.state.progress.setValue(0);
  this.setState({ pausedProgress: 0 });
  this.playAnimation();
}

pauseLottie = () => {
  this.state.progress.stopAnimation(this.realProgress);
}

realProgress = (value) => {
  console.log(value);
  this.setState({ pausedProgress: value });
};
...

对我来说，它运行良好！播放和暂停选项按预期工作。

- Heril Muratovic

Answer 4

如果您使用包含循环的 Lottie 动画，您可以通过内置的 LottieView API 控制它的所有内容。（如果您正在使用包含动画的文件）

import Lottie from 'lottie-react-native'

const ref = useRef<AnimatedLottieView>()

const pause = () => { 
   ref.current.pause()
}

const resume = () => { 
   ref.current.resume()
}

const reset = () => { 
   ref.current.reset()
}

<Lottie
  ref={ref}
  source={source}
  resizeMode={resizeMode}
  loop={true}
  duration={duration}
  autoPlay={true}
  onAnimationFinish={onFinish}
/>

- beee