【看效果】

QQ20170706-150504.gif

【贴上代码】动画代码

 componentDidMount() {
        this.loopTouchAnimated();
    }

    loopTouchAnimated() {

        Animated.timing(this.state.spreadAni, {
            toValue: 1,
            easing: Easing.linear,
            duration: 2000,

        }).start(
            ()=>{
                this.state.spreadAni.setValue(0);

            }
        );
    }

【渲染代码】

 math = this.state.spreadAni.interpolate({
            inputRange: [0, 1],
            outputRange: [100, 200],
        });
        alph = this.state.spreadAni.interpolate({
            inputRange: [0, 1],
            outputRange: ['rgba(227,111,83,1)', 'rgba(227,111,83,0)'],
        });

        return (
            <View style={styles.container}>
                <Animated.View
                    style={{
                        borderColor: alph,
                        borderWidth: 2,
                        width: math,
                        height: math,
                        borderRadius: math,
                        backgroundColor: alph,
                        justifyContent: 'center',
                        alignItems: 'center'

                    }}
                >
                    <TouchableOpacity
                        onPress={()=> {
                            this.loopTouchAnimated();
                        }}
                    >
                        <Image
                            style={styles.imageStyle}
                            source={require('../tabbar/panresponder-target.png')}

                        />
                    </TouchableOpacity>

                </Animated.View>

            </View>