React Native 按钮扩散效果

【看效果】


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 (
            
                
                     {
                            this.loopTouchAnimated();
                        }}
                    >
                        
                    

                

            

你可能感兴趣的:(React Native 按钮扩散效果)