react-native - 动画循环图像

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

易于使用 react-native-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>
   );
  }