React Native Lottie Просмотр анимации Воспроизведение / Пауза

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

...

Анимация играет хорошо, но я не могу приостановить ее и возобновить.
У кого-нибудь есть решение этой проблемы?

PS Я пытался использовать this.animation в методе pauseLottie(), но он сказал, что не определено.

Заранее спасибо!

Answer 1

@parohy дал мне идею, поэтому я попробовал что-то вроде этого:

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

playLottie = () => {
  Animated.timing(this.state.progress, {
    toValue: 1,
    duration: 10000,
  }).start();
}

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

realProgress = (value) => {
  console.log(value);
};
...

Для меня это работает нормально! Опция Play and Pause работает, как и ожидалось.

Answer 2

Вы можете приостановить и воспроизвести анимацию Лотти, изменив speed проп, где 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 3

Вы должны установить состояние с помощью функций воспроизведения / паузы. Чтобы получить доступ к состоянию компонента, необходимо связать функцию с классом компонента:

Первый вариант в вашем конструкторе:

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

Ваш рендер выглядит хорошо;)

Answer 4

Если вы используете анимацию Lottie, содержащую цикл, вы можете управлять всем этим с помощью встроенного API LottieView (если вы используете файл с анимацией).

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