Animated.loop图像

Question

早在1996年，我就为客户创建了旋转标识，因为我可以。现在，由于动画，我回到了2017年。

<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

易用-本机-Loop动画. to‘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>
   );
  }