RN Animated做个两张图渐隐渐显切换的动画效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37695006/article/details/82664003

RN小白，刚学一个礼拜，项目中需要这个效果，感觉挺好玩，分享出来。话不多说直接上代码～

/**
 *   duration: 1400, // 动画执行时间
 *   delay: 2000,   // 动画间隔时间
 *   easing: Easing.linear,    // 缓动函数
 *   startOpacity: 0,       // 动画初始透明度
 *   endOpacity: 1,     // 动画结束透明度
 *   startScale: 0.95,       // 动画初始放大比例
 *   endScale: 1,    // 动画结束放大比例
 *   cardStyle: {}        // 每个图片的样式
 */
class ImageFade extends Component {

    constructor(props){
        super(props)
        this.state = {
            opacity: new Animated.Value(this.props.startOpacity || 0),
        }
        this.duration = this.props.duration || 1400;
        this.delay = this.props.delay || 2000;
        this.easing = this.props.easing || Easing.linear;
        this.startOpacity = this.props.startOpacity || 0;
        this.endOpacity = this.props.startOpacity || 1;
        this.startScale = this.props.startScale || 1;
        this.endScale = this.props.endScale || 1;
        this.zindex = new Animated.Value(0);
    }

    startAnimated = () => {
        const animation = Animated.sequence([
            Animated.timing(this.state.opacity, {
                toValue: this.endOpacity,
                duration: this.duration,
                delay: this.delay,
                easing: this.easing // 缓动函数
            }),
            Animated.timing(this.zindex, {
                toValue: 1,
                duration: 0,
                delay: 0,
                easing: this.easing // 缓动函数
            }),
            Animated.timing(this.state.opacity, {
                toValue: this.startOpacity,
                duration: this.duration,
                delay: this.delay,
                easing: this.easing // 缓动函数
            })
        ]);
        Animated.loop(animation,{
            useNativeDriver: true,
            // iterations: 2
        }).start(() => {
            this.zindex.setValue(0);
        });
    }

    render() {
        var subopacity = Animated.subtract(new Animated.Value(this.endOpacity),this.state.opacity);
        let imageAddStyle = {
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        }

        var zindex1 = this.zindex;
        var zindex2 =  Animated.subtract(new Animated.Value(1),this.zindex);
        return (
            <View style={this.props.style}>
                <Animated.View 
                    style={[
                        {
                            zIndex: zindex2,
                            opacity: subopacity,
                            transform: [
                            {
                                scale: subopacity.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [this.startScale, this.endScale],
                                })
                            },
                            ],
                        },
                        imageAddStyle
                    ]} 
                >
                    {this.props.children[0]}
                </Animated.View>
                <Animated.View 
                    style={[
                        {
                            zIndex: zindex1,
                            opacity: this.state.opacity,
                            transform: [
                            {
                                scale: this.state.opacity.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [this.startScale, this.endScale],
                                })
                            },
                            ],
                        },
                        imageAddStyle
                    ]}
                >
                    {this.props.children[1]}
                </Animated.View>
            </View>
        );
    }
}

做个简单的封装，使用如下：

<ImageFade
    ref="ImageFade"
    duration={800}
    delay={3000}
    style={{
        width: 300,
        height: 200,
    }}>
    <Image
    style={{
        width: 300,
        height: 200,
    }}
    source={{uri: "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3203246227,3227479738&fm=173&app=25&f=JPEG?w=640&h=410&s=B51AA57FF8FA1F9ED411B8A60300A003"}} 
    />
    <Image
    style={{
        width: 300,
        height: 200,
    }}
    source={{uri: "https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1000&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"}} 
    />
</ImageFade> 

下面是效果：