Animated.loop image

Question

1996年に私はクライアントのためにスピニングロゴを作成しました.2017年には、Animatedのおかげで戻ってきました。

<hr />以下のコードは機能しますが、再起動すると小さなバンプがあります。

Animated.loopはどのように使用できますか？それは終わりに達するたびに«がリセットされ、開始から再び始まります»。

Animated.loop(
    Animated.timing(this.state.spinValue, { 
    toValue: 1, 
    duration: this.props.duration, 
    easing: Easing.linear, 
    useNativeDriver: true 
    }) 
).start(); 

---

static defaultProps = { 
    duration: 60/(33 + 1/3) * 1000 
} 

constructor (props) { 
    super(props); 
    this.state = { 
    spinValue: new Animated.Value(0) 
    }; 
} 

componentDidMount() { 
    this._animate(); 
} 

_animate() { 
    Animated.timing(this.state.spinValue, { 
    toValue: 1, 
    duration: this.props.duration, 
    easing: Easing.linear, 
    useNativeDriver: true 
    }).start(event => { 
    if (event.finished) { 
     this.setState({ 
     spinValue: new Animated.Value(0) 
     }, this._animate.bind(this)); 
    } 
    }); 
} 

render() { 
    const spin = this.state.spinValue.interpolate({ 
    inputRange: [0, 1], 
    outputRange: ['0deg', '360deg'] 
    }); 
    return (
    <View style={ Loading.style.container }> 
     <Animated.Image 
     source={ logo } 
     style={{ transform: [{ rotate: spin }] }} 
     /> 
    </View> 
); 
} 

Answer 1

使いやすく反応し、ネイティブLoopAnimation.js' https://github.com/Infinity0106/react-native-LoopAnimation

import LoopAnimation from 'react-native-LoopAnimation.js' 
... 
render() { 
    //you can also use, like source={imgSource} 
    const imgSource= 
    {uri:'http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg',width:700,height:306}; 

    return (
    <View style={{flex:1}}> 
     {/*this is the background animation */} 
     <LoopAnimation source={require('./img/back.jpg')} duration={10000} /> 
     <View style={{ 
      flex: 1, 
      flexDirection: 'column', 
      justifyContent: 'center', 
      alignItems: 'center', 
     }}> 
     {/*Content goes here*/} 
     <View style={{width: 200, height: 400, backgroundColor: 'powderblue'}} /> 
     </View> 
    </View> 
    ); 
    }