Как воспроизвести фрагмент анимации Лотта ie (файл. json) в React Native - PullRequest
Новая
       32

Как воспроизвести фрагмент анимации Лотта ie (файл. json) в React Native

0 голосов
/ 10 апреля 2020

Я хочу воспроизвести только часть анимации в реагировать нативно, используя лот ie. Просмотр составляет около 5 секунд, в то время как на скорости = {1} я хочу играть только первые 3 секунды, а затем go до на следующем экране код находится ниже

LogoScreen. js: 

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

  onAnimationFinish = () => {
    this.props.navigation.navigate("Login")
  }
  render () {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
        <View>
          <LottieView
            source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
            style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
            autoPlay
            loop={false}
            speed={1}
            onAnimationFinish={this.onAnimationFinish}
          />
        </View>
      </View>
    )
  }

1 Ответ

1 голос
/ 10 апреля 2020

Ну, вы можете сделать это несколькими способами, один из способов будет таким, как показано ниже.

Вы можете использовать ref, чтобы воспроизвести его вручную, а затем через 3 секунды просто перенаправить на следующий экран. 

import React from 'react';
import { StyleSheet, View, Image, TextInput, StatusBar, Text } from "react-native";
import Icons from 'react-native-vector-icons/Ionicons';
import LottieView from "lottie-react-native";

export default class ChatScreen extends React.Component {

    componentDidMount() {
        this.anim.play();

        setTimeout(() => {
            this.props.navigation.navigate("Login")
        }, 3000);
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar barStyle="light-content" backgroundColor="#161f3d" />
                <View>
                    <LottieView
                        source={require('../assets/animations/lottie/MotionCorpse-Jrcanest.json')}
                        style={{ justifyContent: "center", alignSelf: "center", height: "100%", width: "100%" }}
                        autoPlay={false}
                        loop={false}
                        speed={1}
                        ref={animation => { this.anim = animation; }} 
                    />
                </View>
            </View>
        )
    }
}

Другой способ - если вы знаете точные номера кадров, вы можете воспроизводить анимацию до того кадра, который завершается через 3 секунды. Это уже упоминалось в документации Lott ie. 

this.animation.play(30, 120);
...