Comment faire un compte à rebours Native avec des images animées?

Question

Je suis en train de créer une animation réagir native avec des images comme un compte à rebours comme ceci:

3 --> ease out down duration 1 second each case 
2 --> ease out down 
1 --> ease out down 

J'ai trouvé un moyen de le faire avec réagir animable, mais les résultats ne me convainquent pas, et si il y a une meilleure façon de le faire s'il vous plaît faites le moi savoir.

Je pense que chaque fois que je rencontre un nouveau rendu de l'élément commence à décompter, je dis de réagir en animant pour faire une itération de 3 décélération pour chaque nombre changeant le nombre d'image, ce n'est pas un moyen naturel de résoudre problème que j'ai.

Pour l'instant n'utilise pas redux, peut être plus tard je vais l'ajouter. Les propriétés de l'état: l'heure, l'heure actuelle pour commencer ne sont pas encore utilisées. Tout ce dont j'ai besoin, c'est l'effet d'un compte à rebours avec les images que je montre dans une animation bien définie.

Je pense qu'il est presque arrivé, mais il y a sûrement une meilleure façon de faire face à ce problème, toute suggestion est bien reçue, même si c'est un guide. J'ai aussi essayé avec réagir natif-Animer numéro, mais pas de chance ...

Merci à l'avance

import React from 'react'; 
import util from '../utils.js'; 
import * as Animatable from 'react-native-animatable'; 
import { 
    View, 
    Dimensions, 
    Image, 
    StyleSheet 
} from 'react-native'; 

const width = Dimensions.get('window').width; 
const height = Dimensions.get('window').height; 

const styles = StyleSheet.create({ 
    mainOption: { 
    }, 
    container: { 
    width: width, 
    height: height, 
    flex: 1, 
    justifyContent: 'center', 
    flexDirection: 'column', 
    alignItems: 'center' 
    } 
}); 
const timeLapse = [ 
       <Image source={require('../images/1.png')} key={util.uniqueId()}/>, 
       <Image source={require('../images/2.png')} key={util.uniqueId()}/>, 
       <Image source={require('../images/3.png')} key={util.uniqueId()}/> 
]; 

export default class StartingGameCountDown extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     time: props.time, 
     currentTimeToBegin: props.currentTimeToBegin, 
     imagePosition: 0 
    }; 
    } 
    componentWillReceiveProps(nextProps) { 
    const nextImage = this.state.imagePosition + 1; 
    this.setState({ 
     ...this.state, 
     letters: nextProps.time, 
     currentTimeToBegin: nextProps.currentTimeToBegin, 
     imagePosition: nextImage 
    }); 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <Animatable.View 
       ref='countDown' 
       duration={1000} 
       delay={0} 
       iterationCount={3} 
       animation="fadeOutDown" 
       style={styles.mainOption}> 
      {timeLapse[this.state.imagePosition]} 
     </Animatable.View> 
     </View> 
    ); 
    } 
} 

Answer 1

Ok après avoir pris un coup d'oeil dans la documentation que j'ai découvert qui peuvent utiliser la séquence et le calendrier pourrait être une option:

import React from 'react'; 
import { 
    Animated, 
    Text, 
    View, 
    Dimensions, 
    Image, 
    Easing, 
    StyleSheet 
} from 'react-native'; 

const width = Dimensions.get('window').width; 
const height = Dimensions.get('window').height; 

let counter = 0; 
const util = { 
    uniqueId:() => { 
    return counter++; 
    } 
}; 

const styles = StyleSheet.create({ 
    mainOption: { 
    }, 
    container: { 
    width: width, 
    height: height, 
    top: -100, 
    flex: 1, 
    justifyContent: 'center', 
    flexDirection: 'column', 
    alignItems: 'center' 
    } 
}); 
const timeLapse = [ 
    require('../images/1.png'), 
    require('../images/2.png'), 
    require('../images/3.png') 
]; 

export default class StartingGameCountDown extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     time: props.time, 
     countDown: new Animated.Value(0), 
     currentTimeToBegin: props.currentTimeToBegin, 
     quantity: 3, 
     sizes: [], 
     duration: props.duration, 
     animatedValues: [new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)] 
    }; 
    } 
    animations() { 
    let result = []; 
    state = this.state; 
    for(let i = 0; i < state.quantity; i++) { 
     //Start 
     result.push(Animated.timing(
      state.countDown, 
      { 
       toValue: 0, 
       duration: 0 
      } 
     ) 
    ); 
     let parallel = []; 
     //Animate 
     for(let j = 0; j < state.quantity; j++) { 
     parallel.push(
      Animated.timing(
       state.animatedValues[j], 
       { 
       easing: Easing.bezier(.07,.42,.85,.5), 
       toValue: i === j ? 1 : 0, 
       duration: i === j ? state.duration : 0 
       } 
      ) 
     ); 
     } 
     //Stop 
     parallel.push(Animated.timing(
      state.countDown, 
      { 
       easing: Easing.bezier(.07,.42,.85,.5), 
       toValue: 1, 
       duration: state.duration 
      } 
     ) 
    ); 

     result = [...result, Animated.parallel(parallel)]; 
    } 
    return result; 
    } 
    componentDidMount() { 
    Animated.sequence(this.animations()).start(); 
    } 
    shouldComponentUpdate(nextProps, nextState) { 
    //I don't to run lifecycle in any case by mistake here 
    return false; 
    } 
    createImagesAnimated() { 
    let transitionY = this.state.countDown.interpolate({ 
     inputRange: [0, 1], 
     outputRange: [0, this.props.transition.y] 
    }); 
    let result = []; 
    //What to be Animated 
    for(let i = 0; i < this.state.quantity; i++) { 
     let image = this.state.animatedValues[i].interpolate({ 
     inputRange: [0, 0.5, 1], 
     outputRange: [0, 1, 0] 
     }); 
     result.push(
      <Animated.Image 
       key={util.uniqueId()} 
       source={timeLapse[i]} 
       style={{ 
       //How to animate it 
        position: 'absolute', 
        opacity: image, 
        transform: [{ 
        translateY: transitionY 
        }] 
       }} 
      /> 
    ); 
    } 
    return result; 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     {this.createImagesAnimated()} 
     </View> 
    ); 
    } 
} 

Ce serait la mise en œuvre de la composante:

<CountDownComponent 
     transition={{y:200}} 
     duration={5000} 
    /> 

Cela résout mon problème J'espère trouver dans un autre moment une meilleure solution dans le futur.

Voici le repo: https://github.com/jotaoncode/CountDown