2

我正在使用 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',
  },
});

...

动画播放良好，但我无法暂停并继续播放。
有没有人有这个问题的解决方案？

PS 我曾尝试在pauseLottie()方法中使用this.animation ，但它说这是未定义的。

先感谢您！

4

4 回答 4

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} />
于 2018-10-07T16:43:41.093 回答
1

对我来说效果不佳：我们必须添加 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 });
};
...

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

于 2018-04-09T16:01:59.127 回答
1

您必须从播放/暂停功能中设置状态。为了访问组件的状态，您必须将函数绑定到组件类：

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

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

你的渲染看起来不错；）

于 2018-04-05T14:36:14.363 回答
0

If you use an Lottie animation that contains a loop you can control it all with the LottieView api built in. (if you are using a file that has the animation)

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}
/>
于 2021-11-24T12:51:11.883 回答