React Native Lottie View Animation Play/Pause 问题

Question

我正在使用 React Native Lottie Wrapper 在屏幕上显示动画。
我需要 play/pause/resume 动画的功能。

这是我的代码的一部分：

...

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',
  },
});

...

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

P.S。我试图在 pauseLottie() 方法中使用 this.animation 但它说这是未定义的。

提前致谢！

Answer 1

您必须通过 play/pause 函数设置状态。为了访问组件的状态，您必须将函数绑定到组件 class:

构造函数中的第一个选项：

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

或在 class 内声明时的第二个选项使用 es6 函数语法：

playLottie = () => {
 ...
}

pauseLottie = () => {
 ...
}

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

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

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

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

你的渲染看起来不错 ;)

Answer 2

对我来说效果不佳：我们必须添加 setValue(0)，然后我们需要改进 pause/restart 以保持播放速度并更改缓动功能以避免缓慢 re-start .让我们也添加循环：

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 });
};
...

（现在）对我来说，它工作正常！播放和暂停选项按预期工作。

Answer 3

您可以通过更改 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} />

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}
/>

React Native Lottie View Animation Play/Pause 问题

React Native Lottie View Animation Play/Pause Issue

animation

react-native

lottie