React Nativeをアニメーション画像でカウントダウンする方法は？

Question

私はこのようなカウントダウンとして、いくつかの画像に反応するネイティブなアニメーションを作成しようとしています：私はこれを行う方法を発見した

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

がアニメート反応するが、結果は私を説得し、あればしないでくださいそれをするよりよい方法が私に教えてください。

私は、要素の新しいレンダリングを実行するたびに、カウントダウンを開始すると思います。イメージ番号を変更するそれぞれの番号に対して、3つの繰り返しを繰り返すためにアニメーション可能です。これは自然な解決方法ではありません。私が持っている問題。

現在のところ、レフィックスは使用されていませんが、後で追加することがあります。 state：timeのプロパティ、開始する現在の時間はまだ使用されていません。

私が必要とするのは、明確に定義されたアニメーションで、私が示す画像でカウントダウンが起こっているということです。

私はほぼそこに着いていると思いますが、確かにこの問題に直面するより良い方法があります。ガイドとしても、どんな提案も受け入れられています。また、私はそれが順序やタイミングでした使用している可能性があり、私が見つけた文書の中に顔を取った後...反応し、ネイティブ・アニメイト数が、運を事前に

おかげ

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]を試してみましたオプションとなる：

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

これは、コンポーネントの実装のようになります。

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

これは私の問題を解決します。将来、より良い解決策を見つけることを願っています。

ここにレポ： https://github.com/jotaoncode/CountDown