ReactNative系列之二十一仿微信发语音空消息

在iOS上的微信发语音时，会先出现一个渐变颜色循环的动画效果。图为效果，代码向下看：

移步代码区：

主要的动画使用Animated.timing，将透明度1->0.3->1不停的播放

    startAnimation() {
        this.state.fadeOutOpacity.setValue(1);

        this._animated = Animated.sequence([  //  组合动画 parallel（同时执行）、sequence（顺序执行）、stagger（错峰，其实就是插入了delay的parrllel）和delay（延迟）

                    Animated.timing(
                        this.state.fadeOutOpacity,
                        {
                            toValue: 0.3,
                            duration: 2000,
                            easing: Easing.linear, // 线性的渐变函数
                        }
                    ),
                    Animated.timing(
                        this.state.fadeOutOpacity,
                        {
                            toValue: 1,
                            duration: 2000,
                            easing: Easing.linear, // 线性的渐变函数
                        }
                    ),
                ]); // 循环执行动画
    // .start(() => this.startAnimation())
        this._animated.start(() => this.startAnimation());
        this.state.fadeOutOpacity.addListener((state) => {
            console.log("fadeOutOpacity=>" + state.value);
        });
    }

在render()方法中可以这样使用

<Animated.View    // 可选的基本组件类型: Image, Text, View(可以包裹任意子View)
    style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        opacity: this.state.fadeOutOpacity, // 透明度
        width: 100,
        height: 40,
    }}>
    <View style={{backgroundColor: 'white', width: 100, height: 40, borderRadius: 5,
        borderWidth: 0.5,
        borderColor: "#7FB25A",}}/>
</Animated.View>

启动动画的地方可以

    componentDidMount() {
        this.startAnimation();
    }

结束动画

this._animated.stop((value) => {
                        console.log("yeputi_wk", "动画停止" + value)
                    },
                )