效果如上图所示,通过修改设备宽度实现动画效果
import React, {useRef, useEffect, useState} from 'react';
import {Animated, Text, View, Image} from 'react-native';const FadeInView = props => {const fadeAnim = useRef(new Animated.Value(0)).current;React.useEffect(() => {Animated.timing(fadeAnim, // 动画中的变量值{toValue: props.currentWidth, // duration: props.durationTime, // 让动画持续一段时间// Style property 'width' is not supported by native animated moduleuseNativeDriver: false,},).start(); // 开始执行动画}, [props.currentWidth]);return (<Animated.View // 使用专门的可动画化的View组件style={{...props.style,width: fadeAnim, // 将宽度绑定到动画变量值}}></Animated.View>);
};// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default props => {return (<FadeInViewdurationTime={props.durationTime}currentWidth={props.currentWidth}style={{height: 310, backgroundColor: 'pink'}}></FadeInView>);
};
使用的代码如下
<LayoutAnimatedWidthcurrentWidth={this.state.currentWidth}durationTime={this.state.durationTime}>
</LayoutAnimatedWidth>
PS:注意上面的代码和截图不一致;但是代码是可以实现上面的效果的。