图片平移实现水波动画

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    Animated,
    Navigator,
    DeviceEventEmitter,
    Alert,
    ART,
    Group,
    Easing,
} from 'react-native';
var deviceWidth =Dimensions.get ('window').width;
var deviceHeight = Dimensions.get('window').height;
var timing = Animated.timing;
var aaa = null;
const {Surface, Shape, Path} = ART;
var rn = React.createClass({
  getInitialState(){ // 为图片赋初值
    return {
        runningDogeTrans1 : new Animated.ValueXY({
            x: 0,
            y: Dimensions.get('window').height/2 - 120
        }),
        runningDogeTrans2 : new Animated.ValueXY({
            x: Dimensions.get('window').width-0.5,
            y: Dimensions.get('window').height/2 - 120
        }), 
        runningDogeTrans3 : new Animated.ValueXY({
            x: -Dimensions.get('window').width+0.5,
            y: Dimensions.get('window').height/2 - 120
        }),
        runningDogeTrans4 : new Animated.ValueXY({
            x: 0,
            y: Dimensions.get('window').height/2 - 120
        }), 
    }
  },
  componentDidMount() {
      this.startAnimation();//启动动画
  },

  startAnimation:function() {

     // 新周期开始 初始化图片位置

      this.state.runningDogeTrans1.setValue({x: 0, y: Dimensions.get('window').height/2 - 120});
      this.state.runningDogeTrans2.setValue({x: Dimensions.get('window').width-0.5, y: Dimensions.get('window').height/2 - 120});
      this.state.runningDogeTrans3.setValue({x: -Dimensions.get('window').width+0.5, y: Dimensions.get('window').height/2 - 120});

      this.state.runningDogeTrans4.setValue({x: 0, y: Dimensions.get('window').height/2 - 120});

      aaa = Animated.parallel([ 
            timing(this.state.runningDogeTrans1, {
                toValue: {
                    x: -Dimensions.get('window').width,
                    y: Dimensions.get('window').height/2 - 120
                },
                duration: 2000,//2000毫秒将动画从初始位置移动到toValue的位置
                easing: Easing.linear//以线性函数对动画进行缓冲
            }),     
            timing(this.state.runningDogeTrans2, {
                toValue: {
                    x: 0,
                    y: Dimensions.get('window').height/2 - 120
                },
                duration: 2000,
                easing: Easing.linear
            }),
            timing(this.state.runningDogeTrans3, {
                toValue: {
                    x: 0,
                    y: Dimensions.get('window').height/2 - 120
                },
                duration: 2000,
                easing: Easing.linear
            }),    
            timing(this.state.runningDogeTrans4, {
                toValue: {
                    x: Dimensions.get('window').width,
                    y: Dimensions.get('window').height/2 - 120
                },
                duration: 2000,
                easing: Easing.linear
            }),
      ])
      aaa.start(() => this.startAnimation());//回调实现动画的循环
  },
  render(){
       return (
           <View style={styles1.container}>
                <Animated.View style={[styles1.doges, {
                    transform: this.state.runningDogeTrans1.getTranslateTransform()
                }]}>
                    <Image style = {{height:292/1620*deviceWidth,width:deviceWidth}} source={require('./img/rect1.png')}/>
                </Animated.View>
                <Animated.View style={[styles1.doges, {
                    transform: this.state.runningDogeTrans2.getTranslateTransform()
                }]}>
                    <Image style = {{height:292/1620*deviceWidth,width:deviceWidth}} source={require('./img/rect1.png')}/>
                </Animated.View>
                                <Animated.View style={[styles1.doges, {
                    transform: this.state.runningDogeTrans3.getTranslateTransform()
                }]}>
                    <Image style = {{height:292/1620*deviceWidth,width:deviceWidth}} source={require('./img/rect2.png')}/>
                </Animated.View>
                <Animated.View style={[styles1.doges, {
                    transform: this.state.runningDogeTrans4.getTranslateTransform()
                }]}>
                    <Image style = {{height:292/1620*deviceWidth,width:deviceWidth}} source={require('./img/rect2.png')}/>
                </Animated.View>
          </View>
    );
   }
  },
}); 
const styles1 = StyleSheet.create({
  doges: {
      position: 'absolute',
      borderWidth: 0,
  },
  container: {
    flex: 1,
    justifyContent: 'center',                                                                                                                                                                                                                                                             alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});   
AppRegistry.registerComponent('rn', () => rn);